Una de las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web.
En las versiones anteriores a HTML5 se solía utilizar la etiqueta <div> para realizar las divisiones de una página web, pero actualmente es recomendado utilizar los elementos semánticos ya que describen claramente su propósito.
2. Elementos semánticos HTML5
Una etiqueta semántica describe su significado. Por ejemplo: <header>, <section>, <footer>, <form>, <table>, <article>, <nav>… Ejemplos de elementos no semánticos (no dicen nada sobre su contenido): <div> y <span>.
Muchos sitios web contienen código HTML como: <div class="header"> <div id="nav"> <div id="section"> <div id="aside"> <div id="footer">. Es muy importante cambiar ese código y usar etiquetas semánticas: <header> <nav> <section> <aside> <footer>.
Como se puede observar en el esquema de la siguiente figura, mediante marcadores semánticos se puede diferenciar claramente el contenido que referencia cada etiqueta.
Hay varias ventajas de usar elementos semánticos en HTML:
- Ayuda a los motores de búsqueda y otros dispositivos de usuario a determinar la importancia y el contexto de las páginas web. Es importante para el SEO (optimización en motores de búsqueda).
- Es mucho más fácil de leer.
- Tiene mayor accesibilidad.
2.1. Estructura básica de un documento HTML5
Teniendo en cuenta el esquema básico mostrado en la figura anterior, podríamos partir del siguiente código HTML para estudiar su estructura y comenzar a entender los elementos estructurales y semánticos que se estudian a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
<style>
header{background-color:yellow;} /* Código CSS */
</style>
<script src="script.js"></script>
<script type="text/javascript">
/* Código JS */
</script>
</head>
<body>
<header>
<h1>Título de la WEB</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web.</p>
</article>
</section>
<aside>
<h3>Testimonios</h3>
<p>Me gusta mucho esta página.</p>
</aside>
<footer>
<h4>Redes sociales</h4>
<a href="#">Facebook</a>
<a href="#">Tiwtter</a>
</footer>
</body>
</html>
Ejemplo en CodePen
2.2. Elementos semánticos
| Elemento | Descripción |
<section> | Define secciones de una web. |
<nav> | Especifica una sección que contiene un menú de navegación. |
<article> | Representa un bloque de contenido independiente que podría ser distribuido y reutilizado por separado, como una publicación de blog, un artículo de revista o un comentario. |
<aside> | Define la barra lateral de una página web. |
<h1> <h2> <h3> <h4> <h5> <h6> | Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6, siendo <h1> la cabecera de mayor importancia. Sólo puede existir una etiqueta <h1> en el documento. |
<header> | Determina la cabecera de una web o de un elemento. |
<footer> | Define el pie de página. También se puede utilizar para definir el pie de otros elementos. |
<address> | Especifica una sección que contiene información de contacto. |
<main> | Determina el contenido principal del documento. Solo puede existir un elemento <main> en el documento. |
Las etiquetas <body> <h1> y <main> solo se pueden utilizar una vez por documento HTML, el resto de etiquetas de contenido se pueden usar siempre que sea necesario.
2.3. Ejercicios propuestos
2.3.1. Estructura HTML con elementos semánticos
2.3.2. Test
2.3.3. Crossword
En la sección siguiente estudiaremos las etiquetas de contenido y texto.