Learn HTML & CSSElementos 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 cita, un fragmento de código. HTML tiene un elemento específico para cada una de estas funciones, y elegir el correcto hace algo más que cambiar la apariencia del texto. Le dice al navegador, a los motores de búsqueda y a las herramientas de asistencia qué es en realidad cada fragmento de texto.
Encabezados y jerarquía
HTML te da 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 de arriba. <h2> marca una sección importante, <h3> una subsección dentro de ella, y así hasta <h6>.
Piensa en un libro impreso. El título en la portada es el <h1>. El título de cada capítulo es un <h2>. Los encabezados dentro de un capítulo son <h3>. Usas los niveles para mostrar qué va debajo de qué.
Algo que debes tener presente desde el inicio: no elijas un encabezado porque hace que el texto tenga el tamaño que quieres. <h1> resulta que se ve grande, pero su función es decir "este es el título principal", no "haz esto grande". Si quieres texto grande en algún lugar, eso es trabajo de CSS, más adelante.
<h1>Sourdough for beginners</h1>
<h2>Building a starter</h2>
<p>A starter is a living culture of flour and water.</p>
<h3>Day one to three</h3>
<p>Mix equal weights of flour and water, then wait.</p>
<h2>Baking your first loaf</h2>
<p>Once the starter is active, you are ready to bake.</p>Un <h1> nombra la página completa. Dos encabezados <h2> marcan las secciones principales, y el <h3> queda perfectamente ubicado dentro de la primera de ellas. Lee los números de los encabezados por sí solos y podrás ver la forma del artículo sin leer una sola palabra del cuerpo.
<h1> a <h6>, y <h1> es el único título principal, arriba de todo. El resto marca tus secciones y subsecciones. La trampa en la que caí al principio: no elijas un encabezado porque se ve grande, para eso está el CSS. El número tiene que ver con qué es la cosa, no con su tamaño. Párrafos y saltos de línea
Un bloque de texto normal va en un párrafo, el elemento <p>. Envuelve cada párrafo en su propio <p>...</p> y el navegador le agrega un poco de espacio arriba y abajo, para que los párrafos queden separados como en un libro.
<p>Bread needs four things: flour, water, salt, and time.</p>
<p>Get those right and the rest is patience.</p>Fíjate en que presionar Enter en tu archivo HTML no le hace nada a la página. El navegador ignora los saltos de línea y los espacios extra que escribes; solo le importan las etiquetas. Por eso necesitas <p> para separar párrafos, en lugar de simplemente escribirlos en líneas distintas.
Si de verdad necesitas que una línea se corte dentro de un párrafo, como las líneas de una dirección o un poema corto, existe el elemento <br> para eso. Fuerza un único salto de línea y nada más.
<p>...</p>, y eso es lo que pone espacio entre párrafos. El navegador ignora los Enter y los espacios que escribes, así que las etiquetas hacen el trabajo. Usa <br> solo cuando una línea realmente necesita cortarse a mitad de un párrafo, como en una dirección. Énfasis: <strong> y <b>, <em> e <i>
Dos elementos hacen que el texto se vea en negrita, y dos lo hacen en cursiva. <strong> y <b> se renderizan en negrita; <em> e <i> se renderizan en cursiva. Entonces, cuatro etiquetas, dos apariencias.
<p><strong>Warning:</strong> the oven is very hot.</p>
<p>You need to knead the dough <em>thoroughly</em>.</p>Por ahora, recurre a <strong> cuando un fragmento de texto es importante, como una advertencia, y a <em> cuando quieras enfatizar una palabra tal como lo haría tu voz al leer en voz alta. Son las dos que usarás la mayor parte del tiempo, y el navegador se encarga de mostrarlas en negrita y cursiva.
<strong> y <b> se ven en negrita, <em> e <i> se ven en cursiva. Al empezar, recurre a <strong> cuando algo es importante, como una advertencia, y a <em> cuando quieras enfatizar una palabra tal como lo haría tu voz. Esos dos van a cubrir casi todo lo que escribas. Otros textos en línea (citas, <code>, <abbr> y afines)
Más allá de la negrita y la cursiva, HTML tiene pequeños elementos para fragmentos de texto comunes. Una cita corta va en <q>, y el navegador le 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 destaque frente al texto normal.
<p>My gran always said <q>a watched pot never boils</q>.</p>
<p>Save the file with the <code>Ctrl S</code> shortcut.</p>Hay unos cuantos más de estos, pero <q> para una cita corta y <code> para código son los dos que verás con más frecuencia. 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 destaque. Hay algunas etiquetas pequeñas más de este tipo, pero esas dos son las que más aparecen. Cada una envuelve un fragmento de texto y dice qué es.