“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><divid="contenedor"><!-- Inicio Caja contenedora --><divid="cabecera"><!-- Inicio Caja cabecera --></div><!-- Fin Caja cabecera --><divid="areamenu"><!-- Inicio Caja todos elementos Menú --><ulid="menu"><!-- Inicio del menú --><li><ahref="cursos.html">CURSOS</a></li><li><ahref="academia.html">ACADEMIA</a></li><li><ahref="administracion.html">ADMINISTRACIÓN</a></li></ul><!-- Fin elementos del menú --></div><!-- Fin Caja Menú --><divid="contenido"><!-- Inicio Caja Contenido --></div><!-- Fin Caja Contenido --><divid="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><metacharset="iso-8859-1"/></head><body><divid="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><metacharset="iso-8859-1"/></head><body><divid="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:
<divid="areamenu"><!-- Inicio Caja todos elementos Menú --><ulid="menu"><!-- Inicio del menú --><li><ahref="cursos.html">CURSOS</a></li><li><ahref="academia.html">ACADEMIA</a></li><li><ahref="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ú --><ulid="menu"><!-- Inicio del menú --><li><ahref="#">CURSOS</a></li><li><ahref="#"">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"> --><ulclass="menu"><!-- Inicio del menú --><li><ahref="#">CURSOS</a></li><li><ahref="#"">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><metacharset="iso-8859-1"/></head><body><header><!-- Inicio Caja cabecera, sustituimos <div id="cabecera"> --><ulclass="menu"><!-- Inicio del menú --><li><ahref="cursos.html">CURSOS</a></li><li><ahref="academia.html">ACADEMIA</a></li><li><ahref="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>```
