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.

Esquema etiqueta HTML

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 vacias, 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 vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son  <hr><img>, <input><link><meta><param><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 sintaxís de las etiquetas HTML ha sufido 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 erores.

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.


Enero-2019 (V 2.0)
Pág. 1.2
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.