SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
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

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

Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4iConstruye
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado WebiConstruye
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion GraphicsiConstruye
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrppiConstruye
 
Examen edicion
Examen edicionExamen edicion
Examen edicioniConstruye
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesigniConstruye
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6iConstruye
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto webiConstruye
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la webiConstruye
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptualesiConstruye
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSSiConstruye
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTMLiConstruye
 
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ñoiConstruye
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición MultimediaiConstruye
 
Temario examen
Temario examenTemario examen
Temario exameniConstruye
 

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

PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 

Último (20)

PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 

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.