elementos semanticos

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

Upload: antonio-jimenez-alvarez

Post on 09-Jul-2015

99 views

Category:

Education


0 download

DESCRIPTION

HTML 5

TRANSCRIPT

Page 1: Elementos semanticos

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

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

HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:

Page 4: Elementos semanticos

<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
Page 6: Elementos semanticos

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

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
Page 9: Elementos semanticos

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
Page 11: Elementos semanticos

La etiqueta <figure> especifica el contenido en sí misma, como ilustraciones , diagramas , fotos, listados de código , etc.

Page 12: Elementos semanticos

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
Page 14: Elementos semanticos

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
Page 16: Elementos semanticos

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
Page 18: Elementos semanticos

La etiqueta <mark > define el texto marcado .

Utilice la etiqueta < mark> si quieres resaltar partes de su texto.

Page 19: Elementos semanticos

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
Page 21: Elementos semanticos

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

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

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