que me gustaría utilizar algunas semántica [X] etiquetas HTML en lugar de <div> s: <article>, <product>, <footer> etc. Algunos de ellos ya están presentados en la próxima HTML5, sin embargo , no es totalmente compatible.[X] etiquetas personalizadas HTML: Pros y Contras
¿Cuáles son las posibles desventajas que podría enfrentar al renderizar? ¿Usando CSS, JS?
El que recuerdo es: IE6 no puede clonar etiquetas que no conoce.
Al agregar la siguiente corrección de JavaScript, las etiquetas HTML5 personalizadas funcionan en IE. De hecho, funcionan en todos los otros navegadores que he probado. Construí mi sitio web usando HTML5, y aunque no se ve muy bien en IE6 & 7, todavía funciona. Aquí está el código que pone en su cabecera plantilla:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->
El uso de etiquetas HTML5 y le permitirá un control usando CSS debido a su naturaleza semántica. En realidad, es mucho más fácil crear sitios, ya que son más fáciles de entender si usa las etiquetas correctamente.
Usar divs en todas partes está bien, porque si tienen las ID y las clases apropiadas, siguen siendo semánticas, pero con las etiquetas HTML5, puede reconocer la estructura de la página mucho más rápido.
¿Podría describir qué es exactamente lo que no funciona correctamente en IEs con etiquetas personalizadas? – kolypto
IE no dará estilo a los elementos que no reconoce. El javascript ingresa esos valores en el DOM, iirc, por lo que funcionará. – Rob
No es una "solución de Google", el código HTML 5 solo se aloja en un sitio web de Google. –
A menos que esté desarrollando para un conjunto muy limitado de navegadores, esto parece una mala idea. Si funciona en todos los navegadores anteriores, no funcionará bien; Pasarán años hasta que podamos esperar una buena compatibilidad con HTML 5 de todos los navegadores comunes.
Incluso si usa JS para hacer que IE 6 "reconozca" etiquetas HTML5, igual tendrá problemas, ya que IE 6 no permitirá anidar tales etiquetas.
Por otro lado, si su página web no está orientada a la aplicación, sino puramente para su presentación, también podría usar un XML simple antiguo con estilo. Difiere un poco de la forma tradicional de hacer páginas, pero en términos XML no hay etiquetas "viejas" o "nuevas".
Consulte esta página - http://feeds.feedburner.com/blogspot/MKuf (fuente de blog de Google) - como un ejemplo de estilo XML. Las API JS y DOM funcionan igual de bien.
Esto no responde del todo a su pregunta, pero <product> no es semántico en lo que respecta a las computadoras.
Un humano puede leerlo y pensar "Aha, este debe ser un producto, que en el contexto de este sitio web de compras significa algo que puedo comprar, y por lo tanto no significa 'una cantidad obtenida multiplicando cantidades' ya que podría hacer en mathoverflow.com ". Eso es realmente útil para cualquier humano que lea el código, por lo que es semántico en ese sentido.
Pero en lo que se refiere a una computadora que analiza su página como HTML (o un humano viendo su página HTML en un navegador en lugar de leer el código), es una etiqueta desconocida y no tendrá ningún valor predeterminado útil estilo (a diferencia de la etiqueta <p>, que obtiene buenos márgenes para que las cosas sean legibles en pantalla) o comportamiento (a diferencia de la etiqueta <a>, que se puede hacer clic si le da un atributo href).
Las computadoras solo obtienen semántica cuando las personas están de acuerdo con lo que significan las etiquetas, a través de especificaciones como HTML5.
... e incluso si las estiloas, eso deja a las personas que no obtienen las hojas de estilo (p. Ej., Porque usan un lector de braille, un lector de pantalla o una búsqueda motor) en el frío. – Quentin
La pregunta menciona 'clonación', por lo tanto, IE6 no puede diseñar un elemento personalizado (puede) no es realmente la pregunta si la intención es usar JS para clonar elementos personalizados si IE6 no puede gestionar eso (que no sé).
Si la idea es solo diseñar elementos personalizados, entonces cada navegador puede hacerlo. Debido a IE6 necesita espacio de nombres de sus elementos personalizados así < prefijo: personalizado /> y especifique el espacio de nombres en el elemento HTML así < html xmlns: prefix = "http: // domain/path">.
Para que todo esté exactamente correcto en todos los navegadores (y Javascript también recoge elementos personalizados) también debe proporcionar una DTD personalizada, de modo que el espacio de nombres de los elementos personalizados funcione de manera consistente <! DOCTYPE html SYSTEM "http: //domain/path/custom.dtd "> y luego escribe el DTD, que desafortunadamente no es trivial y debe incluir un reemplazo completo para el HTML DTD que reemplaza.
De modo que después de aplicar una DTD personalizada, especificar un espacio de nombre personalizado y aplicar elementos personalizados, se puede diseñar en cualquier navegador < style> prefix \: custom {background: red;} </style>.
Esto funciona de manera consistente en todos los navegadores pero tiene un valor discutible. Permite el uso de marcado significativo consistente con elementos que están claramente delineados por el espacio de nombres y no pone en riesgo la contaminación del diseño por cascada y evita divisiones.
Sin embargo, es un poco un gueto en el desarrollo web que implica complejidad que puede no ser recompensado lo suficiente.
¡Curioso, gracias! Sin embargo, ya he renunciado a la idea :) – kolypto
posible duplicado de [¿Cuándo utilizar etiquetas html personalizadas?] (Http://stackoverflow.com/questions/211394/when-to-use-custom-html-tags) –
esa pregunta es más teórica y la respuesta aceptada lo demuestra. – kolypto