HTML5 y la correcta estructuración de tags de web semántica.

TiNCHOY2k · #1 (**permalink**) 16/02/2012, 07:55

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>
<section>
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
<section class="section2">
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
<section class="section3">
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
</div>

y con unos asides por ahí muy desordenados.

Generalmente yo trabajo con la siguiente estructura:

Código HTML:

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Web semántica</title>
    </head>
    <body>
        <header>
            <a href="#" target="_self" title="Volver al inicio" id="logo"></a>
            <nav>
                <ul>
                    <li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
                    <li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
                    <li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
                    <li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
                    <li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
                </ul>
            </nav>
        </header>
        
        <section>
            <article>
                <h1>Título del artículo.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </section>
        <aside>
            <!-- Redes sociales y otras shits -->
        </aside>
        <footer>
            <p>Blah blah blah</p>
        </footer>
    </body>
</html>

donde eventualmente varío la posición del aside dependiendo de donde quiera que se muestre.

Ahí les fue... la pregunta del millón
¿Cómo trabajan ustedes el código?

maycolalvarez · #2 (**permalink**) 16/02/2012, 14:43

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?

he aquí un articulo, digno para confundir, incluso la imágen propone un header y footer para cada section

http://www.ondho.com/html5-discusion...cle-y-section/

emprear · #3 (**permalink**) 16/02/2012, 15:41

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

maycolalvarez · #4 (**permalink**) 17/02/2012, 13:44

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

Tedel · #5 (**permalink**) 17/02/2012, 15:04

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.

jujomago · #6 (**permalink**) 17/02/2012, 16:47

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]

referenteweb · #7 (**permalink**) 17/02/2012, 16:49

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

micayael · #8 (**permalink**) 18/02/2012, 11:57

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.

oxcarbazer · #9 (**permalink**) 21/02/2012, 08:40

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<header>
  <nav role="navigation">
   <ul>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
      ....
   </ul>
  </nav>
</header>
<!--TAGS VARIOS DEL CONTENIDO ETC..-->
<footer>
  <nav role="complementary">
   <ul>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
     <li><a href="link.html" title="Link menu">Link menu</a></li>
      ....
   </ul>
  </nav>
</footer>

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..

pkjns · #10 (**permalink**) 22/02/2012, 16:02

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

YeisonSoto · #11 (**permalink**) 23/02/2012, 17:49

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<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
         <link href="Vista/Css/Estilo_Paginas.css" rel="stylesheet" />
    </head>
    <body>
    
    <div id="Div_Contenedor">
        <header>
            <h1>Titulo tu sitio</h1>
        <nav>
            <ul>
                <li>Enlace 1</li>
                <li>Enlace 2</li>
                <li>Enlace 3</li>
                <li>Enlace 4</li>
                <li>Enlace 5</li>
            </ul>
        </nav>
        </header>        
        <section>
            Aquí va todo el contenido de la Web</br>
            <article>
                <h2>Titulo del articulo</h2>    
                <p>Contenido</p>
            </article>
            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>
        </section>
        <footer>
            Pie de pagina, copyright, etc.
        </footer>
        </div>
        </body>
</html>

emprear · #12 (**permalink**) 23/02/2012, 18:06

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

karlos2101 · #13 (**permalink**) 03/03/2012, 17:24

Cita:

Iniciado por pkjns

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

primero que todo ya no se llama así el charset.

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ahora se llama en html5 así.

Código HTML:

<meta charset='utf-8' />

facil.

el header es la cabecera en vez de usar .

Código HTML:

<div id="cajaheader"></div>

se utiliza.

Código HTML:

<header></header>

Código HTML:

<nav></nav>

<nav></nav> va fuera de <header></header>

la estructura y la semántica de html5 seria asi .

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
         <link href="Vista/Css/Estilo_Paginas.css" rel="stylesheet" />
    </head>
    <body>

        <header>
            <h1>Titulo tu sitio</h1>
        </header>     

        <nav>
            <ul>
                <li>Enlace 1</li>
                <li>Enlace 2</li>
                <li>Enlace 3</li>
                <li>Enlace 4</li>
                <li>Enlace 5</li>
            </ul>
        </nav>
   
        <section>
            Aquí va todo el contenido de la Web<br />
            <article>
                <h2>Titulo del articulo</h2>    
                <p>Contenido</p>
            </article>
            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>
        </section>

            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>

        <footer>
            Pie de pagina, copyright, etc.
        </footer>

        </body>
