TEMA 7. SECCIONES
Secciones
NOTA:
En HTML 4 / XHTML 1 la única etiqueta para definir agrupaciones de contenido era prácticamente la etiqueta <div>.
Cualquier página de tamaño medio acababa teniendo muchos elementos <div>, en algunos casos para organizar el contenido de la página, pero también para aplicar estilos de carácter decorativo. El código fuente resultaba así difícil de entender y mantener.
La etiqueta div no ha muerto, sigue ahí y sigue significando lo que siempre ha significado: conjunto de elementos. Por lo tanto nuestro deber es usarla como ayuda a la estructura de página: como base para crear el layout de de nuestras páginas, siempre y cuando no exista otra etiqueta de conjunto que represente mejor este papel… En otras palabras, div es la herramienta para unir elementos cuando no podemos asociar significado semántico a este conjunto.
En HTML 5 se mejoró esa situación introduciendo varias etiquetas para definir diferentes tipos de secciones: <article>, <section>, <nav>, <aside>, <header> y <footer> (y también la etiqueta <main>, aunque esta no se considere una etiqueta de sección sino de bloque).
Veamos una comparación entre ambas :
Ejemplo anterior HTML/XHTML
La página del ejemplo anterior se convertiría así en: HTML 5
Al utilizar etiquetas específicas para tipos de contenido específico, se mejora la legibilidad y facilidad de reutilización tanto del código HTML como de las hojas de estilo.
Section: <section>
El uso de section (<section>) es muy parecido al de div pero aportando la carga de significado mínima posible al contenido. Englobando distintos elmentos dentro de una etiqueta <section/> lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento.
La diferencia es sutil pero muy importante: cuando creamos bloques cuyo contenido forma un todo usaremos <section/>, cuando estos bloques responden más a diseño o a necesidades de estructura usaremos <div/>.
Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiqueta semántica.
Funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Por ejemplo, un agente de usuario que represente el documento en voz, podría exponer al usuario el índice de contenido por niveles para navegar rápidamente por las distintas partes.
La etiqueta <section> está pensada para agrupar los apartados del contenido principal del documento. Normalmente, las secciones <section> empiezan con un título (<h1>, <h2>, etc.) que hace referencia al tema tratado en la sección.
Un elemento <section> puede contener elementos <section>. Las secciones interiores se entienden como subsecciones de la sección exterior.
Un elemento <section> puede contener elementos <article> y viceversa.
Las etiquetas <section> y <article> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.
Artículo: <article>
La etiqueta <article> está pensada para agrupar el contenido de la página que forma una unidad en sí misma, tiene significado claro incluso si lo sacamos totalmente de la página. Es decir, lo que estamos diciéndole a los buscadores es que dentro de este article podrá encontrar contenidos únicos con su propio significado.
<section> está diseñado para contenidos dependientes, pero diferenciados
<article> a modo de artículos independientes como en las revistas.
Un elemento <article> puede contener otros elementos <article> que están relacionados con el contenido del <article> que los contiene.
Un elemento <article> puede contener elementos <section> y viceversa.
RECORDAMOS: Las etiquetas <article> y <section> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.
Si la página trata de un único tema y se va a utilizar un único elemento <article>, es preferible utilizar la etiqueta <main>.
Encabezamiento: <header>
La etiqueta <header> está pensada para agrupar el contenido inicial de una página web. Puede contener únicamente los elementos que aparecen en las páginas de un sitio (el logotipo y un menú general, por ejemplo) o incluir también elementos particulares de la página (el título principal <h1> de la página, enlaces de navegación dentro de la página, texto de introducción, por ejemplo).
El elemento <header> puede estar incluido en <body> y entonces se entiende que es el encabezado de la página en su conjunto, pero también se puede incluir en <article>, <section>, <nav> y <aside> y entonces se entiende que es el encabezado del elemento que lo contiene.
La imagen siguiente muestra una página con varios elementos <header>:
Cuerpo: <body>
La etiqueta <body> abarca todo el contenido de la página web que se visualiza en el navegador. Por ello, una página web sólo puede tener un elemento <body>.
Navegación: <nav>
La etiqueta <nav> está pensada para agrupar los enlaces a otras páginas o los enlaces a los apartados de la propia página.
Una página puede contener varios elementos <nav>, aunque no es necesario que todos los grupos de enlaces estén en elementos <nav> (por ejemplo, los enlaces de contacto que se suelen incluir en el elemento <footer> no requieren el uso de <nav>).
La imagen siguiente muestra una página con tres elementos <nav>:
El <nav> de <header> puede contener enlaces globales a otras páginas de sitio web.
El <nav> de <body> puede contener enlaces a las secciones de la página.
El <nav> de <aside> puede contener enlaces a otros sitios webs relacionados con el contenido de la página.
Pie:<footer>
La etiqueta <footer> está pensada para contener información general sobre el documento, información que se suele poner al final del documento: autor, direcciones de contacto, licencia o condiciones de uso, enlaces a otros documentos relacionados, etc.
El elemento <footer> puede estar incluido en <body> y entonces se entiende que es el pie de página de la página en su conjunto, pero también se puede incluir en <article>, <section>, <nav> y <aside> y entonces se entiende que es el pie de página del elemento que lo contiene.
La imagen siguiente muestra una página con varios elementos <footer>:
Dirección:<address>
La etiqueta <address> está pensada para contener información de contacto del autor de la información (dirección de correo, teléfono, etc.), pero no otro tipo de información. Normalmente se incluye en el pie de página <footer> general de <body> o en el pie de página <footer> de un <article>.
https://www.mclibre.org/consultar/htmlcss/html/html-secciones.html