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>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>© Kiko Palomares Academy</p>
<p>Contacta a: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>