HTML: el lenguaje de marcas que da estructura
Cómo funciona una etiqueta
Una etiqueta suele ir en par: una de apertura y una de cierre; la de cierre se distingue por una barra inclinada antes del nombre. El texto o contenido va entre ambas. Por ejemplo, para un título de primer nivel abres con la marca h1, escribes el título y lo cierras con la misma marca precedida de barra. Para un párrafo usas la marca p. Hay etiquetas que no llevan cierre porque no encierran contenido, como la de salto de línea (br) o la de imagen (img), que en cambio carga atributos como la ruta del archivo.
| Marca | Qué estructura | Contenido o atributo |
|---|---|---|
| h1 hasta h6 | Títulos y subtítulos jerárquicos | Texto del título |
| p | Párrafo de texto corrido | Texto |
| ul y li | Lista con viñetas y sus elementos | Cada item en li |
| a | Enlace a otra página o recurso | Atributo con el destino |
| img | Imagen incrustada | Atributos de ruta y texto alterno |
Ejemplo resuelto paso a paso: la página del filtrador
Queremos estructurar la explicación de la solución. Bloque 1: una marca h1 con el título "Filtro casero de agua". Bloque 2: una marca p con el párrafo que describe el problema. Bloque 3: una lista ul donde cada paso del armado va dentro de su propio li. Bloque 4: una marca img con el atributo de la foto del filtro y un texto alterno que describa la imagen para quien no puede verla. Bloque 5: una marca a que enlace al instructivo descargable. El resultado es una página con jerarquía clara que cualquier navegador y cualquier lector con discapacidad visual puede seguir.
Ejercicios
¿Qué tipo de contenido debe ir dentro de una marca li?
HTML se encarga principalmente del diseño visual (colores, tipografías y animaciones).
HTML es un lenguaje de ; una etiqueta normalmente tiene una de apertura y otra de , que se distingue por una barra .
Escribe el esquema (sin importar el diseño) de una página que presente una solución a una problemática de tu escuela: un título, un párrafo introductorio, una lista con tres pasos y una imagen con su descripción alterna. Nombra la marca que usarías en cada parte.
Se valora que asignes una marca distinta a título, párrafo, lista e imagen y que menciones el texto alterno.
Tu texto se guarda sólo en este dispositivo.
Comprobación de dominio
¿Sabes estructurar contenido con HTML?
Aquí se mira lo que ya fuiste acertando. Pulsa «Comprobar» para saber si puedes seguir.
Comentarios
Inicia sesión para comentar.
Todavía no hay comentarios. Sé la primera persona en opinar.