Elementos de texto
La mayor parte de lo que un visitante lee en una página es contenido escrito simple: títulos, párrafos, una advertencia en negrita, una línea citada, un fragmento de código. HTML tiene un elemento específico para cada tarea, y elegir el correcto hace más que cambiar cómo se ve el texto. Le dice al navegador, a los motores de búsqueda y a las herramientas de asistencia qué es realmente cada fragmento de texto.
Encabezados y jerarquía
HTML te proporciona seis tamaños de encabezado, desde <h1> hasta <h6>. Un encabezado es un título para la página o para una sección de ella. <h1> es el título principal, el grande en la parte superior. <h2> etiqueta una sección principal, <h3> una subsección dentro de esa, y así sucesivamente hasta <h6>.
Piensa en un libro impreso. El título en la portada es el <h1>. Cada título de capítulo es un <h2>. Los encabezados dentro de un capítulo son <h3>. Usas los niveles para mostrar qué pertenece a qué.
Una cosa para recordar desde el principio: no elijas un encabezado porque hace el texto del tamaño que quieres. <h1> resulta ser grande, pero su trabajo es decir "este es el título principal", no "hacer esto grande". Si quieres texto grande en algún lugar, ese es un trabajo para CSS más adelante.
<h1>Pan de masa madre para principiantes</h1>
<h2>Construir una masa madre</h2>
<p>Una masa madre es una cultura viva de harina y agua.</p>
<h3>Del día uno al tres</h3>
<p>Mezcla pesos iguales de harina y agua, luego espera.</p>
<h2>Hornear tu primer pan</h2>
<p>Una vez que la masa madre está activa, estás listo para hornear.</p>Un <h1> nombra toda la página. Dos encabezados <h2> marcan las secciones principales, y el <h3> se encuentra perfectamente dentro de la primera de ellas. Lee los números de encabezado por sí solos y puedes ver la forma del artículo sin leer una palabra del cuerpo.
<h1> hasta <h6>, y <h1> es el único título principal en la parte superior. El resto etiqueta tus secciones y subsecciones. La trampa en la que caí temprano: no agarres un encabezado solo porque se ve grande, para eso es CSS. El número se trata de qué es la cosa, no de su tamaño. Párrafos y saltos de línea
Un bloque de texto ordinario va en un párrafo, el elemento <p>. Envuelve cada párrafo en su propio <p>...</p> y el navegador le da un poco de espacio arriba y abajo, así que los párrafos se separan de la manera que lo hacen en un libro.
<p>El pan necesita cuatro cosas: harina, agua, sal y tiempo.</p>
<p>Consigue eso bien y el resto es paciencia.</p>Observa que presionar Entrar en tu archivo HTML no hace nada en la página. El navegador ignora los saltos de línea y los espacios extras que escribes; solo le importan las etiquetas. Por eso necesitas <p> para separar párrafos, en lugar de simplemente escribirlos en líneas diferentes.
Si realmente necesitas que una línea se rompa dentro de un párrafo, como las líneas de una dirección o un poema corto, hay un elemento <br> para eso. Fuerza un salto de línea simple y nada más.
<p>...</p>, y eso es lo que pone espacio entre párrafos. El navegador ignora los Entres y espacios que escribes, así que las etiquetas hacen el trabajo. Usa <br> solo cuando una línea realmente necesita romperse en medio de un párrafo, como una dirección. Énfasis: <strong> y <b>, <em> e <i>
Dos elementos hacen el texto negrita, y dos lo hacen itálica. <strong> y <b> se renderizan ambos en negrita; <em> e <i> ambos se renderizan en cursiva. Así que cuatro etiquetas, dos apariencias.
<p><strong>Advertencia:</strong> el horno está muy caliente.</p>
<p>Necesitas amasar la masa <em>a fondo</em>.</p>Por ahora, usa <strong> cuando un poco de texto es importante, como una advertencia, e <em> cuando quieres enfatizar una palabra de la manera en que tu voz lo haría si estuvieras leyendo en voz alta. Son las dos que querrás la mayoría de las veces, y el navegador las hace negrita e itálica para ti.
<strong> y <b> ambos van en negrita, <em> e <i> ambos van en cursiva. Al empezar, usa <strong> cuando algo es importante, como una advertencia, e <em> cuando quieres enfatizar una palabra de la manera en que tu voz lo haría. Esos dos cubrirán casi todo lo que escribas. Otro texto inline (citas, <code>, <abbr> y más)
Más allá de negrita e itálica, HTML tiene pequeños elementos para fragmentos comunes de texto. Una cita corta va en <q>, y el navegador agrega las comillas por ti. Un fragmento de código, como el nombre de un comando, va en <code>, que el navegador muestra en una fuente monoespaciada para que se destaque de la escritura normal.
<p>Mi abuela siempre decía <q>una olla vigilada nunca hierve</q>.</p>
<p>Guarda el archivo con el atajo <code>Ctrl S</code>.</p>Hay algunos más de estos, pero <q> para una cita corta y <code> para código son los dos que encontrarás más. Cada uno envuelve un pequeño fragmento de texto y le dice al navegador qué es.
<q> envuelve una cita corta y agrega las comillas por ti, y <code> muestra código en una fuente monoespaciada para que se destaque. Hay algunos más de estas pequeñas etiquetas, pero esas dos aparecen más. Cada una simplemente envuelve un poco de texto y dice qué es.