Elementos semánticos HTML5
Elementos semánticos HTML5
La semántica es el estudio de los significados de las palabras y frases en un idioma.
Elementos semánticos = elementos con un significado.
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.
Ejemplos de elementos no semánticos : <div> y <span>: no dice nada sobre su contenido.
Ejemplos de elementos semánticos : <form>, <table> y <article>: define claramente su contenido.
Soporte del navegador
| Yes | Yes | Yes | Yes | Yes |
Los elementos semánticos HTML5 son compatibles con todos los navegadores modernos.
Además, puedes "enseñar" a navegadores más antiguos cómo manejar "elementos desconocidos".
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 navegación, encabezado y pie de página.
para indicar navegación, encabezado y pie de página.
HTML5 ofrece nuevos elementos semánticos para definir diferentes partes de una página web:
- <artículo>
- <aside>
- <detalles>
- <figcaption>
- <figura>
- <pie de página>
- <encabezado>
- <main>
- <marca>
- <nav>
- <sección>
- <resumen>
- <tiempo>
Elemento HTML5 <sección>
El elemento <section> define una sección en un documento.
De acuerdo con la documentación HTML5 del W3C: "Una sección es una agrupación temática de contenido, generalmente con un encabezado".
Una página de inicio normalmente se puede dividir en secciones para la 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>
Elemento HTML5 <artículo>
El elemento <article> especifica contenido independiente y autónomo.
Un artículo debería tener sentido por sí mismo, y debería ser posible leerlo independientemente del resto del sitio web.
Ejemplos de dónde se puede usar un elemento <article>:
- Publicación 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>
¿Anidando <artículo> en <sección> o viceversa?
El elemento <article> especifica contenido independiente y autónomo.
El elemento <section> define la sección en un documento.
¿Podemos usar las definiciones para decidir cómo anidar esos elementos? ¡No podemos!
Por lo tanto, en Internet, encontrará páginas HTML con elementos <section> que contienen elementos <article> y elementos <article> que contienen elementos <sections>.
También encontrará páginas con elementos <section> que contienen elementos <section> y elementos <article> que contienen elementos <article>.
Ejemplo para un periódico: los artículos deportivos en la sección deportiva , pueden tener una sección técnica en cada artículo .
Elemento HTML5 <encabezado>
El elemento <header> especifica un encabezado para un documento o sección.
El elemento <header> se debe usar como un contenedor para contenido introductorio.
Puede tener varios elementos <header> en un documento.
El siguiente ejemplo define un encabezado 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>
Elemento HTML5 <footer>
El elemento <footer> especifica un pie de página para un documento o sección.
Un elemento <footer> debe contener información sobre su elemento contenedor.
A footer typically contains the author of the document, copyright information, links to términos de Uso, contact information, etc.
Puede tener varios elementos <footer> en un documento.
Ejemplo
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Elemento HTML5 <nav>
El elemento <nav> define un conjunto de enlaces de navegación.
Tenga en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento <nav>. El elemento <nav> está destinado solo al bloque principal de enlaces de navegación.
Ejemplo
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Elemento HTML5 <aside>
El elemento <aside> define algún contenido aparte del contenido en el que está ubicado (como una barra lateral).
El contenido a un lado debe estar relacionado con el contenido circundante.
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>
Elementos HTML5 <figura> y <figcaption>
El propósito de una leyenda de figura es agregar una explicación visual a una imagen.
En HTML5, una imagen y un título se pueden agrupar en un elemento <figure> :
Ejemplo
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304"height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
El elemento <img> define la imagen, el elemento <figcaption> define el título.
¿Por qué los elementos semánticos?
Con HTML4, los desarrolladores usaron sus propios nombres de identificación / clase para elementos de estilo: encabezado, superior, inferior, pie de página, menú, navegación, principal, contenedor, contenido, artículo, barra lateral, topnav, etc.
Esto imposibilitó que los motores de búsqueda identificaran el contenido correcto de la página web.
Con los nuevos elementos HTML5 (<encabezado> <pie de página> <nav> <sección> <artículo>), esto será más fácil.
Según el W3C, una Web Semántica: "Permite que los datos se compartan y reutilicen entre aplicaciones, empresas y comunidades".
Elementos semánticos en HTML5
A continuación se muestra una lista alfabética de los nuevos elementos semánticos en HTML5.
| Tag | Description |
|---|---|
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...