Todos los ELEMENTOS SEMÁNTICOS de HTML

Elementos semánticos

elementos semánticos = elementos con significado

¿Qué son los elementos semánticos?

Un elemento semántico describe claramente lo que significa tanto para el navegador como para el desarrollador.

Ejemplos de elementos no semánticos:

<div> o <span>

Ejemplos de elementos semánticos:

<form> <table> <article>

Elementos semánticos en HTML

Muchas webs contienen código como: <div id=”nav”> <div id=”header”> <div id=”footer”> para indicar navegación, el encabezado, y el pie de página.

En HTML tenemos etiquetas para indicar todas estas cosas y muchas más:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

<section>

El elemento <section> define una sección del documento. Normalmente lleva un <h1>.

See the Pen HTML | 1.31 - Semántica - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<article>

El elemento <article> define el contenido de un artículo, independiente por sí mismo. Un artículo por sí sólo ha de tener sentido. Debería de poderse leer y entenderlo sin leer el resto de la web.

Ejemplos:

  • Post de un foro
  • Artículo de un blog
  • Noticia

See the Pen HTML | 1.31 - Semántica - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

¿<article> dentro de <section> o al revés?

Un <article> específica contenido completo en sí mismo.

Una <section> define una sección del documento.

En internet encontrarás páginas con <section> con <article> dentro, y <article> con <section> dentro.

Ejemplo: en un periódico, un artículo de deporte estará dentro de la sección de deportes, pero es posible que dentro de cada artículo haya diferentes secciones.

<header>

El <header> especifica el encabezado del documento o de una sección. Debería contener contenido introductorio, y puede contener muchos elementos dentro.

See the Pen HTML | 1.31 - Semántica - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<footer>

El <footer> define el pie de página de un documento o de una sección.

Se suele usar para información de contacto, copyright, enlaces a términos de uso, etc.

See the Pen HTML | 1.31 - Semántica - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<nav>

El <nav> define un grupo de enlaces de navegación. Sólo para enlaces de navegación, no cualquier enlace.

See the Pen HTML | 1.31 - Semántica - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<aside>

El <aside> define contenido a un lado, como una barra lateral. El contenido suele estar relacionado con el contenido principal.

See the Pen HTML | 1.31 - Semántica - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<figure> y <figcaption>

Una imagen con su título se pueden agrupar dentro de <figure>. Poniendo el título en la etiqueta <figcaption>.

See the Pen HTML | 1.31 - Semántica - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.