Secciones y líneas generales de un documento HTML5

Introducción

La especificación HTML5 trae consigo una serie de nuevos elementos para los desarrolladores web, permitiéndoles describir la estructura de un documento web con una semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.

Problemas resueltos por HTML5

  1. Elimina la necesidad de usar elementos <div> para definir secciones semánticas sin necesidad de valores específicos para los atributos class.
  2. Facilita la mezcla de varios documentos al establecer que los elementos de seccionado (<article>, <section>, <nav> y <aside>) son siempre subsecciones de su sección ancestra más cercana.
  3. Introduce el elemento <hgroup> que oculta todos los elementos de cabecera excepto el primero de más alto rango.
  4. Permite definir secciones especiales que no forman parte del flujo principal del documento mediante el elemento <aside>.
  5. Introduce tres elementos específicos para secciones relacionadas con el sitio web: <nav> para colecciones de enlaces, <footer> y <header>.

El algoritmo de perfilado de HTML5

En general, HTML5 aporta precisión a las características de seccionado y cabecera, permitiendo que los perfiles de documento sean predecibles y utilizados por el navegador para mejorar la experiencia del usuario.

Definiendo secciones en HTML5

Todo el contenido dentro del elemento <body> forma parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento <body>, los límites de la sección se definen explícita o implícitamente.

Las secciones definidas explícitamente son el contenido definido en las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header> y <nav>.

Cada sección puede tener su propia jerarquía de encabezados. Incluso una sección anidada puede tener un elemento <h1>.

Para más información, consulte también Definiendo cabeceras en HTML5.

<section>
                    <h1>Forest elephants</h1>
                    <section>
                    <h1>Introduction</h1>
                    <p>In this section, we discuss the lesser known forest elephants.</p>
                    </section>
                    <section>
                    <h1>Habitat</h1>
                    <p>Forest elephants do not live in trees but among them.</p>
                    </section>
                    <aside>
                    <p>advertising block
                    </p>
                    </aside>
                    </section>
                    <section>
                    <h1>Savannah elephants</h1>
                    </section>