3. Texto, listas y enlaces

Encabezados

Los encabezados van de <h1> a <h6> y forman la jerarquía de títulos de la página, igual que el índice de un documento.

<h1>Título principal</h1>
<h2>Un subtítulo</h2>
<h3>Algo dentro de ese subtítulo</h3>

Un solo <h1> por página

El h1 es el título de la página, no un tamaño de letra. Después vienen h2, h3 y así, sin saltarse niveles.

La etiqueta no se elige por cómo se ve, sino por su importancia. Si un h2 te queda muy grande, eso se arregla con CSS, no cambiándolo por un h4.

Párrafos y énfasis

<p>Un párrafo con una palabra <strong>importante</strong> y otra con <em>énfasis</em>.</p>

Etiqueta	Qué significa	Cómo se ve por defecto
<p>	Un párrafo de texto	Bloque con espacio arriba y abajo
<strong>	Contenido importante	Negrita
<em>	Contenido con énfasis	Cursiva

strong y em no son "negrita" y "cursiva"

Existen <b> y <i>, que solo cambian el aspecto. <strong> y <em> además dicen por qué ese texto destaca, y un lector de pantalla los pronuncia con otra entonación. Usa siempre estos dos.

Los tamaños y grosores que ves son los que trae el navegador por defecto. Los controlaremos con CSS más adelante.

Listas

Hay dos tipos, y en ambos cada elemento va dentro de un <li> (list item).

<!-- Sin orden: viñetas -->
<ul>
  <li>Manzana</li>
  <li>Pera</li>
</ul>
 
<!-- Ordenada: números -->
<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Etiqueta	Nombre	Cuándo usarla
<ul>	Unordered list	El orden no importa: aficiones, ingredientes, características
<ol>	Ordered list	El orden sí importa: pasos de una receta, un ranking
<li>	List item	Cada elemento, dentro de ul o de ol

Enlaces

El enlace es la etiqueta <a>, y su atributo href dice a dónde lleva.

<!-- A otra página del mismo sitio -->
<a href="sobre-mi.html">Sobre mí</a>
 
<!-- A una web externa -->
<a href="https://umag.cl">UMAG</a>

Los enlaces son lo que conecta las páginas de tu sitio: sin ellos tendrías archivos sueltos, no un sitio.

El texto del enlace debe decir a dónde va

<a href="contacto.html">Contacto</a> se entiende solo. <a href="contacto.html">clic aquí</a> no dice nada, y quien navegue con lector de pantalla escuchará una lista de “clic aquí, clic aquí, clic aquí”.

Lo que escribes en el href se llama ruta, y tiene varias formas según dónde esté el archivo al que apuntas. Las verás todas en Rutas y navbar, junto con el resto de casos: abrir en una pestaña nueva, saltar dentro de la misma página y subir de carpeta.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Cómo se hacen los títulos principales y las palabras en negritas?

Los títulos con <h1> a <h6>: un solo h1 por página (el título principal) y después h2, h3… sin saltarse niveles.

Las palabras destacadas con <strong> (importante, se ve en negrita) o <em> (énfasis, se ve en cursiva).

¿Por qué se dice que los encabezados no se eligen por su tamaño?

Porque marcan importancia, no aspecto: son la jerarquía de la página, como el índice de un documento. Si un h2 te parece muy grande, eso se cambia con CSS. Usar un h4 como si fuera un párrafo pequeño rompe la estructura para los buscadores y para los lectores de pantalla.

¿Qué etiqueta sirve para hacer una lista numerada?

<ol> (ordered list), con cada elemento dentro de un <li>. La de viñetas, sin orden, es <ul> (unordered list), también con <li> dentro.

¿Qué hace el atributo href?

Dice a dónde lleva el enlace: a otra página del mismo sitio (sobre-mi.html) o a una web externa (https://umag.cl).

Lo que se escribe dentro se llama ruta, y tiene más formas de las que caben aquí: las verás todas en la página siguiente.

¿Cuándo usas <ul> y cuándo <ol>?

<ol> cuando el orden importa: los pasos de una receta, un ranking, las instrucciones de una instalación. <ul> cuando no: aficiones, ingredientes, características.

La pregunta que lo decide: ¿cambiaría el significado si reordeno los elementos? Si sí, es ol.

¿Por qué <a href="contacto.html">clic aquí</a> es mala práctica?

Porque el texto del enlace no dice a dónde lleva. Quien navega con lector de pantalla suele pedir la lista de enlaces de la página, y escucharía “clic aquí, clic aquí, clic aquí” sin poder distinguir uno de otro.

El texto del enlace tiene que entenderse fuera de contexto: <a href="contacto.html">Contacto</a>.