Títulos, párrafos y énfasis
Ahora que sabes montar el esqueleto, vamos a llenarlo con lo más básico de cualquier página: texto ordenado en títulos y párrafos. Este módulo es más sencillo que el anterior: piensa en ello como aprender a organizar un documento de texto, pero con etiquetas en vez de con botones.
En este módulo vas a...
- Usar encabezados de distintos niveles (h1, h2, h3...).
- Escribir párrafos de texto.
- Diferenciar texto enfatizado (
<em>) de texto destacado (<strong>).
Los encabezados: h1, h2, h3...
<h1> (el más importante, el "título del libro")
a <h6> (el menos importante). La letra "h" viene
de heading, que en inglés significa "encabezado" o
"título".
En la práctica, en la mayoría de páginas solo se usan los tres
primeros niveles (h1, h2 y
h3): el título general de la página, los apartados
grandes, y los sub-apartados dentro de cada uno.
<h1>Nombre de la página (solo debería haber uno)</h1>
<h2>Un apartado importante</h2>
<h3>Un sub-apartado dentro del anterior</h3>
No elijas un encabezado "porque se ve más pequeño o más grande":
para eso está el CSS. Elige el nivel de encabezado según su
importancia dentro del contenido, como en el
índice de un libro. Un <h1> por página, y
luego ve bajando de nivel sin saltarte ninguno (no pases de h2 a h4).
Los párrafos
Cualquier bloque de texto "normal" va dentro de una etiqueta <p> (de paragraph, párrafo en inglés).
<p>
Domestika es la mayor comunidad para profesionales creativos.
Aprende online las mejores técnicas.
</p>Aunque en tu archivo escribas el párrafo en varias líneas, el navegador lo juntará todo en una sola "masa" de texto. Los saltos de línea del código no se muestran en la pantalla; solo sirven para que tú leas mejor tu propio código.
Enfatizar y destacar texto
Dentro de un párrafo, a veces queremos resaltar una palabra o frase. HTML tiene dos etiquetas para eso, y aunque las dos se vean parecido, no significan lo mismo:
| Etiqueta | Significado | Cómo se ve normalmente |
|---|---|---|
<em> | Énfasis: la frase cambia de tono si la leyeras en voz alta. | cursiva |
<strong> | Importancia: esto es relevante o urgente. | negrita |
No elijas <strong> solo porque "quiero que se
vea en negrita" ni <em> solo porque "quiero
cursiva". Esas etiquetas hablan del significado del
texto, no solo de su apariencia (eso, otra vez, es trabajo del
CSS). Pregúntate: ¿esto es importante/urgente, o simplemente
cambia el tono?
Practica: ordena esta biografía
Completa el código para que "Ana García" sea un título principal, "Sobre mí" un subtítulo, la palabra "ilustradora" quede destacada con importancia, y la frase "desde muy pequeña" quede enfatizada.