una sintaxis section secciones pagina etiqueta estructura ejemplos dividir como aside html html5 semantic-markup specifications

sintaxis - ¿Cuándo puedo usar de forma segura el nuevo elemento<main> en HTML5?



section html5 ejemplos (4)

El 16 de diciembre, una especificación de extensión HTML5 para el elemento <main> se envió al W3C bajo algo llamado borrador de editores . El resumen es el siguiente:

Esta especificación es una extensión de la especificación HTML5 [HTML5]. Define un elemento que se utilizará para la identificación del área de contenido principal de un documento. Todo el contenido normativo en la especificación HTML5, a menos que esté específicamente anulado por esta especificación, pretende ser la base de esta especificación.

El elemento principal formaliza la práctica común de identificación de la sección de contenido principal de un documento utilizando los valores de identificación como "contenido" y "principal". También define un elemento HTML que incorpora la semántica y la función del papel de referencia WAI-ARIA [ARIA] = main.

Ejemplo:

<!-- other content --> <main> <h1>Apples</h1> <p>The apple is the pomaceous fruit of the apple tree.</p> <article> <h2>Red Delicious</h2> <p>These bright red apples are the most common found in many supermarkets.</p> <p>... </p> <p>... </p> </article> <article> <h2>Granny Smith</h2> <p>These juicy, green apples make a great filling for apple pies.</p> <p>... </p> <p>... </p> </article> </main> <!-- other content -->

Tiene toda la información allí y creo que debería comenzar a incorporarla a las páginas web. Por lo que sé ahora, la especificación HTML5 es simplemente progresiva, con nuevas características "puestas" en la especificación sin actualización. Supongo que eso significa que los navegadores comenzarán a implementarlo cuando puedan. La pregunta es, ¿cuánto tiempo lleva esto y cómo sé que todos los navegadores lo admiten? ¿Debería construirlo así por ahora y recurrir a un polyfill?

El soporte para <main> será muy parecido al soporte para cualquier otro elemento contenedor nuevo introducido en HTML 5.

  • Nuevos navegadores lo soportarán.
  • Los navegadores más antiguos le permitirán personalizar su estilo para que se display: block y le proporcione los efectos visuales.
  • Las versiones más antiguas de IE no lo admiten en absoluto sin un shim de JavaScript (que funcionará exactamente de la misma manera que los de todos los demás elementos nuevos del contenedor).

El "cuándo" depende del nivel de soporte del navegador que necesita y de lo dispuesto que esté a depender de un calzo JS.

Por ahora, tendría cuidado de usarlo.

Para el futuro de la propuesta, lo que realmente importa es la implementación en los navegadores. En particular, debido a que <main> es un elemento de nivel de bloque propuesto, se requerirá un cambio en la implementación del analizador HTML5 y se le asignará el rol ARIA predeterminado de main.

Sin el rol predeterminado de ARIA, no hay ningún punto para el elemento, aunque usarlo ahora como preparación es un enfoque razonable.

Sin embargo, el cambio del analizador requiere un mínimo de cuidado. Recuerda que la etiqueta </p> es opcional. Ahora suponga que decide que antes de su contenido "principal" desea un párrafo de preámbulo. Podrías escribir:

<!DOCTYPE html> <body> <p> This is my page preamble ... <main> My main content ... <div> A story ... </div> </main> </body>

Si y cuando los navegadores implementan el elemento <main> etiqueta <main> cerrará automáticamente el elemento <p> y en el DOM, el elemento <p> y el elemento <main> serán hermanos entre sí. El elemento <div> y su contenido serán elementos secundarios del elemento <main> . es decir, el DOM será:

HTML +--HEAD +--BODY +--P | +--This is my page preamble ... +--MAIN +--My main content ... +--DIV +--A story

Sin embargo, ahora mismo en los navegadores, <main> convierte en un elemento secundario del elemento <p> , y mientras "Mi contenido principal ..." es un elemento secundario del elemento <main> , el elemento <div> no lo es. Es decir, el DOM tiene esta estructura:

HTML +--HEAD +--BODY +--P | +--This is my page preamble ... | +--MAIN | +--My main content ... +--DIV +--A story

Ahora, por supuesto, esto se evita fácilmente mediante el uso explícito de una etiqueta </p> , en el párrafo del preámbulo, pero es una trampa para los incautos.

Puedes seguir adelante y usarlo, Chrome 26 y Firefox 21 ya lo implementaron.

Al igual que con la introducción de muchos otros elementos HTML5 nuevos, no todos los navegadores reconocen <main> o tienen estilos preestablecidos para ello. Deberá asegurarse de que se muestre como un elemento de nivel de bloque en su CSS:

main {display:block;}

Por el momento, también necesitará usar JavaScript para crear el elemento para versiones anteriores de IE:

<script>document.createElement(''main'');</script>

Por supuesto, si utiliza el html5shiv , <main> ahora se html5shiv directamente.