</html>

bueno espero que les haiga sido de ayuda

karlos2101 · #14 (**permalink**) 18/03/2012, 21:44

Cita:

Iniciado por YeisonSoto

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<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
         <link href="Vista/Css/Estilo_Paginas.css" rel="stylesheet" />
    </head>
    <body>
    
    <div id="Div_Contenedor">
        <header>
            <h1>Titulo tu sitio</h1>
        <nav>
            <ul>
                <li>Enlace 1</li>
                <li>Enlace 2</li>
                <li>Enlace 3</li>
                <li>Enlace 4</li>
                <li>Enlace 5</li>
            </ul>
        </nav>
        </header>        
        <section>
            Aquí va todo el contenido de la Web</br>
            <article>
                <h2>Titulo del articulo</h2>    
                <p>Contenido</p>
            </article>
            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>
        </section>
        <footer>
            Pie de pagina, copyright, etc.
        </footer>
        </div>
        </body>
</html>

yo lo pondria en un <aside></aside>.

y el aside va fuera de cualquier etiqueta.

PedroDesing · #15 (**permalink**) 11/06/2012, 11:13

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.

ryugen · #16 (**permalink**) 11/06/2012, 12:16

Es posible incorporar un nav dentro de un header, si ves aquí: http://dochub.io/#html/nav

Cita:

Permitted parent elements Any element that accepts flow content. Note that a <nav> element must not be a descendant of an <address> element.

Puede estar contenido en cualquier etiqueta que acepte contenido flotante y dichas etiquetas son:

Cita:

Flow content

Elements belonging to the flow content category typically contain text or embedded content. They are: <a> , <abbr> , <address> , <article> , <aside> , <audio> , <b> , <bdo> , <blockquote> , <br> , <button> , <canvas> , <cite> , <code> , <command> , <datalist> , <del> , <details> , <dfn> , <div> , <dl> , <em> , <embed> , <fieldset> , <figure> , <footer> , <form> , <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <header> , <hgroup> , <hr> , <i> , <iframe> , <img> , <input> , <ins> , <kbd> , <keygen> , <label> , <map> , <mark> , <math> , <menu> , <meter> , <nav> , <noscript> , <object> , <ol> , <output> , <p> , <pre> , <progress> , <q> , <ruby> , <samp> , <script> , <section> , <select> , <small> , <span> , <strong> , <sub> , <sup> , <svg> , <table> , <textarea> , <time> , <ul> , <var> , <video> , <wbr> and Text.

A few other elements belong to this category, but only if a specific condition is fulfilled:

<area> , if it is a descendant of a <map> element
<link> , if the itemprop attribute is present
<meta> , if the itemprop attribute is present
<style> , if the scoped attribute is present

Fuente: https://developer.mozilla.org/en/HTM...s#flow_content

litovsdai · #17 (**permalink**) 10/09/2012, 12:44

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<header>
        <h1><!-- El titulo de la web --></h1>
        <figure>
            <!-- Aqui va logo -->
            <figcaption><!-- Titulo de nuestro logo --></figcaption>
        </figure>       
</header>
    <nav>
        <!-- Aqui va nuestro menu -->
    </nav>
    
    <section>
        <hgroup><!-- Se utiliza para no quitar relevancia a la etiqueta principal <h1></h1> -->
            <h1><!-- Mi encabezado secundario --></h1>
            <h2><!-- Este es un subencabezado --></h2>
        </hgroup>
        <article>
            <!-- Este es un articulo de contenido -->
            <section>
                <!-- Esta es otra seccion dentro de un articulo -->
            </section>
        </article>
    </section>
    <aside><!-- Barra lateral --></aside>
    <footer>
        <!-- Derechos -->
    </footer>