“El término semántica se refiere al estudio de diversos aspectos del significado, sentido o interpretación de signos lingüísticos como símbolos, palabras, expresiones o representaciones formales.” (es.wikipedia.org). Bajo nuestro contexto nosotros queremos darle significado y sentido(una semántica) a las secciones de nuestras páginas web por medio de HTML5. Anteriormente no era posible asignar una semántica a nuestras páginas web y se usaban alternativas por medio de las etiquetas <div> y los atributos “id” además de usar “class”. Si queremos codear una una estructura como la siguiente: 
Lo más común era implementar una variante como la siguiente:
<html>
<head><title>Index</title></head>
<body>
<div id="contenedor"> <!-- Inicio Caja contenedora -->
<div id="cabecera"> <!-- Inicio Caja cabecera -->
</div> <!-- Fin Caja cabecera -->
<div id="areamenu"><!-- Inicio Caja todos elementos Menú -->
<ul id="menu"> <!-- Inicio del menú -->
<li><a href="cursos.html">CURSOS</a></li>
<li><a href="academia.html">ACADEMIA</a></li>
<li><a href="administracion.html">ADMINISTRACIÓN</a></li>
</ul> <!-- Fin elementos del menú -->
</div> <!-- Fin Caja Menú -->
<div id="contenido"> <!-- Inicio Caja Contenido -->
</div> <!-- Fin Caja Contenido -->
<div id="pie"> <!-- Inicio Caja Pie -->
</div> <!-- Fin Caja Pie -->
</div> <!-- Fin Caja contenedora -->
</body>
</html>
Si estábamos acostumbrados a codear y organizar las secciones de nuestras páginas de la forma “clásica” usando el atributo “id” o alguno otro entonces puede ser algo confuso adaptarse al uso de la semántica de HTML5 especialmente si no somos organizados con nuestro código y no tratamos de ser descriptivos con lo que estamos haciendo. El objetivo del código anterior fue darle una aproximación al significado para migrar a las etiquetas de HTML5.
Empecemos usando el sentido común, la etiqueta <header> y la etiqueta **<footer >**que son el encabezado y el pie de la página, entonces rápidamente podemos actualizar el código por partes de la siguiente forma:
<html>
<head>
<title>Index</title>
<meta charset="iso-8859-1"/>
</head>
<body>
<div id="contenedor"> <!-- Inicio Caja contenedora -->
<header> <!-- Inicio Caja cabecera, sustituimos <div id="cabecera"> -->
</header> <!-- Fin Caja cabecera, sustituimos </div> por la etiqueta de cierre </header> -->
<!-- TODO -->
<footer> <!-- Inicio Caja Pie, sustituimos <div id="pie"> -->
</footer> <!-- Fin Caja Pie, sustituimos </div> por la etiqueta de cierre </footer> -->
</div> <!-- Fin Caja contenedora -->
</body>
</html>
Para sustituir el área de menú y el contenido tenemos que prestar más atención. Empecemos por el contenido. De forma explicita podemos usar la etiqueta <section> y también se podría usar <aside> todo esto depende de las necesidades que tengamos. En ocasiones <aside> se usa para dar indicaciones, información especifica, publicidad con respecto al tema principal. Para generalizar vamos a suponer que tenemos una sección con el contenido relacionando entre sí mismo:
<html>
<head>
<title>Index</title>
<meta charset="iso-8859-1"/>
</head>
<body>
<div id="contenedor"> <!-- Inicio Caja contenedora -->
<header> <!-- Inicio Caja cabecera, sustituimos <div id="cabecera"> -->
</header> <!-- Fin Caja cabecera, sustituimos </div> por la etiqueta de cierre </header> -->
<section> <!-- Inicio Caja Contenido, sustituimos <div id="contenido"> -->
</section> <!-- Fin Caja Contenido, cambiamos la etiqueta de cierre -->
<footer> <!-- Inicio Caja Pie, sustituimos <div id="pie"> -->
</footer> <!-- Fin Caja Pie, sustituimos </div> por la etiqueta de cierre </footer> -->
</div> <!-- Fin Caja contenedora -->
</body>
</html>
Pongamos atención a esta parte:
<div id="areamenu"><!-- Inicio Caja todos elementos Menú -->
<ul id="menu"> <!-- Inicio del menú -->
<li><a href="cursos.html">CURSOS</a></li>
<li><a href="academia.html">ACADEMIA</a></li>
<li><a href="administracion.html">ADMINISTRACIÓN</a></li>
</ul> <!-- Fin elementos del menú -->
</div> <!-- Fin Caja Menú -->
Lo primero que se me vendría a la mente sería usar la etiqueta <nav> y posteriormente sustituir id por class para su uso con css. Esto sería buena idea si nuestros links no estuvieran vinculados a páginas externas por ejemplo:
<nav>
<!-- Inicio Caja todos elementos Menú -->
<ul id="menu"> <!-- Inicio del menú -->
<li><a href="#">CURSOS</a></li>
<li><a href="#"">ACADEMIA</a></li>
<li><a href="#">ADMINISTRACIÓN</a></li>
</ul> <!-- Fin elementos del menú -->
</nav> <!-- Fin Caja Menú -->
Sin embargo nuestros links para este ejemplo están vinculados a páginas externas y no forman parte de la navegación principal del sitio. Lo mejor sería incluirlos en la etiqueta <header>
<header> <!-- Inicio Caja cabecera, sustituimos <div id="cabecera"> -->
<ul class="menu"> <!-- Inicio del menú -->
<li><a href="#">CURSOS</a></li>
<li><a href="#"">ACADEMIA</a></li>
<li><a href="#">ADMINISTRACIÓN</a></li>
</ul> <!-- Fin elementos del menú -->
</header> <!-- Fin Caja cabecera, sustituimos </div> por la etiqueta de cierre </header> -->
Todo el código quedaría de la siguiente manera:
<!DOCTYPE html> <!-- Indicamos que estamos usando html -->
<html>
<head>
<title>Index</title>
<meta charset="iso-8859-1"/>
</head>
<body>
<header> <!-- Inicio Caja cabecera, sustituimos <div id="cabecera"> -->
<ul class="menu"> <!-- Inicio del menú -->
<li><a href="cursos.html">CURSOS</a></li>
<li><a href="academia.html">ACADEMIA</a></li>
<li><a href="administracion.html">ADMINISTRACIÓN</a></li>
</ul> <!-- Fin elementos del menú -->
</header> <!-- Fin Caja cabecera, sustituimos </div> por la etiqueta de cierre </header> -->
<section> <!-- Inicio Caja Contenido, sustituimos <div id="contenido"> -->
</section> <!-- Fin Caja Contenido, cambiamos la etiqueta de cierre -->
<footer> <!-- Inicio Caja Pie, sustituimos <div id="pie"> -->
</footer> <!-- Fin Caja Pie, sustituimos </div> por la etiqueta de cierre </footer> -->
</body>
</html>```
Curso de Frontend Developer 2019
