Cómo sabe el navegador qué es cada parte
HTML es el lenguaje que dice qué hay en una página web: títulos, listas, enlaces y formularios. Bien escrito, lo entienden a la vez el navegador, los buscadores y los lectores de pantalla.
Sus siglas vienen de HyperText Markup Language, lenguaje de marcas de hipertexto. Piensa en la página de la cafetería de tu facultad. Tiene un título, una lista de platos y un buscador. Alguien tiene que marcar cuál es cada cosa.
Al terminar esta lección
Nota
Puedo estructurar una página con HTML que tenga sentido.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| HTML | el lenguaje que dice qué hay en una página | |
| Elemento | una parte de la página, escrita con etiquetas | <h2>Hola</h2> |
| Atributo | un dato extra dentro de la etiqueta de apertura | href="menu.html" |
| Encabezado | un título de sección, del nivel 1 al 6 | h2 |
| Punto de referencia | una zona con nombre, como la navegación o el contenido principal | nav |
| Formulario | una zona donde la persona escribe datos | form |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un elemento tiene apertura, contenido y cierre
Una página HTML es un texto lleno de etiquetas entre signos menor y mayor. La mayoría vienen en pareja: una abre y otra cierra, con una barra.
Lo que queda entre las dos es el contenido. Todo junto es un elemento. Algunas etiquetas llevan atributos, que dan un dato extra, como la dirección de un enlace.
Tres elementos con sus atributos
<h2>Platos de hoy</h2>
<a href="menu.html">Ver el menú</a>
<img src="paella.jpg" alt="Una paella">Ejemplo resuelto: las partes del enlace
| Parte | En el ejemplo | Qué hace |
|---|---|---|
| Etiqueta de apertura | <a href="menu.html"> | Empieza el elemento y lleva sus atributos |
| Atributo | href="menu.html" | Dice a qué archivo va el enlace |
| Contenido | Ver el menú | Es el texto que se pulsa |
| Etiqueta de cierre | </a> | Termina el elemento |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Los encabezados forman el esquema de la página
Hay seis niveles de encabezado, de h1 a h6. El h1 es el título de toda la página y suele haber uno solo. Cada h2 abre una sección, y un h3 abre una parte dentro de ella.
Los encabezados no sirven para hacer el texto grande. Dicen de qué trata cada zona, y un lector de pantalla salta de uno a otro para moverse.
El esquema de una página
<h1>Cafetería de la facultad</h1>
<h2>Menú del día</h2>
<h3>Primeros</h3>
<h3>Segundos</h3>
<h2>Horario</h2>Lee el esquema de la página del laboratorio
El laboratorio tiene una página pequeña, el menú de un comedor, en site/index.html. Sus textos están en inglés y Lunch menu quiere decir menú del almuerzo.
Los scripts del laboratorio escriben en inglés. El primero cuenta las etiquetas y da 36 en total, con cinco a y cinco li. El segundo escribe solo los encabezados: un h1 y tres h2.
Contar las etiquetas de la página
docker exec jupyter python3 steps/tags.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Escribir el esquema de encabezados
docker exec jupyter python3 steps/outline.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Un error frecuente
Advertencia
Mucha gente usa un h3 solo porque quiere letra más pequeña. Un encabezado dice qué lugar ocupa una sección en el esquema, no qué tamaño tiene. El tamaño se cambia con CSS. Usa el nivel que corresponda y no saltes niveles.
Zonas con nombre y campos con etiqueta
header, nav, main, section y footer marcan zonas con nombre. Un lector de pantalla puede ir directo al main y saltarse el menú.
En un formulario, cada input necesita su label. El atributo for de la etiqueta lleva el mismo valor que el id del campo.
Zonas con nombre y un campo etiquetado
<header>
<h1>Menú del día</h1>
<nav><a href="#platos">Platos</a></nav>
</header>
<main>
<section id="platos">...</section>
</main>
<footer>Cafetería, Facultad de Informática</footer>
<label for="buscar">Plato que buscas</label>
<input id="buscar" type="text">Comprobar los enlaces de la página
docker exec jupyter python3 steps/links.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.