HTML5, estructura básica y elementos semánticos
2. Elementos semánticos HTML5
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.
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.
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
0
En los siguientes puntos se detalla de forma resumida los elementos que componen la estructura básica que se ha planteado en el punto anterior y otros componentes que puede contener una página web.
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> | Determina secciones de contenido. |
<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.
Ejercicio propuesto
Test
¿Cómo indicamos que el documento está bajo el estándar HTML5?
¿Para qué se utiliza la etiqueta title?
¿Cuántas etiquetas article pueden indicarse en un documento?
¿Dónde se suelen incluir los enlaces legales y los derechos de autoría?
En la sección siguiente estudiaremos las etiquetas de contenido y texto.