SlideShare una empresa de Scribd logo
etiquetas estructurales
<header> 
El elemento header lo utilizamos para representar un contenido de 
introducción de una pagina web o una sección de la pagina por ejemplo 
un articulo. El elemento header suele tener su propio encabezado y a 
veces algunos metadatos relevantes y de acuerdo al contenido el cual 
hace parte. Básicamente dentro de este elemento es donde colocamos el 
logotipo, los títulos de encabezados, el buscador etc.
<main> 
Este nuevo elemento de HTML5 define el contenido principal o mas 
importante en el documento. Este elemento es único y solo debe haber 
uno por pagina
<nav> 
Utilizamos el elemento nav para marcar una colección de enlaces a 
paginas internas o externas, este elemento nav se utiliza principalmente 
para la navegación principal del sito pero también es una buena opción 
utilizar este elemento para otros conjunto de enlaces como por Ejemplo: 
un blogroll.
en html 
<div class="menu"> 
<ul> 
<li><a href="seccion1.html">ir a sección 1</li> 
<li><a href="seccion2.html">ir a sección 2</li> 
<li><a href="seccion3.html">ir a sección 3</li> 
<li><a href="seccion4.html">ir a sección 4</li> 
</ul> 
</div>
en html5 
<nav> 
<ul> 
<li><a href="seccion1.html">ir a sección 1</li> 
<li><a href="seccion2.html">ir a sección 2</li> 
<li><a href="seccion3.html">ir a sección 3</li> 
<li><a href="seccion4.html">ir a sección 4</li> 
</ul> 
</nav>
<aside> 
Este elemento aside lo utilizamos para representar contenido que es 
tangencialmente relacionado con el contenido alrededor de ella. Ejemplo, 
las barras laterales de las paginas web que a menudo contienen 
explicaciones o contenido secundarios, anuncios informativos del sitio, 
biografías de autores o enlaces relacionados.
<article> 
El elemento de artículo representa un componente de una página que 
consiste en una composición autónoma en un documento, página, 
aplicación, o sitio web con la intención de que pueda ser reutilizado y 
repetido.
<section> 
El elemento <section> representa una sección genérica de un documento, 
una agrupación temática de contenido, también con el elemento section 
agrupamos contenidos relacionado por lo general con su respectivo titulo 
en una etiqueta de encabezado de HTML. 
! 
Utilizamos section para dividir contenido relacionado dentro de un articulo 
Ejemplo: marcar capítulos, especificar secciones en pestañas, citar 
noticias etc.
<footer> 
Utilizamos el elemento footer para representar la información sobre una 
sección tal como autor, información de copyright o enlaces de sitios web 
relacionados. 
! 
Generalmente utilizamos este elemento para el pie de pagina general del 
sitio, pero también se puede utilizar para pie de artículos o secciones del 
sitio web.
Etiquetas estructurales en HTML5

Más contenido relacionado

Similar a Etiquetas estructurales en HTML5

Estructura HTML.pptx para empezar rl mundo de la web
Estructura HTML.pptx para empezar rl mundo de la webEstructura HTML.pptx para empezar rl mundo de la web
Estructura HTML.pptx para empezar rl mundo de la web
HectorSuelza1
 
Codigos HTML KATERIN GONZALEZ ENRIQUEZ,
Codigos  HTML KATERIN GONZALEZ ENRIQUEZ,Codigos  HTML KATERIN GONZALEZ ENRIQUEZ,
Codigos HTML KATERIN GONZALEZ ENRIQUEZ,
andreaenriquez877
 
Html5
Html5Html5
02_Estructura del cuerpo.pptx
02_Estructura del cuerpo.pptx02_Estructura del cuerpo.pptx
02_Estructura del cuerpo.pptx
yendrao
 
Estructura
EstructuraEstructura
Estructura
Abdel Suarez
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
EliAlbertoMendoza1
 
Elementos semanticos
Elementos semanticosElementos semanticos
Elementos semanticos
Antonio Jimenez Alvarez
 
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la WebHtml 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
jcremiro
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
jumarri
 
Las etiquetas estructurales en html5
Las etiquetas estructurales en html5Las etiquetas estructurales en html5
Las etiquetas estructurales en html5
Francisco Javier Arce Anguiano
 
