¿Son inútiles los elementos HTML5 nuevos como <section> y <article>?

Question

No me mates por el momento, estoy pidiendo por pura curiosidad.

Elementos como <section>, <nav>, <article>, <aside> etc parecen completamente inútiles. Claro que hacen que todo tenga su propio pequeño lugar (y seo'd) ... pero es es posible sobreorganizar las cosas. Hay algunos casos en los que las cosas tampoco encajan en ninguna de las categorías. También aumenta el tiempo dedicado a tratar de codificar estas cosas. Simplemente no veo ningún propósito real para mover para agregar estos nuevos elementos.

¿Qué tenemos que ganar nosotros (desarrolladores y personas que ven las páginas web por igual) al agregarlas?

Answer 1

Estos elementos son importantes para cosas como lectores de pantalla para ciegos y lectores de libros electrónicos como Kindle. Les ayuda a saber qué mostrar/leer y cuándo.

Answer 2

leído sobre this article, ya que señala varias ventajas, tales como:

Hay varias ventajas de utilizar estos elementos. Cuando se utiliza en conjunción con el elementos de encabezado (h1 a h6), todos estos proporcionan una forma para marcar secciones anidadas con niveles de título, más allá de los seis niveles posible con las versiones anteriores de HTML.

y

Al identificar el propósito de secciones en la página utilizando específicos elementos de seccionamiento, tecnología de asistencia puede ayudar al usuario a navegar más fácilmente la página. Por ejemplo, pueden omitir fácilmente omitir la sección de navegación o saltar rápidamente de un artículo al siguiente sin la necesidad de que los autores proporcionen enlaces omitidos. Autores también beneficio porque la sustitución de muchos de los divs en el documento con uno de varios elementos distintos puede ayudar a hacer que el código fuente sea más claro y más fácil de autor.

Answer 3

HTML5 estilo CSS es también algo más fácil de leer:

div#header 
div#content .article 
div#content .article h1 
div#content .article h1+h2 
div#footer 

vs

header 
section#content 
section#content article 
section#content article hgroup h1 
section#content article hgroup h2 
footer 

(no usar selector avanzado)

Y como keyboardP dio a entender a través de la cotización es más fácil navegar por una página para visitantes no humanos. Agrega semántica. Pero estoy de acuerdo con usted, que a veces puede ser difícil determinar qué elemento usar section, article o bien viejo div. OMI, esto hace que la semántica sea menos fuerte. Pero veamos qué pasa.

Answer 4

¡Todo se trata de semántica!

pero estoy de acuerdo con usted en que para algunas personas estas nuevas etiquetas pueden parecer sin sentido. Una pregunta frecuente es por qué se eligieron estas etiquetas en particular y ninguna otra, especialmente porque algunas de las etiquetas son muy específicas del blog (artículo, sección, etc.) pero no incluyen otros nombres comúnmente utilizados, como el producto o el contenido. Como puede ver en los comentarios a continuación, ¡es un tema muy debatido!

Así que para el uso de estas nuevas etiquetas que realmente depende de la forma de escribir su margen de beneficio, y no hay manera correcta o incorrecta de cómo hacerlo. Tome listas, por ejemplo, puede utilizarlas para su navegación y no desea que tengan un estilo y también las use en su contenido principal y las necesite con estilo. Usted podría agregar clases adicionales para especificar qué listas son de estilo o puede utilizar su margen de beneficio y de destino estilos de las etiquetas por sí solos:

 
<nav> 
<ul> 
    <li><a href="">Nav item 1</a></li> 
    <li><a href="">Nav item 2</a></li> 
</ul> 
</nav> 
<div> 
<ul> 
    <li><a href="">List item 1</a><li> 
    <li><a href="">List item 1</a></li> 
<ul> 
</div> 

y en el CSS:

 

ul { list-style: bullet } 
nav ul { list-style: none; } 

Answer 5

que Permiten la rúbrica alcance es la beneficio principal de <section> y <article>. Ver http://diveintohtml5.info/semantics.html#header-element.

En pocas palabras, es mucho más fácil marcar un contorno de su documento (que es útil para lectores de pantalla) sin preocuparse por usar <h2> o <h3> o lo que sea (lo cual se complica cuando se incluyen componentes en diferentes lugares en diferentes páginas).

No podrían haber hecho eso con <div> s, porque hay miles de millones de páginas web que ya han usado <div> y encabezados, sin tener necesariamente el alcance del encabezado.

Es cierto que <section> y <hgroup> hubieran sido suficientes para este propósito.

Answer 6

bien, que suena más productivo y fácil de leer uno:

<div id="nav">list of links</div> 
<div id=header> 
<div id=section>content is good 
</div> 
</div> 
<div id=footer>copyright</div> 

vs

<nav>list of links</nav> 
    <header> 
    <section>content is good</section> 
    </header> 
    <footer>copyright</footer> 

Sería mucho más fácil de explorar en busca de sección y de cabecera y de diálogo en medio de DIV depósito de chatarra. También mejora la accesibilidad para ciegos, ya que claramente le diría al lector de la pantalla qué es. Lo mismo con la etiqueta del artículo. Además, mejora la estructura y proporciona más significado a las etiquetas.

Algunos navegadores no soportan estilo CSS en elementos desconocidos y para mí, eso es increíblemente miope.

Answer 7

El beneficio visual de la utilización de las nuevas etiquetas de marcado HTML 5 podría estar oculta a los usuarios, pero los usuarios pueden beneficiarse, sin saberlo, debido a que estas etiquetas pueden les han proporcionado un mejor resultado de la búsqueda. Creo que una vez que HTML5 se convierta en un estándar, el uso de estas etiquetas de marcado será extremadamente importante para sus sitios SEO.

Answer 8

Creo que el gran error de las divisiones semánticas HTML es que el código para hacer que funcionen en el mundo real implica múltiples declaraciones para hacer frente a los navegadores reales que están siendo utilizados por personas reales. Los ejemplos indicados anteriormente no son reales y, en cualquier caso, para leer el código html5, debe recordar que un pie de página es un tipo de div. Simplemente llamándolo div y dándole una ID descriptiva me parece mucho más claro, incluso si nos olvidamos de las declaraciones múltiples que realmente necesitará (realmente, lo hará. Durante varios años). Aquí hay una idea.Cree los atributos IDs div semánticos, como 'title =', etc. - permita que los navegadores y lectores de pantalla modernos usen esta información para identificar secciones, apartados, etc., y el código será más claro. No dejes de llamar a un div a div, porque no puedes instalar nuevos navegadores para todo el planeta.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen 
readers and all browsers know this is a div</div>