etiquetas semánticas

¿qué son?

Semántica: Perteneciente o relativo a la significación de las palabras. !Es así de sencillo es entender este tipo de etiquetas del lenguaje HTML: !Aquellas que dan un significado a las partes del documento. Por decirlo de otra forma, estamos ante etiquetas que indican qué es el contenido que contienen, en lugar de cómo se debe formatear al mostrar el documento HTML en un cliente web.

¿para qué?

En HTML5 se han incorporado muchas etiquetas que sirven para indicar qué son y cuál es el significado de los elementos que contienen dentro. !Esas son las etiquetas semánticas, que ganan mucha importancia en el marco del HTML y de la composición de un documento web por ayudar a motores de búsqueda como Google a indexar más correctamente los contenidos de un sitio.

1. Párrafos: la etiqueta <p>

Para separar párrafos de nuestro texto utilizamos la etiqueta <p>. El propio texto de este artículo está encerrado entre etiquetas <p>.

2. Negrita y cursiva: las etiquetas <strong> y <em>

Se trata de etiquetas que nos ayudan a formatear el texto con negrita y cursiva. Para negritas, utilizamos elementos strong y para las cursivas, elementos em, de emphasised, o enfatizado. !En la lengua castellana se usan obligatoriamente las cursivas para marcar palabras extranjeras sin adaptar, pero también pueden interesarnos para dar visibilidad a algunos fragmentos de texto. El uso de las negritas es bastante más evidente: las utilizaremos para resaltar aquellas palabras o frases importantes.

3. Títulos y subtítulos: las etiquetas <h1> y <h2>

Los elemento de cabecera implementan seis niveles de cabeceras de documentos. !Un elemento de cabecera describe brevemente el tema de la sección que introduce.

4. Enlaces: la etiqueta <a> y el atributo href

Los enlaces son aquellas partes del texto de una página web que, al pulsar sobre ellos, nos llevan a otro sitio en Internet. !Para colocar enlaces, utilizaremos la etiqueta <a> y el atributo href, tal y como se muestra en el ejemplo:

5. Contacto y fecha: las etiquetas <address> y <time>

El elemento address es poco intuitivo, ya que no se utiliza para marcar direcciones postales, sino datos de contacto para el documento HTML en el que se inserta. Es decir, no colocaríamos dónde vivimos dentro de la etiqueta <address>, sino que indicaríamos nuestros datos de contacto, como un email, una URL donde dejar comentarios, etc. !No existe un estándar o una forma predefinida para incluir toda esa información, así que probablemente te interesará estructurarla con párrafos dentro de la etiqueta <address>.

6. Listas: las etiquetas <ol> y <ul>

Las listas están compuestas por listas ordenas, no ordenadas y de definición. !ORDENADAS Inicia con la etiqueta <ol> y representa un conjunto de elementos que deben seguir una lógica y orden respecto a un concepto o secuencia de información.

6. Listas: las etiquetas <ol> y <ul>

NO ORDENADAS Inicia con la etiqueta <ul> y representa un conjunto de elementos que no necesitan seguir un orden determinado para poder ser interpretado su contenido.

7. Elementos de lista: la etiqueta <li>

Los elementos de lista determinan la cantidad de frases, palabras o ideas que conforman una lista, se utilizan tanto para listas ordenadas como para listas no ordenadas.