HTML Semántico

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas y aplicaciones web.

Cuando hablamos de “HTML semántico”, nos referimos a la práctica de utilizar elementos HTML que llevan un significado o transmiten la estructura y el propósito del contenido que encierran.

En otras palabras, en lugar de usar elementos genéricos como <div> o <span> para estructurar tu página web, HTML semántico te anima a usar elementos específicos que describen el tipo de contenido que contienen. Al utilizar elementos semánticos, haces que tu código HTML sea más significativo y comprensible tanto para los humanos como para los motores de búsqueda como Google, Bing, etc.

Aquí tienes algunos ejemplos de elementos HTML semánticos y sus propósitos:

<header>

Representa el contenido introductorio o un contenedor para un conjunto de enlaces de navegación en la parte superior de una página.

<header>
  <h1>Welcome to my site!</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<nav>

Representa una sección de una página que contiene enlaces de navegación.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>

Representa el contenido principal de un documento.

<main>
  <h1>Article Title</h1>
  <article>
    <p>This is the article content.</p>
  </article>
</main>

<article>

Representa una composición independiente en un documento, como una publicación de blog, un artículo de noticias o un comentario.

<article>
  <h2>Article Title</h2>
  <p>This is the article content.</p>
</article>

<section>

Representa una sección independiente de contenido dentro de un documento, como capítulos, pestañas o diferentes partes de una página.

<section>
  <h2>About Me</h2>
  <p>I'm apassionate engineer that creates meaningful applications.</p>
</section>

<aside>

Representa contenido relacionado de forma tangencial al contenido principal, a menudo se muestra en una barra lateral.

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
  </ul>
</aside>

<footer>

Representa el pie de página de un documento o una sección, generalmente contiene información sobre el autor, aviso de derechos de autor o enlaces a documentos relacionados.

<footer>
  <p>© 2023 My Site. All rights reserved.</p>
</footer>

<figure> & <figcaption>

Representa contenido autocontenido, como imágenes, diagramas, ilustraciones o fragmentos de código, que se referencia en el contenido principal.

<figure>
  <img src="imagen.jpg" alt="A blurry image">
  <figcaption>Description of the image.</figcaption>
</figure>

<time>

Representa un período específico o una fecha y hora, como una fecha, hora o duración.

<p>Article published on <time datetime="2023-07-02">July 2nd 2023</time>.</p>

<mark>

Representa texto resaltado o marcado para referencia o énfasis.

<p>This is an example of <mark>highlighted text</mark>.</p>

<blockquote>

Representa una cita o extracto de otro recurso.

<blockquote>
  <p>
    Love is patient, love is kind. It does not envy, 
    it does not boast, it is not proud.
  </p>
  <cite>1 Corinthians 13:4</cite>
</blockquote>

<address>

Representa información de contacto, como una dirección de correo electrónico o postal.

<address>
  <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
  <p>Address: 123 Main Street, City, Country</p>
</address>

<footer>
  <p>© 2023 My Website. All rights reserved.</p>
  <address>
    Contact me at <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

<datalist> & <option>

: Representan una lista de opciones para un elemento de entrada.

<label for="fruit">Choose a fruit:</label>
<input type="text" id="fruits" list="fruit-list">
<datalist id="fruit-list">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
  <option value="Strawberry">
</datalist>

<video>

El elemento <video> se utiliza para incrustar un video. El atributo controls permite mostrar los controles de reproducción estándar.

Documentacion de <video>

<figure>
  <video
    width="500"
    controls
    loop
    src="video-featured.mp4"
  >
    Video no compatible
  </video>
  <figcaption>Video destacado</figcaption>
</figure>