4.9_Semantica.md

⏴ Volver al índice

Semántica

Ver la clase en vídeo

---

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>.

<section>
    <h1>Noticias</h1>
    <p>Esta es la sección de noticias...</p>
</section>

<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.

    <article>
        <h1>¿Que es HTML?</h1>
        <p>HTML es un lenguaje de marcado usado en las páginas web...</p>
    </article>
  

¿<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.

<article>
    <header>
        <h1>¿Que es HTML?</h1>
        <p>Lenguaje de marcado:</p>
    </header>
    <p>HTML es un lenguaje de marcado usado en las páginas web...</p>
</article>

<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.

<footer>
    <p>&copy Kiko Palomares</p>
    <p>Contacta a: <a href="mailto:info@kikopalomares.com">
    info@kikopalomares.com</a>.</p>
</footer>

<nav>

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

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a>
</nav>

<aside>

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

<p>He usado HTML para crear muchas páginas webs que he vendido</p>

<aside>
    <h4>HTML</h4>
    <p>HTML es un lenguaje de marcado usado en las páginas webs.</p>
</aside>

<figure> y <figcaption>

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

<figure>
    <img src="https://kikopalomares.com/kikopalomares.jpg" alt="Kiko Palomares">
    <figcaption>Imagen de Kiko Palomares</figcaption>
</figure>

---