En la actualidad, los documentos HTML suelen estructurarse mediante elementos div. A continuación, el formato y la posición de estos contenedores suele hacerse mediante CSS. Por supuesto, este enfoque es inútil para programas como los lectores de pantalla, ya que no pueden reconocer el significado de determinados contenidos. Los nuevos elementos de estructuración pretenden cambiar esta situación.
Dos de los nuevos elementos más importantes son la sección y el artículo, en los que se centra este tutorial.
Etiquetado de artículos
Los textos (entradas de foros, artículos de periódicos, etc.) pueden etiquetarse como artículos utilizando el elemento artículo. El siguiente ejemplo muestra la definición de un artículo típico.
<article> <h1>Creación de aplicaciones web (parte 09): jQuery mobile (1)</h1> <p>jQuery es sin duda uno de los frameworks de JavaScript más conocidos. Es por ello que jQuery ya se utiliza miles de veces en sitios web "clásicos" ...</p> </article>.
Gracias al elemento artículo, puedes estructurar tu contenido semánticamente.
Un blog es un buen ejemplo de cómo puede quedar esto.
<articulo> <header> <h1>Creando aplicaciones web (parte 09): jQuery mobile (1)</h1> <p>Publicado el: <time pubdate="pubdate">24/05/2014</time></p> </header> <p>jQuery es sin duda uno de los frameworks de JavaScript más conocidos. Es por ello que jQuery se utiliza ya miles de veces en páginas web "clásicas"...</p> <p><small>Copyright by PSD-Tutorials.de</small></p> </footer> </article>.
En este ejemplo, el elemento artículo está dividido en las típicas zonas de cabecera, principal y pie de página. Y tal división se encuentra muy a menudo en los blogs.
Creación de secciones
Continuamos con el elemento section. El elemento section divide la página en diferentes secciones. Éstas pueden ser secciones, capítulos, pestañas o similares. Por ejemplo, las secciones pueden utilizarse para separar lógicamente áreas como la introducción y las últimas noticias.sección se utiliza para subdividir el contenido según aspectos relacionados con el contenido real. Volveré sobre la diferencia entre section y div al final de este tutorial.
El siguiente ejemplo muestra una estructura típica de blog. Sin embargo, esta estructura también contiene algo que es realmente necesario en muchos blogs, a saber, una sección de comentarios. Esta área de comentarios se define dentro de un elemento section. Los comentarios individuales dentro del área de sección están cada uno encerrado en un elemento article.
<articulo> <header> <h1>Creando aplicaciones web (parte 09): jQuery mobile (1)</h1> <p>Publicado el: <time pubdate="pubdate">24/05/2014</time></p> </header> <p>jQuery es sin duda uno de los frameworks de JavaScript más conocidos. Como resultado, jQuery ya se utiliza miles de veces en sitios web "clásicos"...</p> <section> <h2>Comentarios</h2> <article> <header> <h3>Comentarios de: Newsfriend</h3> <p><time pubdate datetime="2024-10-05T20:10-07:00">Hace una hora</time></p> </header> <p>¡Gracias por el tutorial!</p> </article> <article> <header> <h3>Comentarios de: Becker <p><time pubdate datetime="2024-10-05T20:10-07:00">Hace dos horas</time></p> </header> <p>¡Genial! Eso me ayuda.</p> </artículo> </sección> </artículo>
Una vez más, me gustaría señalar que, por supuesto, voy a entrar en más detalles acerca de los elementos utilizados aquí, tales como cabecera, pie de página, etc. En este punto, sólo esto: estos elementos se pueden utilizar para dividir el contenido en áreas de encabezado y pie de página, lo que permite una mayor estructuración lógica de los documentos.
Otro ejemplo ilustrará mejor la combinación de los elementos artículo y sección. El elemento section puede utilizarse para dividir un artículo en áreas de contenido lógicas, cada una con sus propios encabezados.
<article> <h1>Desarrollo de aplicaciones</h1> <p>Aquí puedes descubrir cómo crear aplicaciones web.</p> <section> <h2>Creación de aplicaciones web (parte 09): jQuery mobile (1)</h2> <p>jQuery es, sin duda, uno de los frameworks de JavaScript más conocidos.</p> </section> <section> <h2>Creación de aplicaciones web (parte 08): El inicio rápido a jQuery</h2> <p>JavaScript es algo muy bueno para los sitios web, después de todo, se puede utilizar para hacer todo tipo de cosas interesantes.</p> </section> </article>
También es posible definir elementos de artículo dentro de un elemento de sección. Un ejemplo típico de esto sería una sección de comentarios, como ya se ha mostrado. Sin embargo, también es posible subdividir la sección en los temas tratados en el blog.
He aquí otro ejemplo:
<sección> <h1>Desarrollo de aplicaciones</h1> <artículo> <h2>Creación de aplicaciones web (parte 09): jQuery mobile (1)</h2> <p>jQuery es, sin duda, uno de los frameworks de JavaScript más conocidos.</p> </article> <article> <h2>Creando aplicaciones web (parte 08): El inicio rápido a jQuery</h2> <p>JavaScript es algo muy bueno para los sitios web, después de todo, se puede utilizar para hacer todo tipo de cosas interesantes.</p> </articulo> </section>
Un elemento section también puede contener otros elementos section. Por lo tanto, el anidamiento está permitido. He aquí otro ejemplo:
<section> <h1>PSD-Tutorials.de</h1> <section> <h2>Bienvenidos</h2> <p>Estamos deseando...</p> </section> <section> <h2>Tutoriales</h2> <P>Aquí tienes nuestros últimos tutoriales...</p> </section> <aside> <p>Contacto</p> </aside> </section> <footer> <p>(c) 2014 PSD-Tutorials.de</p> </footer>
Este anidamiento de secciones da como resultado la siguiente estructura:
1. PSD-Tutorials.de
1.1 Bienvenido
1.2 Tutoriales
1.3 Contacto
- (c) 2014 PSD-Tutorials.de
Por lo tanto, esta estructuración también es posible.
La diferencia entre div, artículo y sección
Hay que reconocer que no es fácil entender la distinción entre div , artículo y sección. De hecho, el elemento article se definió principalmente para estructurar entradas de blog. El elemento section está en realidad un nivel por debajo de article. Además, siempre debe definirse un encabezado dentro del elemento section. Incluso si no se define ningún encabezado, al menos teóricamente debería ser posible especificar un encabezado dentro del elemento en cuestión.
Por supuesto, los elementos div tampoco están mal vistos en HTML5, pero deben seguir utilizándose. Siempre son interesantes, por ejemplo, cuando se trata de resumir elementos.
Por último, nos gustaría señalar una vez más los efectos visuales de los elementos presentados hasta ahora. En realidad se necesita CSS para el formato correspondiente. El uso normal de los elementos mostrados no tiene ningún efecto en el navegador. Aquí sólo se estructura el contenido semánticamente. Todo lo que tiene que ver con la apariencia visual se controla a través de hojas de estilo.