03_Dentro del cuerpo.pptx
03_Dentro del cuerpo.pptx03_Dentro del cuerpo.pptx
03_Dentro del cuerpo.pptx
yendrao
 
Ejemplos paginas html
Ejemplos paginas htmlEjemplos paginas html
Ejemplos paginas html
Robert Rodriguez
 
Html
HtmlHtml
Html
yndiralu
 
Emily
EmilyEmily
Estructura del código HTML5.pptx
Estructura del código HTML5.pptxEstructura del código HTML5.pptx
Estructura del código HTML5.pptx
JuanEduardoAvilaNaje
 
Html5
Html5Html5
Html5
Html5Html5
Slideshare
SlideshareSlideshare
Slideshare
Guillo95
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
Herberto Ramirez
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
HugoDavidGonzalezCab
 

Similar a Etiquetas estructurales en HTML5 (20)

Estructura HTML.pptx para empezar rl mundo de la web
Estructura HTML.pptx para empezar rl mundo de la webEstructura HTML.pptx para empezar rl mundo de la web
Estructura HTML.pptx para empezar rl mundo de la web
 
Codigos HTML KATERIN GONZALEZ ENRIQUEZ,
Codigos  HTML KATERIN GONZALEZ ENRIQUEZ,Codigos  HTML KATERIN GONZALEZ ENRIQUEZ,
Codigos HTML KATERIN GONZALEZ ENRIQUEZ,
 
Html5
Html5Html5
Html5
 
02_Estructura del cuerpo.pptx
02_Estructura del cuerpo.pptx02_Estructura del cuerpo.pptx
02_Estructura del cuerpo.pptx
 
Estructura
EstructuraEstructura
Estructura
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 
Elementos semanticos
Elementos semanticosElementos semanticos
Elementos semanticos
 
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la WebHtml 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
Las etiquetas estructurales en html5
Las etiquetas estructurales en html5Las etiquetas estructurales en html5
Las etiquetas estructurales en html5
 
03_Dentro del cuerpo.pptx
03_Dentro del cuerpo.pptx03_Dentro del cuerpo.pptx
03_Dentro del cuerpo.pptx
 
Ejemplos paginas html
Ejemplos paginas htmlEjemplos paginas html
Ejemplos paginas html
 
Html
HtmlHtml
Html
 
Emily
EmilyEmily
Emily
 
Estructura del código HTML5.pptx
Estructura del código HTML5.pptxEstructura del código HTML5.pptx
Estructura del código HTML5.pptx
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Slideshare
SlideshareSlideshare
Slideshare
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 

Más de iConstruye

Examen taller
Examen tallerExamen taller
Examen taller
iConstruye
 
Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4
iConstruye
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
iConstruye
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion Graphics
iConstruye
 
Examen imagen
Examen imagenExamen imagen
Examen imagen
iConstruye
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrpp
iConstruye
 
Examen edicion
Examen edicionExamen edicion
Examen edicion
iConstruye
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesign
iConstruye
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
iConstruye
 
Filezilla
FilezillaFilezilla
Filezilla
iConstruye
 
Webhost
WebhostWebhost
Webhost
iConstruye
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto web
iConstruye
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la web
iConstruye
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
iConstruye
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
iConstruye
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
iConstruye
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
iConstruye
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
iConstruye
 
Temario examen
Temario examenTemario examen
Temario examen
iConstruye
 
Examen
ExamenExamen
Examen
iConstruye
 

Más de iConstruye (20)

Examen taller
Examen tallerExamen taller
Examen taller
 
Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion Graphics
 
Examen imagen
Examen imagenExamen imagen
Examen imagen
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrpp
 
Examen edicion
Examen edicionExamen edicion
Examen edicion
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesign
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
 
Filezilla
FilezillaFilezilla
Filezilla
 
Webhost
WebhostWebhost
Webhost
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto web
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la web
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
 
Temario examen
Temario examenTemario examen
Temario examen
 
Examen
ExamenExamen
Examen
 

Último

BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
IzaakAzaga
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
FranciscoAlbertoPera
 
Banderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptxBanderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptx
CsarGarcs6
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
ivanna200511
 
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdfLOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
BARBARAAMAYA4
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
slaimenbarakat
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
mantenimientofresita
 
Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.
JoseLuisAvalos11
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
José María
 
Ejemplo de cálculo de losas continuas.pdf
Ejemplo de cálculo de losas continuas.pdfEjemplo de cálculo de losas continuas.pdf
Ejemplo de cálculo de losas continuas.pdf
SofaCrdenas19
 
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
AMADO SALVADOR
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
CarlosDanielAlanocaT1
 
Babilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESABabilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESA
SarahVzquezVsquez
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
jeanlozano33
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
RaquelAntonella2
 
Catálogo Simex 2020.....................................pdf
Catálogo Simex 2020.....................................pdfCatálogo Simex 2020.....................................pdf
Catálogo Simex 2020.....................................pdf
abimaelcornejo98
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
gonzalezdfidelibus
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
AlbertoGarcia461436
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
mantenimientofresita
 

Último (20)

BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
 
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
 
Banderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptxBanderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptx
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
 
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdfLOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
 
Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
 
Ejemplo de cálculo de losas continuas.pdf
Ejemplo de cálculo de losas continuas.pdfEjemplo de cálculo de losas continuas.pdf
Ejemplo de cálculo de losas continuas.pdf
 
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
 
Babilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESABabilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESA
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
 
Catálogo Simex 2020.....................................pdf
Catálogo Simex 2020.....................................pdfCatálogo Simex 2020.....................................pdf
Catálogo Simex 2020.....................................pdf
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
 

Etiquetas estructurales en HTML5

  • 2.
  • 3. <header> El elemento header lo utilizamos para representar un contenido de introducción de una pagina web o una sección de la pagina por ejemplo un articulo. El elemento header suele tener su propio encabezado y a veces algunos metadatos relevantes y de acuerdo al contenido el cual hace parte. Básicamente dentro de este elemento es donde colocamos el logotipo, los títulos de encabezados, el buscador etc.
  • 4.
  • 5. <main> Este nuevo elemento de HTML5 define el contenido principal o mas importante en el documento. Este elemento es único y solo debe haber uno por pagina
  • 6.
  • 7. <nav> Utilizamos el elemento nav para marcar una colección de enlaces a paginas internas o externas, este elemento nav se utiliza principalmente para la navegación principal del sito pero también es una buena opción utilizar este elemento para otros conjunto de enlaces como por Ejemplo: un blogroll.
  • 8.
  • 9. en html <div class="menu"> <ul> <li><a href="seccion1.html">ir a sección 1</li> <li><a href="seccion2.html">ir a sección 2</li> <li><a href="seccion3.html">ir a sección 3</li> <li><a href="seccion4.html">ir a sección 4</li> </ul> </div>
  • 10. en html5 <nav> <ul> <li><a href="seccion1.html">ir a sección 1</li> <li><a href="seccion2.html">ir a sección 2</li> <li><a href="seccion3.html">ir a sección 3</li> <li><a href="seccion4.html">ir a sección 4</li> </ul> </nav>
  • 11. <aside> Este elemento aside lo utilizamos para representar contenido que es tangencialmente relacionado con el contenido alrededor de ella. Ejemplo, las barras laterales de las paginas web que a menudo contienen explicaciones o contenido secundarios, anuncios informativos del sitio, biografías de autores o enlaces relacionados.
  • 12.
  • 13. <article> El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido.
  • 14.
  • 15. <section> El elemento <section> representa una sección genérica de un documento, una agrupación temática de contenido, también con el elemento section agrupamos contenidos relacionado por lo general con su respectivo titulo en una etiqueta de encabezado de HTML. ! Utilizamos section para dividir contenido relacionado dentro de un articulo Ejemplo: marcar capítulos, especificar secciones en pestañas, citar noticias etc.
  • 16.
  • 17. <footer> Utilizamos el elemento footer para representar la información sobre una sección tal como autor, información de copyright o enlaces de sitios web relacionados. ! Generalmente utilizamos este elemento para el pie de pagina general del sitio, pero también se puede utilizar para pie de artículos o secciones del sitio web.