La semántica es el estudio de los significados de las palabras y frases en el idioma.
elementos semánticos son elementos con un significado.
HTML semántico es el uso de marcas HTML para reforzar la semántica, o significado, de la información en las páginas web y aplicaciones web en lugar de limitarse a definir su presentación o mirar.
HTML semántico es procesada por los navegadores web tradicionales, así como por muchos otros agentes de usuario. CSS se utiliza para sugerir su presentación a los usuarios humanos.
¿Cuáles son elementos semánticos?
Un elemento semántico describe claramente 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.
Soporte del navegador
| Sí | Sí | Sí | Sí | Sí |
HTML5 elementos semánticos son compatibles con todos los navegadores modernos.
Además, se puede "teach" los navegadores antiguos cómo manejar "unknown elements" .
Leído en HTML5 de compatibilidad con navegadores .
Nuevos elementos semánticos en HTML5
Muchos sitios web contienen código HTML como: <div id="nav"> <div class="header"> <div id="footer">
para indicar la navegación, encabezado y pie de página.
HTML5 ofrece nuevos elementos semánticos para definir diferentes partes de una página web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Element
La <section> elemento define una sección de un documento.
De acuerdo con la documentación HTML5 del W3C: "A section is a thematic grouping of content, typically with a heading."
la página principal de un sitio Web podría dividirse en secciones de introducción, el contenido y la información de contacto.
Ejemplo
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> Inténtalo tú mismo " HTML5 <article> Element
La <article> elemento especifica el contenido independiente, autónomo.
Un artículo debe tener sentido por sí mismo, y debe ser posible leer de forma independiente del resto del sitio web.
Ejemplos de donde un <article> puede utilizarse elemento:
- mensaje del foro
- Entrada en el blog
- Artículo de periódico
Ejemplo
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Inténtalo tú mismo " Elementos semánticos jerarquización
En el estándar HTML 5, la <article> elemento define un bloque completo, autónomo de los elementos relacionados.
La <section> elemento se define como un bloque de elementos relacionados.
Podemos utilizar las definiciones para decidir la forma de elementos nido? ¡No podemos!
En Internet, encontrará páginas HTML con <section> elementos que contienen <article> elementos, y <article> elementos que contienen <sections> elementos.
También encontrará páginas con <section> elementos que contienen <section> elementos, y <article> elementos que contienen <article> elementos.
Periódico: Los deportes articles de deportes de la section , tiene una técnica section en cada article .
HTML5 <header> Element
La <header> elemento especifica una cabecera para un documento o sección.
La <header> elemento debe ser usado como un recipiente para el contenido de introducción.
Puede tener varias <header> elementos en un solo documento.
El ejemplo siguiente define una cabecera para un artículo:
Ejemplo
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Inténtalo tú mismo " HTML5 <footer> Element
La <footer> elemento especifica un pie de página de un documento o sección.
Un <footer> elemento debe contener información sobre su elemento contenedor.
Un pie de página contiene normalmente el autor de la información del documento, los derechos de autor, enlaces a términos de uso, información de contacto, etc.
Puede tener varias <footer> elementos en un solo documento.
Ejemplo
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> Inténtalo tú mismo " HTML5 <nav> Element
La <nav> elemento define un conjunto de enlaces de navegación.
La <nav> elemento está destinado a grandes bloques de enlaces de navegación. Sin embargo, no todos los enlaces en un documento deben estar dentro de un <nav> elemento!
Ejemplo
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Inténtalo tú mismo " HTML5 <aside> Element
La <aside> elemento define un cierto contenido, aparte de los contenidos que se coloca en (like a sidebar) .
El contenido de un lado debe estar relacionado con el contenido de los alrededores.
Ejemplo
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> Inténtalo tú mismo " HTML5 <figure> y <figcaption> Elementos
En los libros y periódicos, es común tener subtítulos con imágenes.
El propósito de una leyenda es añadir una explicación visual de una imagen.
Con HTML5, imágenes y leyendas se pueden agrupar en <figure> elementos:
Ejemplo
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> Inténtalo tú mismo " La <img> elemento define la imagen, la <figcaption> elemento define el título.
¿Por qué HTML5 semántico Elementos?
Con HTML 4, los desarrolladores utilizaron su propio favorito nombres de atributos a los elementos de página de estilo:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Esto hizo imposible que los motores de búsqueda para identificar el contenido de la página web correcta.
Con elementos HTML5 como: <header> <footer> <nav> <section> <article> , esto será más fácil.
Según el W3C, una Web Semántica:
"Permite que los datos sean compartidos y reutilizados en todas las aplicaciones, las empresas y las comunidades."
consideraciones
En los casos en que un documento requiere la semántica más precisos que los expresados en HTML solo, fragmentos del documento puede estar encerrado dentro de elementos span o div con nombres de clase significativas tales como <span class = "autor"> y <div class = "factura" >. Cuando estos nombres de clase son también un identificador de fragmento dentro de un esquema o ontología, pueden enlaza con un significado más definido. Microformatos formalizar este enfoque a la semántica en HTML.
Una restricción importante de este enfoque es que tal margen de beneficio basado en la inclusión elemento debe cumplir las condiciones de formación correcta. A medida que estos documentos son ampliamente con estructura de árbol, esto significa que sólo fragmentos equilibradas desde un sub-árbol se pueden marcar de esta manera. Un dispositivo marcador-up cualquier sección arbitraria de HTML requeriría un mecanismo independiente de la estructura de marcado en sí, como XPointer.
Buena HTML semántico también mejora la accesibilidad de los documentos web (ver también las Directrices de Accesibilidad para el Contenido Web). [Cita requerida] Por ejemplo, cuando un lector de pantalla o navegador de audio pueden determinar correctamente la estructura de un documento, no será un desperdicio del usuario con discapacidad visual tiempo mediante la lectura de la información repetida o irrelevante cuando se ha marcado correctamente.
Elementos semánticos en HTML5
A continuación se muestra una lista alfabética de los nuevos elementos semánticos en HTML5.
Los enlaces están a nuestra completa HTML5 referencia .
| Etiqueta | Descripción |
|---|---|
| <article> | Define un artículo |
| <aside> | Define el contenido aparte del contenido de la página |
| <details> | Define los detalles adicionales que el usuario pueda ver u ocultar |
| <figcaption> | Define una leyenda para una <figure> elemento |
| <figure> | Especifica el contenido en sí misma, como ilustraciones, diagramas, fotos, listados de código, etc. |
| <footer> | Define un pie de página de un documento o de la sección |
| <header> | Especifica un encabezado de un documento o de la sección |
| <main> | Especifica el contenido principal de un documento |
| <mark> | Define texto marcado / resaltado |
| <nav> | Define enlaces de navegación |
| <section> | Define una sección de un documento |
| <summary> | Define un encabezado visible por un <details> elemento |
| <time> | Define una fecha / hora |