elementos semanticos
DESCRIPTION
HTML 5TRANSCRIPT
![Page 1: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/1.jpg)
Es la quinta revisión mayor del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
![Page 2: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/2.jpg)
Un elemento semántico describe su significado tanto para el navegador y el desarrollador.
Ejemplos de elementos no semánticos: < div > y <span>. Le dice nada acerca de su contenido .
Ejemplos de elementos semánticos: <form > , <table> y < img>. Define claramente su contenido
![Page 3: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/3.jpg)
HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:
![Page 4: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/4.jpg)
<article>:Especifica el contenido independiente , autónomo. Un artículo debe tener sentido por sí misma, y debe ser posible leer de forma independiente del resto del sitio web. Ejemplos en los que se puede utilizar un elemento <article> : mensaje Foro
Post de blog
artículo de periódico
![Page 5: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/5.jpg)
![Page 6: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/6.jpg)
Es el elemento que representa el contenido que es relacionado con el contenido que forma el flujo principal textual de un documento.
![Page 7: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/7.jpg)
Especifica detalles adicionales que el usuario pueda ver u ocultar bajo demanda. Se puede utilizar para crear un widget de interactiva que el usuario puede abrir y cerrar. Cualquier tipo de contenido se puede poner dentro de la etiqueta <details> . El contenido de la etiqueta <details> no debe ser visible a menos que el atributo abierta se establece.
![Page 8: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/8.jpg)
![Page 9: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/9.jpg)
El <figcaption> define un título para un elemento <figure> . El <figcaption> puede ser colocado como el primer o el último hijo del elemento <figure>
![Page 10: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/10.jpg)
![Page 11: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/11.jpg)
La etiqueta <figure> especifica el contenido en sí misma, como ilustraciones , diagramas , fotos, listados de código , etc.
![Page 12: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/12.jpg)
La etiqueta < footer > define un pie de página de un documento.
<footer> contiene normalmente : información de autoría
información de copyright
información del contacto
mapa del sitio
![Page 13: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/13.jpg)
![Page 14: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/14.jpg)
La etiqueta <header > representa un contenedor para el contenido de un conjunto de enlaces de navegación . <header > contiene: Uno o más elementos de encabezado ( < h1 > - < h6 > y
< hgroup > )
Un logotipo o icono información de autoría Puede tener varias < header > elementos en un solo documento.
![Page 15: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/15.jpg)
![Page 16: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/16.jpg)
La etiqueta < main> especifica el contenido principal de un documento.
El contenido dentro de la etiqueta < main > debe ser único en el documento. No debe contener ningún contenido que se repite a través de documentos tales como barras laterales, enlaces de navegación , información de copyright, logos del sitio, y formularios de búsqueda.
![Page 17: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/17.jpg)
![Page 18: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/18.jpg)
La etiqueta <mark > define el texto marcado .
Utilice la etiqueta < mark> si quieres resaltar partes de su texto.
![Page 19: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/19.jpg)
La etiqueta < nav > define un conjunto de vínculos de navegación.
El < nav > elemento es sólo para los principales bloques de vínculos de navegación . Los navegadores , tales como lectores de pantalla para usuarios con discapacidad , puedan utilizar este elemento para determinar si se debe omitir la prestación inicial de este contenido.
![Page 20: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/20.jpg)
![Page 21: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/21.jpg)
El <selection> define las secciones de un documento, como capítulos , encabezados, pies de página, o cualquier otra sección del documento.
![Page 22: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/22.jpg)
El <summary > se define en un encabezado visible. En el título se puede hacer clic para ver / ocultar los detalles.
![Page 23: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/23.jpg)
La etiqueta <time> define una fecha / hora legible. Este elemento también puede ser utilizado para codificar las fechas y horas de forma legible por máquina, por lo que los agentes de usuario pueden ofrecer para agregar recordatorios de cumpleaños o eventos programados para el calendario del usuario , y los motores de búsqueda pueden producir resultados de búsqueda más inteligentes.
![Page 24: Elementos semanticos](https://reader033.vdocuments.us/reader033/viewer/2022052413/559e34fa1a28abe75d8b4730/html5/thumbnails/24.jpg)