¿Cómo podemos obtener semántica con HTML 5?

Este es un wiki de la comunidad que hace la pregunta: "¿Qué tan semántica puede obtener nuestro marcado HTML gracias a HTML 5?" A continuación puede encontrar el código fuente de una página HTML 5 de muestra. El objetivo es hacer que una página web accesible, usable y con estilo sea lo más fácil posible, usando la menor cantidad posible de clases e ID.¿Cómo podemos obtener semántica con HTML 5?

Además, ¿cuándo piensa comenzar a implementar HTML 5? ¿Va a esperar más de 10 años hasta que finalice el borrador, o va a ser un "pionero" ahora que el soporte del navegador está creciendo rápidamente?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Site Name &bull; Page Title</title> 
    </head> 
    <body> 
     <nav> 
      <h1><a href="/">Site Name</a></h1> 
      <ul> 
       <li><a href="#">Nav Link</a></li> 
       <li><a href="#">Nav Link</a></li> 
       <li><a href="#">Nav Link</a></li> 
      </ul> 
     </nav> 
     <header> 
      <p>Welcome to the site!</p> 
      <a href="#">Call to action!</a> 
     </header> 
     <section> 
      <aside> 
       <!-- Sidebar --> 
      </aside> 
      <article> 
       <header> 
        <h2>Article Name</h2> 
        <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p> 
       </header> 
       <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p> 
       <figure> 
        <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" /> 
        <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label> 
       </figure> 
       <p>Lorem ipsum dolor...</p> 
      </article> 
     </section> 
     <footer> 
      <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p> 
     </footer> 
    </body> 
</html>

Fuente

2009-06-22 Kerrick

¡Se le olvidó cerrar la etiqueta de su cuerpo al final! –

no lo olvidó, exactamente. la falta de sangría significaba que se había omitido en el bloque de código –

He solucionado los problemas de sangría, ¡gracias por informarme! :-) – Kerrick

No será más de 10 años. Ese período de tiempo es para "finalización final", todos los navegadores admiten todas las partes de la especificación. Se espera que se convierta en candidato a finales de este año, a principios del próximo, y con suerte aprobado para 2011/2.

Lo estoy poniendo en fase en donde puedo, ahora mismo. La cantidad que uso depende de la audiencia, pero dado que el intercambio de IE ha estado cayendo constantemente, lo que no admiten ya no es un asesino, especialmente porque el "shiv HTML5" de John Resig permite que las etiquetas semánticas se reproduzcan incluso en IE6 con js activado.

Lo que es más importante, estoy empezando a cambiar mi forma de pensar en líneas de HTML5, utilizando clases de hoy para lo que se convertirán en etiquetas HTML5 mañana (div class = "nav"). De esa manera, estaré más acostumbrado a pensar en términos HTML5 cuando surja la oportunidad.

Fuente

2009-06-24 20:20:34 Arlen

¡Bueno, esas fechas lo hacen bastante increíble! Creo que tienes la idea correcta cuando se trata de la transición. – Kerrick

Aunque Me llena de felicidad en ver nuevas capacidades, la verdad sigue siendo que mis clientes utilizan IE6 (y navegadores similares). Por mucho que me gustaría ver a todos usando un navegador moderno, el hecho de que no son medios, tengo que trabajar con tecnologías que no requieren que se actualicen.

Fuente

2009-06-22 00:30:13 Sampson

Aunque tus usuarios están en IE6, no significa que puedas ' t escribe el código de arriba. Usando el javascript-hack ordenado, puede suministrar a los usuarios de IE6 el mismo HTML semántico: document.createElement ("header"); Luego puede diseñar su CSS de forma normal. (: – peirix

El principal impulsor para las personas que adoptan HTML 5 sería una mejor ubicación en los buscadores, sin eso, no veo una gran razón para adoptar.

(Tal vez si la gente de alguna manera me podría convencer de que la web podría ser más datos similares y por lo tanto mejoraría la interoperabilidad, entonces yo podría ser un poco convencido, pero que suena un poco demasiado optimista)

Fuente

2009-06-22 00:36:26 cgp

voy usarlo tan pronto como los navegadores lo admitan. Los sitios que hago son principalmente proyectos de hobby visitados principalmente por los usuarios de Firefox. (80% de mi tráfico usa la última versión de FF).

Fuente

2009-06-22 00:37:05 priestc

I'll echo jonothan sampson. Siempre que un número razonable de personas todavía esté utilizando navegadores más antiguos, es difícil hacer ese salto.

Por otro lado, es probable que sea sensato detectar buscadores y enviar una versión que tenga sentido. Dado que las diferencias entre los dos idiomas serán moderadas, probablemente sea factible transformar una página HTML5 en HTML4 con clase y estilos adicionales dependiendo del agente de usuario, quizás con un pequeño servidor xslt. Dicho esto, dudo que sea yo quien invente esa tecnología, aunque la usaría si o cuando esté disponible.

Fuente

2009-06-22 00:45:17 SingleNegationElimination

Mientras la única parte de HTML 5 va a adoptar es las etiquetas semánticas, simple Javascript puede brindar apoyo a los navegadores antiguos: document.createtag ('cabecera'); document.createtag ('pie'); document.createtag ('sección'); document.createtag ('de lado'); document.createtag ('nav'); document.createtag ('artículo'); document.createtag ('figura'); document.createtag ('time'); – Kerrick

Puede aportar mucho a los navegadores que admiten javascript, sí, pero no hace nada para, por ejemplo, lectores RSS o navegadores móviles. De nuevo, espero que alguien más sabio que yo cree una biblioteca para transformar HTML5 rico en información a lo que sea más adecuado para el usuario real agen t. – SingleNegationElimination

Tenga en cuenta que el elemento cite no es apropiado para el nombre de una persona: HTML5 indica "El nombre de una persona no es el título de una obra, incluso si las personas le llaman una pieza de trabajo, y el elemento no debe ser utilizado para marcar los nombres de las personas ". Además, la barra posterior en <meta charset="UTF-8" /> no es necesaria.

Fuente

2009-06-22 11:01:45 Ms2ger

La barra al final no es una mala idea. A simple vista, inmediatamente sabe que no debe esperar una etiqueta final. Además, todos los ejemplos lo utilizan, http://www.w3schools.com/html5/tag_meta.asp – bobobobo

Si escribe HTML de manera seria, estoy bastante seguro de que lo sabrá por el hecho de que es una metaetiqueta Sin embargo, independientemente de cualquier barra posterior. – Ms2ger

Tienes que leer [esto] (http://wiki.whatwg.org/wiki/Cite_element). – Knu

La gente sigue mencionando una solución de JavaScript para navegadores antiguos como ie6, pero ¿qué sucede si no son compatibles con javascript?

Disculpa, no una respuesta, pero más a ????? Como este es el punto, simplemente no entiendo acerca de la semántica html5 y el soporte de IE.

Siempre se puede ir cinturón y tirantes para navegadores antiguos

<nav><div id="nav"> some nav stuff</div></nav>

Pero eso se siente sucio a mí?

Fuente

2012-02-16 23:41:15

¿Cómo podemos obtener semántica con HTML 5?

Respuesta

Cuestiones relacionadas