Todos los ELEMENTOS SEMÁNTICOS de HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats