Anatomía de una etiqueta:
Una etiqueta de apertura comienza con el signo "menor que", el nombre de la etiqueta y el signo "mayor que" (ej.: <strong>).
Una etiqueta de cierre es idéntica a la de apertura, pero incluye una barra diagonal antes del nombre (ej.: </strong>).
¡Recuerda siempre cerrar tus etiquetas para evitar que el estilo se extienda al resto de la página!
1. Estilo básico de texto
Negrita: <b>negrita</b>
Cursiva: <i>cursiva</i>
Subrayado: <u>subrayado</u>
2. Párrafos y alineación
Párrafo estándar: <p>Este es un párrafo de texto.</p>. Esto crea una nueva línea con un pequeño margen antes y después del texto.
Alineación al centro: <p style="text-align: center;">Texto alineado al centro.</p>
Alineación a la derecha: <p style="text-align: right;">Texto alineado a la derecha.</p>
Alineación a la izquierda: <p style="text-align: left;">Texto alineado a la izquierda.</p>
Nota: El atributo style se agrega directamente dentro de la etiqueta de apertura para dar instrucciones específicas.
3. Listas
Lista con viñetas (no ordenada): Ideal para servicios o características de las habitaciones. Usa <ul> para iniciar la lista y <li> para cada elemento con viñeta.
HTML
<ul>
<li>Wi-Fi gratis</li>
<li>Acceso a la piscina</li>
</ul>
Lista numerada (ordenada): Perfecta para procedimientos de entrada o secuencias específicas paso a paso. Usa <ol> para iniciar la lista y <li> para cada elemento numerado.
HTML
<ol>
<li>Registro en línea</li>
<li>Llega a las 3 PM</li>
</ol>
4. Enlaces a otros sitios y enlaces rápidos
Enlace estándar: Se abre en la misma ventana. <a href="https://hotelthink.com">Hotel Think</a>
Enlace en una pestaña nueva: Mantiene tu sitio web abierto en segundo plano. <a href="https://www.localattraction.com" target="_blank" rel="noopener noreferrer" >Local Attraction</a>
Enlace para llamar con un clic: <a href="tel:+18777364195">Call</a>
Enlace para enviar correo con un clic: Abre el proveedor de correo predeterminado del huésped. <a href="mailto:support@thinkreservations.com">Email</a>
5. Espaciado, separación y ajustes finos
Salto de línea: Usa <br> para forzar el texto a la siguiente línea sin dejar un espacio.
Línea horizontal: Usa <hr> para crear una línea divisoria horizontal visible en la página.
Nota importante: Tanto <br> como <hr> son etiquetas "autocerradas", es decir, no requieren una etiqueta de cierre independiente.
Texto pequeño: <small>Letra pequeña</small>
Resaltado: <mark>Oferta especial</mark>
Buenas prácticas de HTML
Cada etiqueta necesita una etiqueta de cierre.
Cierra las etiquetas en el orden inverso al que las abriste. Por ejemplo: <p><b>Texto</b></p>.
Usa solo el código que realmente necesites; ¡el código limpio es mucho más fácil de mantener!