50- Elementos semanticos en html

Son elementos que discriben el significado tanto para el navegador como para el desarrolador

Los elementos semanticos como div, span no dicen nada sobre su contenido

mientras que los elentos semanticos form, table, article definen claramente su contenido

algunos elementos semanticos se pueden usar en html para defenir partes de una página web

ejemplo de algunos elementos semanticos

• article
• aside
• details
• figcaption
• figure
• footer
• time
• sumary
• section
• nav
• main
• mark
• header

...

Section

El elemento section define una seccion del documento

ejemplo de uso

Titulo de la seccion

Aqui va la seccion del articulo referenciado, como puede ser una seccion de una noticia etc

Titulo de la seccion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni fugiatconsequuntur molestias blanditiis repudiandae obcaecati nemo eaque placeat, quas laborum voluptas iusto iure cupiditate maxime? Blanditiis deleniti ipsam quas?

Codigo del ejemplo

<section>
<h1>Titulo de la seccion</h1>
<p>Aqui va la seccion del articulo referenciado, como puede ser una seccion
de una noticia etc</p>

</section>
<section>
<h1>Titulo de la seccion 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni
fugiat consequuntur molestias
blanditiis repudiandae obcaecati nemo eaque placeat, quas laborum voluptas
iusto iure cupiditate maxime?
Blanditiis deleniti ipsam quas?</p>
</section>

---

article

El elemento article define una seccion onde vamos a escribir un articulo

muy identico al elemento section

habra páginas que nos vamos a encontrar el elemento article dentro del elemento section y al reves tambien

Ele elemento head define el encabezado del documento

El elemento footer define el pie de la página

El elemento nav es el diminuitivo de navegacion y normalmente se encuentra en el topo de las páginas web

El elemento aside es el menu lateral que encontramos en muchas páginas web

Elementos figure y figcaption

el elemento figure especifica conteudo autonomo, como fotos, diagramas etc

el elemento figcaption define un titulo para un elemento figure

ejemplo de figure

Fig1. -Flores

ejemplo de codigo

<figure>
<img src="https://cdn.pixabay.com/photo/2017/07/26/06/34/art-2540641__340.png"
alt="Trulli">
<figcaption>Fig1. -Flores</figcaption>
</figure> 

---

Tabla de elementos semanticos

tag	Descripcion
article	Define contenido independiente y autónomo.
aside	Define el contenido aparte del contenido de la página
details	Define detalles adicionales que el usuario puede ver u ocultar
figcaption	Define un título para un elemento <figure>
figure	Define el contenedor de imagenes, diagramas
footer	Define el pie de la pagina
header	Define la cabecera de la página
main	Especifica el contenido principal de un documento.
mark	Define una marca en el documento
nav	Define los links de navegacion
section	Define una seccion del documento
sumary	Define el resume de un documento
time	Define la fecha/hora

---

Ir al indice