Foros del web, comunidad de entusiastas web

TiNCHOY2k · 16/02/2012, 06: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 · 16/02/2012, 13: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 · 16/02/2012, 14: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 · 17/02/2012, 12: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 · 17/02/2012, 14: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 · 17/02/2012, 15: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 · 17/02/2012, 15: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 · 18/02/2012, 10: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 · 21/02/2012, 07: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 originalCopiar<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 · 22/02/2012, 15: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 · 23/02/2012, 16: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 originalCopiar<!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 · 23/02/2012, 17: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 · 03/03/2012, 16: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 · 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 originalCopiar<!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.

16/02/2012, 06:55	#1 (permalink)
TiNCHOY2k Mensajes: 20 Karma: 312 Ubicación: Santiago	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> <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?

16/02/2012, 13:43	#2 (permalink)
maycolalvarez Colaborador Mensajes: 8.834 Karma: 35660 Ubicación: Caracas	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? 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/ __________________ y Él dijo: *ayúdate* que yo te ayudaré El que busca, encuentra... maycolalvarez.com

16/02/2012, 14:41	#3 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	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 __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R.

17/02/2012, 12:44	#4 (permalink)
maycolalvarez Colaborador Mensajes: 8.834 Karma: 35660 Ubicación: Caracas	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 __________________ y Él dijo: *ayúdate* que yo te ayudaré El que busca, encuentra... maycolalvarez.com

17/02/2012, 14:04	#5 (permalink)
Tedel Mensajes: 1.223 Karma: 7684 Ubicación: Lima	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. __________________ Autor de Heptagrama, una revista que puede hacer mucho por ti. @tedel en Twitter.

17/02/2012, 15:47	#6 (permalink)
jujomago Mensajes: 13 Karma: 188	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]

17/02/2012, 15:49	#7 (permalink)
referenteweb Mensajes: 22 Karma: 180 Ubicación: Chile	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 Última edición por referenteweb; 17/02/2012 a las 17:32

18/02/2012, 10:57	#8 (permalink)
micayael Mensajes: 382 Karma: 574 Ubicación: Paraguay	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.

21/02/2012, 07:40	#9 (permalink)
oxcarbazer Mensajes: 1 Karma: n/a Ubicación: Guayaquil	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 Copiar <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.. Última edición por oxcarbazer; 21/02/2012 a las 08:15

22/02/2012, 15:02	#10 (permalink)
pkjns Mensajes: 2 Karma: n/a Ubicación: Bilbao	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

23/02/2012, 17:06	#12 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	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 __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R.

03/03/2012, 16:24	#13 (permalink)
karlos2101 Mensajes: 23 Karma: n/a	Respuesta: HTML5 y la correcta estructuración de tags de web semántica. 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

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Modo lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado