html5 - son - tipos de etiquetas html

¿Los nuevos elementos HTML5 como<sección> y<artículo> no tienen sentido? (8)

¡Todo se trata de semántica!

Pero estoy de acuerdo con usted en que para algunas personas estas nuevas etiquetas pueden parecer inútiles. 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!

Entonces, para usar estas nuevas etiquetas, realmente depende de cómo se escribe el marcado, y no hay una forma correcta o incorrecta de 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. Puede agregar clases adicionales para especificar qué listas tienen un estilo o puede usar su marcado y los estilos de destino solo desde las etiquetas:

y en tu CSS:

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

No me mates todavía, lo 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 posible organizar demasiado 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 (los desarrolladores y las personas que ven las páginas web por igual) al agregarlos?

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

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

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

(no usa el selector avanzado)

Y como keyboardP insinuó a través de la cita, 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 div bueno. OMI, esto hace que la semántica sea menos fuerte. Pero veamos qué pasa.

Creo que el gran error de las divisiones semánticas de 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 utilizan personas reales. Los ejemplos anteriores 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>

El beneficio visual del uso de las nuevas etiquetas de marcado HTML5 puede estar oculto para los usuarios, pero los usuarios pueden beneficiarse involuntariamente porque estas etiquetas pueden haberles proporcionado un mejor resultado de 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.

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.

He leído acerca de este artículo , ya que señala varias ventajas tales como:

El uso de estos elementos presenta varias ventajas. Cuando se utilizan junto con los elementos del encabezado (h1 a h6), todos estos proporcionan una forma de marcar secciones anidadas con niveles de encabezado, más allá de los seis niveles posibles con versiones anteriores de HTML.

Al identificar el propósito de las secciones en la página utilizando elementos de sección específicos, la tecnología de asistencia puede ayudar al usuario a navegar más fácilmente por la página. Por ejemplo, pueden omitir fácilmente 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. Los autores también se benefician porque reemplazar muchos de los divs en el documento con uno de varios elementos distintos puede ayudar a que el código fuente sea más claro y fácil de crear.

Permitir el alcance del encabezado es el principal beneficio de <section> y <article> . Ver http://diveintohtml5.info/semantics.html#header-element .

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

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

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

ok, cuál suena más productivo y fácil de leer:

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

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

Sería mucho más fácil buscar la sección, el encabezado y el diálogo en medio de DIV junkyard. 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 web no son compatibles con el estilo de CSS en elementos desconocidos y para mí, eso es increíblemente miope.