Unidad 1. Introducción a HTML (II)

1.2. Etiquetas

Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.

La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".

A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...

La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".

Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son  <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.

En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.

Por ejemplo, <a href="https://www.aulaclic.es">Visita aulaClic</a>

Produce este resultado en el navegador:

Visita aulaClic

Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

En general las etiquetas se pueden anidar pero no se pueden 'cruzar'. Estas dos etiquetas <p> y <div>, están anidadas correctamente:

<div>
<p>
Texto del párrafo
</p>
</div>

Es incorrecto cruzarlas así:

<div>
<p>
Texto del párrafo
</div>
</p>

La sintaxis de las etiquetas HTML ha sufrido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en dia, sin embargo, esas páginas siguen funcionando y mostrando el contenido para el que fueron diseñadas.

Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la página correctamente, como si no tuviera esos errores.

Para ver los errores de una página web existen validadores de código HTML, como el de W3C, que nos muestran los errores indicando su grado de gravedad.

 Cursos Informática Gratuitos