Las etiquetas semánticas en HTML indican el significado y propósito de un elemento, a diferencia de las etiquetas de formato que especifican cómo se mostrará. Algunas etiquetas semánticas comunes son <p> para párrafos, <strong> y <em> para negrita y cursiva, <h1> y <h2> para títulos, <a> para enlaces, <address> para contacto, y <ol> y <ul> para listas ordenadas y no ordenadas, respectivamente.

1. etiquetas semánticas

2. ¿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.

3. ¿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.

4. 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>.

5. 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.

6. 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.

7. 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:

8. 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>.

9. 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.

10. 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.

11. 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.