Escrito por Laura Chuburu
El HTMl es el lenguaje básico para crear sitios web. Podríamos hacer un sitio únicamente con este lenguaje y sería perfectamente entendible, navegable, accesible y adaptable a dispositivos. Sólo le faltaría un diseño elaborado y su contenido sería estático.
En el código HTML se escriben los textos que lee el usuario y se vinculan las imágenes importantes (las que aportan contenido). También se definen las estructuras, se le da jerarquía al contenido y se vinculan los archivos.
Todo el código HTML se escribe por medio de etiquetas y sus atributos. Las etiquetas son palabras o abreviaturas en ingles encerradas en los signos < (menor) y >(mayor). Cada etiqueta tiene una función por ejemplo:
<h1> encabezado de mayor jerarquía (la h es de header)
<h2> encabezado de menor jerarquía
<p> párrafo
<a> enlace
<strong> negrita (bold)
<img> imagen
La mayoría de las etiquetas se escribe de a pares: una que cierra y otra que abre, encerrando el contenido al que le dan formato. La etiqueta de cierre es igual a la que abre pero se le agrega una / (barra). Por ejemplo:
<h1>Este es un título</h1>
<h2>Este es un subtítulo</h2>
<p>Este es un párrafo</p>
Algunas etiquetas no tienen etiqueta de cierre porque no encierran un contenido como las etiquetas <img>, <br>, <link> y <meta>.
Algunas etiquetas necesitan atributos para completar la información, por ejemplo: la etiqueta <img> necesita el atributo src="" donde se indica la ubicación de la imagen. Quedaría asi: <img src="images/foto.jpg">. La etiqueta <img> en particular, se debe escribir SIEMPRE con otro atributo muy importante para la accesibilidad que es el alt="" en este atributo se describe la imagen y esa descripción la va a ver el usuario al que no le haya cargado la foto por alguna razón o la va a escuchar en un lector de pantalla un usuario con discapacidad visual. Entonces la línea completa queda así: <img src="images/foto.jpg" alt="imagen de tal evento">. En este ejemplo es una etiqueta con dos atributos. La información que va entre comillas se llama valor.
Otras etiquetas no necesariamente tienen que escribirse con atributos, pero podemos agregarles para identificarlas mejor y aplicarles diseño. Por ejemplo si tengo tres párrafos pero sólo a uno quiero cambiarle el diseño, le agrego un atributo class="", quedaría asi:
<p>Esto es un párrafo normal</p>
<p class="destacado">Esto es un párrafo con otro diseño</p>
<p>Esto es otro párrafo normal</p>
Toda página web tiene las siguientes etiquetas como base:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Acá va el título de la página </title>
</head>
<body>
dentro del body va todo lo que ve el usuario
</body>
</html>
La etiqueta DOCTYPE indica la versión de código HTML que estamos usando, en este caso es la versión HTML5. En realidad no lo dice, pero desde la versión HTML5 la etiqueta se redujo a estas dos palabras, antes era un línea bastante más larga con más información.
Todo el código HTML se encierra entre las etiquetas <html>, y siempre hay que marcar dos zonas: el <head> y el <body>.
En el head se escribe información para el navegador, por ejemplo: la etiqueta <meta charset="UTF-8"> define la norma con la que se escriben los caracteres especiales, pero la única que ve el usuario es la etiqueta <title> que se muestra en la pestaña del navegador y es la que se usa para guardar una página en marcadores.
En el body se escribe todo el contenido que ve el usuario: textos, vínculos e imágenes.
El HTML5 agregó a la versión de HTML anterior (la XHTML 1.0) algunas etiquetas que sirven para organizar semánticamente el contenido y son las siguientes: <header> <nav> <section> <article> <aside> y <footer>. Toda página web debería tener marcados por los menos el header, nav, section y footer.
Dentro del código podemos dejar anotaciones que no se verán en el navegador y se escriben asi por ejemplo:<!-- acá empieza el menu principal -->
Los comentarios también sirven para ocultar alguna parte del código, y se usa temporalmente para hacer pruebas sin borrar el código.
A un archivo HTML se le agrega diseño mediante código CSS. Lo mejor es que el contenido y la estructura (HTML) estén perfectamente separados del diseño (CSS) guardándolos en diferentes archivos. De esta manera se optimiza la accesibilidad, la velocidad de carga y se simplifica el desarrollo y mantenimiento del sitio.
