|
HTML5 y la correcta estructuración de tags de web semántica. Después de un par de años (creo) sin postear absolutamente nada por acá, haber engordado y subido unos cuantos niveles de Front-End Developer, vengo a plantear un tópico que quizás muchos de nosotros tenemos la duda y quizás por vergüenza o vaya a saber qué, nunca conversamos. Desde que @freddier y @cvander comenzaron a hablar de HTML5y sus beneficios en relación a lo que se viene en la web y una larga lista de etc, pues me puse manos a la obra con el estudio de dicho standard y ya hace un buen rato que lo aplico. En el transcurso de la variedad de desarrollos que he realizado, me he dado cuenta que siempre me surgieron dudas con esto de la web semántica y me he dedicado a buscar respuestas y la verdad es que no se encuentran muchos tópicos en referencia a la estructura de los tags. Algunas de las dudas que me planteo: - ¿Podré repetir el tag <nav></nav>? (ejemplo: en el header y el footer) - ¿Cual es la forma correcta de estructurar el contenido? (a nivel de orden de cajas) La última es como la que más me intriga, porque he visto muchos casos donde se aplica el orden de estructura totalmente distinto al que yo desarrollo, ejemplo: <advertencia>El siguiente código te puede causar diarrea</advertencia> Código HTML: <div>y con unos asides por ahí muy desordenados. Generalmente yo trabajo con la siguiente estructura: Código HTML: <!DOCTYPE HTML>Ahí les fue... la pregunta del millón ¿Cómo trabajan ustedes el código? |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. tampoco soy experto en el tema, y con respecto a las etiquetas semánticas de HTML no las he utilizado aún por razones de compatibilidad, aunque no dudo que en un par de años no se tengan problemas con ello, espero. Más que semántica, el objetivo de cada etiqueta es clave para que incluso los motores de búsqueda (u otros servicios) indexen o puedan entender correctamente el contenido, por ejemplo hace tiempo leí que el objetivo de <nav> era indicar el listado principal de navegación del sitio, por lo que tener 2 listados <nav> carece de sentido, al menos si lo vemos desde el punto de vista de un buscador, al igual de que no pueden (o deben) haber 2 footer. con respecto a <article> y <section> he visto muchas discusiones en línea, algunas acaloradas, en fín, en mi apreciación personal el tag article delimitaría un artículo y section una sección de la web, pero también puede darse el caso de que un artículo (no precisamente tiene que ser de un blog, puede ser un artículo científico o de otra índole, etc.) tenga varias secciones, he aquí el meollo del asunto, ¿quien debe anidar a quien? :-D he aquí un articulo, digno para confundir, incluso la imágen propone un header y footer para cada section :-S http://www.ondho.com/html5-discusion...cle-y-section/ |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Este artículo, que no aclara nada, es, paradojicamente bastante clarificador http://www.ondho.com/html5-discusion...cle-y-section/ Yo por lo pronto, me inclino por <section> <article> ..... </article> </section> Para colmo, a la hora de buscar ejemplos, todos caen en la estructura de un Blog. Saludos |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. sí, blog's hasta en la sopa, es que ejemplo más genérico y simple es difícil de encontrar, incluso para los novatos, el concepto de blog es fácil de asimilar :-D |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Lo correcto sería: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="estilos.css"> <link rel="icon" href="tuicono.png" type="image/png"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> </head> <body> <header> </header> <nav> navega </nav> <section> contenido aquí solo si vas a jalar contenido de otros sitios usas <article>articulo citado o copiado</article> </section> <aside> barra lateral o contenido no relacionado </aside> <footer> pie </footer> </body> </html> ¿Preguntas? ¿No? Bien. :nerd: |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Alguno de uds. vio lo que opina google de html5? html5 en este momento no influye para anda en el SEO y a google no le importa si usas html5 o no, pero esto se va hacer una tendencia y segun el blog de [URL="http://www.google.com/support/forum/p/Webmasters/thread?tid=784642ab38ab5f17&hl=en"]google de webmasters[/URL] , los que decidiran como se usan estas nuevas etiquetas semanticas somos nosotros los desarrolladores frontend, los motores de busqueda se adaptaran a la moda de uso estas etiquetas, si hay mas que desarrolladores que usan article>aside>section (si que seria raro) pero si eso usa la mayoria ese va ser el estándar. Así que nadie tiene la verdad dicha de como se usan estos tags, vayan al [URL="http://www.google.com/support/forum/p/Webmasters?hl=en"]foro de webmasters y lean los posts[/URL] |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Bueno por mi parte yo soy partidario de <article> <section></section> </article> Una de las razones más fuertes es por que la etiqueta article puede incluir una etiqueta header y por su parte section también. Así que se volveria un poco recursivo header dentro otro elemento con otro header, idealmente debes aprovechar la semantica de uno a la vez y no todos al mismo tiempo. Para el tema de la etiqueta nav también he leído bastante que se debe usar solo para la navegación principal de tu sitio, no para secundarias. Finalmente depende de cada programador en el fondo y con que tipo de proyecto esta trabajando. Si quieres como ver la maquetación en variados casos te recomiendo un post de mi blog: http://referenteweb.com/html-5-section-cuando-utilizarlo Saludos |
Muy interesante este hilo. Realmente es a veces confuso el tema de los nuevos tags semánticos. Yo llegue a ver a una persona utilizando <section> dentro de otros <section> y lo primero que pensé es que semanticamente no encontraba diferencia entre hacerlo así y usar divs. Sería bueno proponer a @cvander y @freedier un programa de mejorando la web con este tema. Me parece muy importante para no terminar usando los nuevos tags semánticos sin la semántica real. |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Saludos, con respecto al nav: se pueden poner varios header, footer y nav en tu pagina pero con su correcta semántica, en el caso del nav donde se aplica tanto en header y footer se les asignaría un role[navigation] al nav principal y role[complementary] al nav del footer, asi diferencian ambos navs.
Código HTML:
Ver original y pues con el orden de los bloques yo veo el section como el nuevo div primario, y dentro del section iría texto entonces un article y si van temas o secciones por separado si se relacionan con el contenido va section si no es a si un aside, eso no quiere decir que div no se use mas, también lo usaría pero para maquetar bloques sobrantes.. |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Hola a todos, Como no se hacerlo de otro modo pego la estructura con la que estoy trabajando: <!DOCTYPE HTML> <head> <title>Titulo pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="cajaheader"> </div> <div id="principal"> <header> <nav> <ul> <li><a href="#">enlace 1</a></li> <li><a href="#">enlace 2</a></li> <li><a href="#">enlace 3</a></li> <li><a href="#">enlace 4</a></li> </ul> </nav> </header> <section id="info"> </section> <aside> <h5>Enlaces anteriores</h5> <ul> <li><a href="#"><time>2011-10-20</time> enlace 1</a></li> <li><a href="#"><time>2011-11-20</time> enlace 2</a></li> <li><a href="#"><time>2011-12-25</time> enlace 3</a></li> <li><a href="#"><time>2012-01-10</time> enlace 4</a></li> </ul> </aside> <section> <article> <time>2012-01-16</time> <h3>Titulo del articulo</h3> <h4>Subtitulo</h4> <p>Contenido del articulo </p> </article> <article> <time>2012-01-16</time> <h3>Titulo del articulo</h3> <h4>Subtitulo</h4> <p>Contenido del articulo </p> </article> <article> <time>2012-01-16</time> <h3>titulo del articulo</h3> <h4>Subtitulo</h4> <p>Contenido del articulo </p> </article> </section> </div> <footer> <h6>Pie de página</6> </footer> </body> </html> Con este formato tengo una cabecera y un menu en su interior (header), tres apartados diferenciados por los articulos para el contenido incluidos en la sección, el contenido tangencial o aside, y el pie de pagina. He intentado seguir con pulcritud el estandar HTML5 siguiendo los consejos de un buen profesional (los errores en caso de haberlos no son del maestro, son del alumno, jeje) y he incluido todo lo nuevo prácticamente siguiendo un orden bastante sensato. ¿Que os parece? Dentro de los artículos he incluido aunque aquí no lo muestro, las etiquetas <video> y <audio> para tener el pack completo. Bueno, completo no, me queda <canvas> que lo estoy usando en el menú del header para incorporar unos iconos en su interior pero eso no lo he conseguido, de hecho he puesto un post pidiendo ayuda, aprovecho para el que se anime. La estructura la estoy maquetando con CSS3 aprovechando las nuevas opciones que dan un amplio juego con transiciones, sombras, etc., sin tener que usar ningún programa externo. Por el momento esto es todo, se aceptan sugerencias, pero no se admite maltratar al autor por los posibles fallos cometidos. Soy novato. ;) Salu2 |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Hola amigos, anteriormente ponía en mis diseños <div></div> para casi todo.... Es cierto que ya no es aconsejable usar div con html5?, si quiero poner mi banner como lo debo poner si no es dentro de un div??? En una estructura basi donde iria el banner???
Código HTML:
Ver original |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. los divs los podés usar tranquilamente, si se requiere por supuesto, en cuanto al banner, depende un poco de cual sea su contenido, si es una publicidad externa, adesense, adword, etc, podés ponerla en un aside, si es un logo de tu página, sencillamente en un tag img dentro de <header></header>, si es alguna imagen en referencia directa a parte del contenido, imaginá una foto que complementa a un articulo, pones un tag img dentro de una etiqueta <figure> sAludos |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Cita:
Código HTML: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Código HTML: <meta charset='utf-8' />el header es la cabecera en vez de usar . Código HTML: <div id="cajaheader"></div>Código HTML: <header></header>Código HTML: <nav></nav>la estructura y la semántica de html5 seria asi . Código HTML: <!DOCTYPE html> |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Cita:
y el aside va fuera de cualquier etiqueta. |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Es cierto eso que he leído aqui de que no se debe meter el <nav></nav> dentro del <header/>? Lo he visto en alguna ocasión por ahi. |
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. Es posible incorporar un nav dentro de un header, si ves aquí: http://dochub.io/#html/nav Cita:
Cita:
|
Respuesta: HTML5 y la correcta estructuración de tags de web semántica. LLevo 3 años programando con HTML5, y estoy seguro que esta es la estructura desarrollada cómo standar para los Robots de Google..
Código HTML:
Ver original |
| La zona horaria es GMT -6. Ahora son las 09:11. |
Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.