5.2 Mechanistic model
6.3.1 Excess relative risks
Las etiquetas semánticas estructurales sirven para definir la estructura de un documento HTML; además sirven para que los motores de búsqueda, o cualquier otro mecanismo automático que lea un sitio web, sepa con exactitud qué partes de su contenido corresponde a cada una de las partes típicas de un sitio. Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, elementos que definen la estructura representados por diversas etiquetas.
2.5.7.1. Doctype
El <!DOCTYPE> es una instrucción para el navegador web informándole qué versión de HTML está hecha la página. El <! DOCTYPE> debe ser lo primero que va en el documento HTML 5, antes de la etiqueta<html>.
HTML5 no se basa en SGML1, y por lo tanto no requiere una referencia a un tipo de
dato de documento, su uso se muestra en la figura II.20.
1 SGML: Estándar de lenguaje de marcado generalizado. Es un sistema para la organización y
Figura II.20. Doctype en HTML5 Fuente: http://www.w3.org/TR/html5/syntax.html
La etiqueta <!DOCTYPE> no tiene una etiqueta de cierre y su declaración <!DOCTYPE> no es sensible a mayúsculas.
Compatibilidad de navegadores
En la figura II.21 se muestra los navegadores que dan soporte a HTML5: Internet Explorer, Firefox, Google Chrome, Opera y Safari.
Figura II.21. Navegadores que soportan la etiqueta <!doctype> Fuente: http://html5test.com/
2.5.7.2. Header
La etiqueta <header> se usa para marcar un grupo de elementos de introducción o de navegación dentro de una sección o documento. Normalmente se usa para incluir los encabezados h1-h6 o hgroup. En la figura II.22 se muestra la sintaxis.
Figura II.22. Etiqueta header
Fuente: http://www.w3.org/TR/html5/syntax.html
Antes de existir la etiqueta estructural header se definía un encabezado como se muestra en la figura II.23.
Figura II.23. Definición de Header antes de Html5 Fuente: http://www.w3.org/TR/html5/syntax.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <header> <h1>Título</h1> </header> <div id=”header”> <h1>Título</h1> </div>
2.5.7.3. Hgroup
La etiqueta <hgroup> se usa para agrupar un conjunto de uno o más elementos de encabezado (<h1>–<h6>). En la figura II.24 se muestra la sintaxis.
Figura II.24. Etiqueta hgroup
Fuente: http://www.w3.org/TR/html5/syntax.html
2.5.7.4. Nav
La etiqueta semántica <nav> está diseñado para colocar la botonera de navegación principal. Se puede colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Antes de HTML5 lo más típico era escribir de la manera que se muestra en la figura II.25.
Figura II.25. Definición nav antes de Html5 Fuente: http://www.w3.org/TR/html5/syntax.html <hgroup> <h1>Nombre de la empresa</h1> <h2>Eslogan de la empresa</h2> </hgroup> <div id=”nav”> <ul> <li><a href=”index.html”>Inicio</li> <li><a href=”foro.html”>Foro</li> </ul> </div>
El nuevo elemento <nav> de Html5 puede sustituir al div con su id; como se muestra en la figura II.26.
Figura II.26. Etiqueta nav
Fuente: http://www.w3.org/TR/html5/syntax.html
2.5.7.5. Section
Se usa para representar un bloque de la página que tiene valor semántico, es decir, que aporta un significado a la página. Por ejemplo en un blog, sería la zona donde están todos los posts. En un video de YouTube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios [23].
2.5.7.6. Article
La etiqueta <article> se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página actual y que podría sindicarse. Por ejemplo: una noticia, un artículo en un blog o un comentario.
Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: <article> sería la etiqueta que contiene la información más relevante, <section> la que contiene información menos relevante, y <div> que contiene información que no aporta significado ninguno.
2.5.7.7. Aside
Es cualquier contenido que no esté relacionado con el objetivo primario de la página va en un <aside>. En unblog, obviamente el <aside> es la barra lateral de información. Se usará por tanto para todos aquellos elementos secundarios, como podrían ser los bloques publicitarios, enlaces externos, citas, un calendario de eventos, etc.
<nav> <ul> <li><a href=”index.html”>Inicio</li> <li><a href=”foro.html”>Foro</li> </ul> </nav>
2.5.7.8. Footer
Es el pie de página y todo lo que lo compone. Se usará por tanto para información acerca del registro en el portal correspondiente, con la típica "letra pequeña" en la que se detallan condiciones de temas expuestos en el contenido principal, etc.
Tener en cuenta que todas las etiquetas semánticas estructurales intentan informar a los navegadores sobre lo que pueden contener esos bloques, no más. Y que el aspecto, la apariencia e incluso la posición dentro de la web eso lo hará una hoja de estilo.
En la figura II.27 se expresa una de las posibles formas de ordenar el documento con las etiquetas de HTML5.
Figura II.27. Estructura de una página con etiquetas semánticas HTML5 Fuente: http://www.desarrolloweb.com/articulos/images/html5/semantica-html.png