Los elementos HTML

Utilizar correctamente el HTML

El lenguaje HTML es un lenguaje de etiquetas, como su nombre indica: HyperText Markup Language, Lenguaje de Marcado de Etiquetas. Observe también que originalmente el HTML es una aplicación SGML (Standard Generalized Markup Language).

El lenguaje HTML se introduce en un documento de tipo texto, que tiene por extensión .html. El HTML es interpretado por un « agente de usuario », para retomar la terminología oficial (user agent). Estos agentes de usuarios del HTML son los navegadores web la mayor parte de las veces, pero existen otras formas de aplicaciones capaces de interpretar HTML, como los lectores de pantalla de audio, los robots de indexación de los motores de búsqueda, así como los sistemas instalados en los aparatos electrónicos.

El objetivo del HTML es describir la estructura de las páginas web e indicar el contenido semántico de cada elemento que forma parte de estas páginas. El HTML describe el contenido de las páginas web, con ayuda de elementos HTML que están formados de etiquetas. Cada elemento se dedica a la visualización de un tipo de contenido dado. Tiene elementos HTML que muestran títulos, imágenes, tablas, formularios, etc.

Por lo tanto, el HTML es un lenguaje semántico: cada elemento se debe utilizar en el marco de su definición y los agentes de usuario esperan un contenido dado...

Las etiquetas y los contenidos

Cada elemento HTML está formado por varias partes constitutivas.

La primera parte es la etiqueta de apertura. Esta etiqueta empieza con el carácter < y se sigue inmediatamente después por el nombre del elemento. Termina con el carácter >. El elemento que permite insertar un párrafo de texto se llama p, la sintaxis de su etiqueta de apertura es la siguiente: <p>.

La segunda parte afecta a los contenidos textuales. Es decir, los elementos HTML que contienen texto, como los títulos, párrafos, citas, etc. El texto se escribe de manera normal, sin ninguna etiqueta específica.

La mayor parte de los elementos HTML tienen una etiqueta de cierre. La sintaxis retoma el principio de la etiqueta de apertura, pero además con el carácter /, que precede al nombre del elemento. Este carácter indica el final del elemento. Si retomamos nuestro ejemplo de párrafo, a continuación se muestra la etiqueta de cierre: </p>.

Este es un ejemplo completo para el elemento HTML, que inserta un párrafo:

<p>El texto de mi párrafo.</p> 

Es importante observar que algunos elementos HTML sin contenido textual o sin elementos anidados lógicamente no tienen etiqueta de cierre. Tomemos como ejemplo el elemento <hr>, que permite insertar una línea horizontal de separación. No hay contenido textual; por lo tanto, no tenemos etiqueta...

Los atributos de los elementos

Los atributos permiten modificar el comportamiento estándar de los elementos HTML. Los elementos HTML pueden no contener ningún atributo, solo uno y, algunas veces, varios. Algunos atributos son obligatorios y otros opcionales. La mayor parte de los atributos tienen valores, pero no todos. Los atributos que no necesitan valor se califican como booleanos. En todos los casos, los atributos se ubican en la etiqueta de apertura de los elementos.

Tomemos como primer ejemplo el atributo opcional, que permite identificar de manera única un elemento HTML. Se trata del atributo id. Este atributo debe tener un valor entre comillas (no obligatorias, pero es muy aconsejable) y está precedido por el signo =. A continuación se muestra un ejemplo:

<p id="introduccion">El contenido de mi párrafo.</p> 

Tomemos como segundo ejemplo un atributo obligatorio. Para insertar una imagen, utilizamos el elemento <img> y su atributo obligatorio src, que permite indicar la ruta de acceso al origen de la imagen. A continuación se muestra una sintaxis sencilla:

<img src="mi-imagen.jpg"> 

Si un elemento HTML tiene varios atributos, se separan con un espacio simple. A continuación se muestra un ejemplo con el elemento <img>:

<img src="mi-imagen.jpg" alt="El texto alternativo de la imagen"  
title="Título de la imagen"> 

Observe...

La anidación de los elementos

Los elementos HTML permiten estructurar el contenido de sus páginas web. Esta estructuración va de la mano con la anidación de los elementos HTML. Por ejemplo, en un artículo, insertado con el elemento <article>, podemos anidar un elemento de encabezado <header>, uno o varios párrafos <p> y un pie de página <footer>. Entonces, tenemos una jerarquía de los elementos: <header>, <p> y <footer> están anidados en <article>. Estos elementos son los hijos del artículo, que es su padre. Si hay varios hijos <p>, son hermanos.

En los párrafos <p>, podemos perfectamente aplicar un formato semántico con el elemento <strong>, que permite aplicar un marcado de especial énfasis. En este caso, el elemento <strong> es hijo del elemento <p>.

Con estos ejemplos vemos, simplificando, dos tipos de elementos HTML. Los elementos de estructura y los elementos de formato de texto. Esta noción se hereda del HTML 4. En esta recomendación, los elementos HTML estaban tipados en block y en inline. Los elementos de tipo bloque (block) permiten estructurar la página, con elementos como <div>, <p>, <h1>. Por defecto, los navegadores deben mostrar estos elementos en toda la longitud disponible y deben empezar en una nueva línea. Los elementos en línea...

<!-- El texto de mi comentario -->