Cómo estructurar adecuadamente una página web en HTML5 (Parte I)

Como siempre, voy tarde. Ha tenido que pasar más de un año, pero aquí estoy, a vueltas con los fundamentos del HTML5.

Esta nueva versión del código es muy potente, ya se han encargado de demostrarlo todos los que quieren dar carpetazo al Flash, incluso la propia Adobe se ha subido al carro de la animación con HTML5 mediante el lanzamiento de Edge. Pero, como con todo, lo mejor es empezar la casa por los cimientos y, para mí, estos son los elementos que configuran la estructura (cuerpo) de la página web.

Así pues, el cuerpo (body) de una página web bien estructurada en HTML5, consta de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Ampliando:

<header>
Etiqueta para encapsular las cabeceras. Lo normal es emplearla para englobar los elementos que componen la cabecera general de la web (logo, lema), pero también puede utilizarse para diferenciar el encabezado de un subapartado de la misma web.

Ejemplo #1: Cabecera general de la página web

<!-- [Cabecera] -->
<header>
<h1>Bienvenidos a mi web</h1> 
</header>

Ejemplo #2: Cabecera de un artículo de la página web (ver <article>)

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Este sería el título del artículo.</h1>
</header>
.
.
. 
</article>

<footer>
Etiqueta para encapsular el pie de página, que al igual que el <header> puede usarse en como pie de toda la web o bien de los artículos o secciones si conviene.

Ejemplo #1: Pie general de la página web

<!-- [Pie de página] -->
<footer>
<p>Información de pie de página: Derechos de autor, año, atribuciones, agradecimientos...</p> 
</footer>

Ejemplo #2: Pie de un artículo de la página web

<!-- [Un artículo] -->
<article>
.
.
.
<!-- [Pie del artículo] -->
<footer>
<p>Enlace para seguir leyendo...</p> 
</footer>
</article>

<address>
Esta etiqueta viene de la mano del <footer> general de la página web. Sirve para encapsular los datos de dirección y/o contacto.

Ejemplo de uso dentro del pie de página

<!-- [Pie de página] -->
<footer> 
<p>Información de pie de página</p> 
<!-- [Dirección y/o contacto] -->
<address> 
<p>Escríbenos a ejemplo@mail</p>
</address>
</footer>

<nav>
Etiqueta para encapsular el apartado dedicado a la navegación interna de la web (el típico menú).

Ejemplo básico

<!-- [Navegación] -->
<nav>
<a href="#">Enlace Interno #1</a>
<a href="#">Enlace Interno #2</a>
<a href="#">Enlace Interno #3</a>
<a href="#">Enlace Interno #4</a>
</nav>

<section>
Etiqueta para encapsular las diferentes secciones de la web. Digamos que agrupa elementos de igual temática. Por ejemplo, apartado de noticias = sección; apartado de descargas = sección…

Ejemplo

<!-- [Una sección compuesta de dos artículos] -->
<section>
<!-- [Un artículo] -->
<article>
.
.
. 
</article>
<!-- [Otro artículo] -->
<article>
.
.
. 
</article>
</section>

<article>
Etiqueta para encapsular los artículos, temas, tópicos, entradas… Lo conveniente es agrupar los artículos de la misma temática en una sección que los englobe.

Ejemplo

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Título del artículo</h1>
</header>
<!-- [Contenido del artículo] -->
<p>Cuerpo del artículo con todo lo que se quiera contar.</p>
<p>Y con todos los párrafos y formateos que hagan falta.</p>
<!-- [Pie del artículo] -->
<footer>
<p>Pie del artículo.</p> 
</footer> 
</article>

<aside>
Etiqueta para encapsular anuncios u otro contenido de la página que no está relacionado con el tema central de la misma.

Ejemplo

<!-- [Apartado para anuncios] -->
<aside>
<h3>Anuncios</h3>
<p>Vendo moto en buen estado.</p>
</aside>

Finalmente, una etiqueta que parece de menor importancia, pero que también ayuda a los navegadores a comprender la estructura de la web:

<hgroup>
Etiqueta para encapsular un grupo de encabezados (h1…h6).

Ejemplo de uso: En la cabecera de un artículo

<!-- [Cabecera del artículo] -->
<header>
<!-- [Grupo de encabezados: Titular + Entradilla] -->
<hgroup>
<h1>Accidente en la N-IV</h1>
<h5>Hasta trece coches se vieron implicados en el accidente sin víctimas mortales. </h5>
</hgroup>
</header>

Ahora bien, si nos partimos el lomo estructurando una web así, a palo seco, un navegador web la entendería perfectamente (tema por el cual esta estructura es interesante en la optimización para buscadores, es decir, en el SEO), pero una persona se aburriría como una ostra, con todos los contenidos en blanco sobre negro y seguidos hacia abajo. Podéis ver un ejemplo al respecto aquí (si os interesa el código, botón derecho del ratón + ver código fuente). Para hacer todo esto más atractivo al usuario, sin que pierda ese appeal de cara a los navegadores, obviamente, hace falta un poco de CSS.

Prometo una segunda parte sobre esto, indispensable. Perdonadme hasta entonces > [Actualización 21/09/2011] Ya la podéis ver: Cómo estructurar adecuadamente una página web en HTML5 (incluyendo CSS)

31 respuestas a «Cómo estructurar adecuadamente una página web en HTML5 (Parte I)»

  1. Interesante! Gracias por la información! Yo necesito ayuda con los nuevos elementos de HTML5 para poder hacer los contenedores, div-nav etc..es que no encuentro un ejemplo que me sirva para verlo bien y quiero hacer un menu secundario y no me sale. Si puedes ayudarme te lo agradecería!

    1. Discúlpame, pero no entiendo bien a qué te refieres con menú secundario. Si me lo explicas, intento ayudarte ;)

      De todas formas, te comento, estas etiquetas de HTML5 sirven más que nada para indicar a los navegadores y a los buscadores qué es cada elemento, vamos, que pretenden ser un estándar para que, por ejemplo, cuando Google rastree un sitio, dé prioridad al contenido dentro de «section» o «article» en lugar de al que vaya en «aside».

      Por otro lado, si necesitas varios menús, basta con etiquetar cada uno como «nav». Pero si lo que quieres es que tengan aspectos distintos, ya hay que emplear la magia del CSS.

  2. Hola Roser aquí estoy de nuevo dándote la vara. Quería preguntarte una cosa que no logro entender todavía, es sobre las secciones en html-html5:
    Estoy viendo muchos artículos de html5 y en unos sitios llamas secciones a una cosa, en otros a otra y por eso tengo el lio de no entenderlo.
    1. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML (div) con elementos de cabecera HTML (h1, h2, h3, h4, h5, o h6) en él, definiendo sus títulos. La relación de estos elementos divisores y de cabecera HTML desemboca en la estructura del documento y su perfil. Los elementos div no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección.
    2. Para comenzar, necesitas saber que los diseñadores web profesionales dividen su trabajo en cinco grandes secciones: encabezado, navegación, contenido, barra lateral y pie de página. Hace algunos años esto se hacía utilizando secciones de una tabla. Hoy se hace utilizando marcadores div.
    3. Las secciones para los usuarios de HTML 5
    Quienes usan HTML 5 tienen una sorpresa. El marcador div todavía existe, pero ahora se tienen marcadores específicos para las secciones de tu página:
    header para el encabezado de tu página, por lo general, incluyendo el logotipo
    nav para los enlaces de navegación
    section para tus artículos
    article para referencias y citas largas de otros artículos dentro de una sección de tu documento web
    aside para las barras laterales y otro contenido relacionado solo tangencialmente con el de tu página
    footer para tu información de contacto, nota de derechos de autor y similares
    4. En HTML5 con los recientemente introducidos elementos de seccionado (article, section, nav y aside) son siempre subsecciones de su sección ancestra más cercana, sin importar qué secciones son creadas por cabeceras internas.
    En el último apartado el 4, se que estas secciones dividen el contenido y crean una nueva sección, o subseccion en el outline del documento, pero por ejemplo un div no, un footer tampoco. Pero veo que en muchos sitios llaman a todo secciones., tanto al div, footer… yo pensaba en un principio, que las secciones solo eran estas article, section, nav y aside porque crean un seccion el en outline del documento y los hx que también hacen lo mismo, pero como te comente en otros sitios llaman secciones a todo. Mira esta web por favor para que veas ha lo que llama

    Te agradecería tu ayuda sobre el tema.

    1. Buenas, Isaac. Se te ha olvidado dejar los enlaces de los que sacas la información. Si no he buscado mal, los textos que copias pertenecen a 2 webs: Heptagrama, con el artículo «Divide tu página en secciones» y la web para desarrolladores de Mozilla con «Secciones y líneas generales de un documento HTML5«. Si hay alguna más, enlázala, por favor ;)

      Ahora al tema: Creo que la confusión que existe viene de los usos que se le dan a la palabra «secciones». En ocasiones se refieren simplemente a partes de la web en otras hacen referencias a la etiqueta section… y así es complicado seguir la lectura. En los puntos 1, 2 y 4, «secciones» se emplea con el sentido de partes de una web. En el punto 3 habla de la etiqueta section para artículos y la de article para referencias– discrepo en este uso: article ha de usarse para artículos (digamos 1 único artículo dentro de una etiqueta article) y section para englobar grupos de artículos (varios article dentro de 1 section), esto vendrían a ser secciones en el sentido clásico de, por ejemplo, los periódicos, que dividen sus contenidos en sociedad, política, internacional, etc. aunando dentro de estas «secciones» noticias (artículos) concernientes a esos temas. Por descontado, en web, section puede englobar también otras cosas además de artículos, por ejemplo grupos de enlaces o imágenes.

      De todas formas, sobre HTML5, ten en cuenta que es un estándar en desarrollo y muchas veces los conceptos siguen sin estar del todo claros. Te recomiendo que te des una vuelta por la web de w3schools.com y practiques en ella si crees que te puede ayudar.

      ¡Suerte!

      1. Hola Roser en este página que también tengo, al autor llama secciones a casi todo, en este caso a section,footer,header,nav… justo en donde hace mención a la imagen diciendo “ En la siguiente figura se indican las secciones del blog”, ni no me equivoco dice que todo lo que tiene la imagen son secciones.
        Enlace : http://genesis.uag.mx/escholarum/vol12/html5.html

        En esta otra página que ahora te enlazare, veo que el autor SÓLO nombra secciones a estas etiquetas es decir, a las etiquetas article, section,nav y aside que son las que crean una sección en el outline del documento y te comente en el punto 4. El autor añade esto:

        “Se crea una nueva sección del documento cada vez que se utiliza lo que se llama contenido de seccionado: los elementos article, section, nav y aside.”

        Enlaces:
        https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document
        http://mosaic.uoc.edu/ac/le/es/m8/ud2/

        En estas dos web veo que los autores hacen referencia solo a secciones a las etiquetas que crean una seccion en el outline del documento que son: todos los hx y article, section, nav y aside.

        1.En tu comentario: En los puntos 1, 2 y 4, “secciones” se emplea con el sentido de partes de una web. ¿Te refieres a la partes de una web en el sentido de las etiquetas html5 es decir, header, nav, article, section y hx? O cual, porque en el punto1 nombro a las hx que crean una sección en el outline del documento, no a las partes de la web y en el punto 2 nombra a encabezado, navegación, contenido, barra lateral y pie de página pero no a etiquetas, y en el punto 4 se vuelve a nombrar a etiquetas, si puedes aclarármelo un poco 

        2.Cuando comentas esto:
        En el punto 3 habla de la etiqueta section para artículos y la de article para referencias– discrepo en este uso: article ha de usarse para artículos (digamos 1 único artículo dentro de una etiqueta article) y section para englobar grupos de artículos (varios article dentro de 1 section), esto vendrían a ser secciones en el sentido clásico de, por ejemplo, los periódicos, que dividen sus contenidos en sociedad, política, internacional, etc. aunando dentro de estas “secciones” noticias (artículos) concernientes a esos temas. Por descontado, en web, section puede englobar también otras cosas además de artículos, por ejemplo grupos de enlaces o imágenes.

        Estoy de acuerdo contigo que article ha de usarse para artículos no section, en este caso section para englobar grupos de artículos.

        Después nombras esto: “vendrían a ser secciones en el sentido clásico” no entiendo está parte tampoco.

        Como vez sigo confuso con lo mismo porque no saco una conclusión clara de que es una sección o a que llamar una sección.
        Se que html5 es un estándar todavía y algunos conceptos no están muy claro, lo afirmo rotundamente y sobre la web que me enlazaste la conozco, aunque no es de mis favoritas no está mal, gracias. Si puedes intentar aclararme un poco mas seria de gran ayuda.

        1. Aquí estamos de nuevo, Isaac.

          A ver, cuando hablo de secciones en el sentido clásico me refiero al ejemplo que te puse del periódico y cómo su contenido está subdividido en apartados (secciones) tales como Economía, Nacional, Internacional, Anuncios, Cartas al director, Editorial, Índice… Si esto lo aplicas a la web podrás dividir sus contenidos en apartados similares (los genéricos suelen ser: noticias, información sobre la empresa, contacto, menú de navegación, el copyright, los anuncios) que a su vez pueden tener otras secciones dentro de ellos (imagina, en el apartado de noticias, distintos temas, por ejemplo: noticias actuales, noticias sobre la empresa, noticias sobre los productos…). Y todo esto, lo puedes etiquetar bien con tags específicos como nav para el menú o footer para meter el copy, o bien con la etiqueta section de la que hablamos.

          De cualquier forma, para no liarte, busca una única guía y sigue sus consejos, sus buenas prácticas. Yo me fiaría en especial de la web de desarrolladores de Mozilla que tú mismo citas. Creo que es bastante clara.

        1. Insisto en mi consejo previo, busca una guía HTML5 que te guste y sigue sólo esa hasta que la domines. Después, ya podrás ampliar con otras. Pero, mientras tanto, mejor no te líes y, si encuentras webs que NO te aclaran conceptos: ignóralas.

          1. Hola Roser vale ya entendí a que te refieres a secciones en el sentido clásico, pero no me respondistes a las partes de una web. Por ejemplo ayer vi una web de deporte que ponía secciones: mujer, hombre, dietas…. Aquí me imaginó que seria lo que tu nombras ¿ secciones en el sentido clásico? Seguire de todas formas tus consejos, pero si me aclaras lo de las partes creo que ya mas o menos conprendere el asunto.
            Gracias de nuevo

            1. Sobre el tema de las partes, dices: «En tu comentario: En los puntos 1, 2 y 4, “secciones” se emplea con el sentido de partes de una web. ¿Te refieres a la partes de una web en el sentido de las etiquetas html5 es decir, header, nav, article, section y hx? O cual, porque en el punto1 nombro a las hx que crean una sección en el outline del documento, no a las partes de la web y en el punto 2 nombra a encabezado… y en el punto 4 se vuelve a nombrar a etiquetas…»

              Cuando me refiero a que utilizan la palabra «sección» por su significado de «parte» (de una web) hablo desde el punto de vista de la maqueta o layout, no del código, pero como a esas partes hay que darles un nombre, en ocasiones, se puede confundir con los nombres propios que ha introducido el HTML5 (header, footer…) lo cual es normal pues precisamente era lo que se pretendía con este nuevo lenguaje: crear elementos fijos para referirse a partes de una web que, por costumbre, casi todos los diseñadores/desarrolladores llamaban ya así.

              La dificultad en este caso era que, al llamar secciones a estas partes, existía una confusión evidente con la etiqueta section.

  3. Vale, ya entendi el significado y puedo entender todo mucho mejor, gracias. Roser una curiosidad que no veo en ningún lado. El típico script de la fecha en ¿donde se suele englobar en el header? Es que no se donde semánticamente es más lógico meterlo, ahora mismo lo tengo en un div por el tema de darle estilos . Pero no se si lo normal es ponerlo en la cabecera.

    1. Sobre los JS… puf! Depende de a qué prefieras darle prioridad.

      Si te importa más que tu página cargue rápido, como el uso de js suele penalizar la carga de la página web, se recomienda que todos los que no deban estar por fuerza en la cabecera (los que no sean necesariamente obligatorios para que algo funcione de entrada), se inserten al final de la página, y, los de la cabecera, hay que intentar cargarlos en async (scripts asíncronos, gracias a HTLM5)

      Pero, claro, el problema de esto es que, hasta que no se cargue por completo la página, esos scripts no van a funcionar, por lo que si necesitas o prefieres es forzar que funcionen antes, intenta meterlos justo en el punto necesario (creo que es lo que estás haciendo ahora mismo).

      Si, sobre todo, lo que te importa es el orden, ponlos todos en la cabecera (que es lo que tradicionalmente se venía haciendo) para tenerlos agrupados y para que todos funcionen desde el segundo 0. Pero ten en cuenta que esto, puede hacer más lenta la carga de la web.

        1. Entonces, no entiendo tu duda. Si puedes, pásame una url donde vea cuál es el problema o mándame un mail (en el pie de página encontrarás cómo) y derivamos ahí la conversación.

  4. Hola Roser tengo algunas dudas sobre la etiqueta address de html5. Según se define:

    Este elemento cambió radicalmente su concepto entre HTML 4 y HTML 5, y en esta última versión mantiene este nuevo sentido.
    La etiqueta representa la dirección (información de contacto) correspondiente al elemento padre «más cercano», y si no tiene un article padre entonces representa la dirección del (de todo el documento).

    El elemento address no está pensado para direcciones postales. En la última especificación de HTML5 prevé que dicho elemento no se utilice para representar direcciones arbitrarias (ej: direcciones postales), «a menos que esas direcciones sean relevantes para la información de contacto del documento», esto quiere decir que se debe poner dentro de address la dirección postal siempre y cuando sea información que permita contactar al autor(es) o dueño(s) del documento o artículo. Lo que no se debe colocar en ella son direcciones postales que no sean del autor/dueño del documento o artículo.

    Al tema:

    En un documento tengo varias información mías, por ejemplo mi número de teléfono, email…pero da la casualidad que no están seguidas en un mismo lugar es decir, tengo varias párrafos grandes y por distribución el numero de telf. aparece en el primer párrafo, el email en el ultimo etc. Y claro no veo lógico englobar todo eso con un address. Mi pregunta es: ¿puedo aplicar varios address al documento? pero no me refiero a tener uno dentro de un article, otro en otro article, otro en el documento, que eso se que se puede según he leido. Me refiero a tener en un article o documento varios address para poder englobar distintos datos míos. Sé que para poner varios autores con sus respectivos email de contacto se ponen todos juntos dentro de address, así por ejemplo como dice html5doctor:

    <address>
    <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
    <a href="http://html5doctor.com/author/richc">Rich Clark</a>,
    <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
    <a href="http://html5doctor.com/author/toml">Tom Leadbetter</a>,
    <a href="http://html5doctor.com/author/brucel">Bruce Lawson</a>,
    <a href="http://html5doctor.com/author/remys">Remy Sharp</a>,
    <a href="http://html5doctor.com/author/olib">Oli Studholme</a>
    </address>

    Pero como comente arriba en este caso es el mismo autor con varios datos con información de contacto pero en lugares diferentes.

    http://html5doctor.com/the-address-element/

    un saludo

    1. Buenas, Isaac.

      Antes de nada, por motivos de seguridad no se puede pegar html explícito en los comentarios. Cuando quieras pegar fragmentos explicativos, hay que convertir algunos caracteres para que se vean como su fueran HTML pero sin que lo sean. Para que esto sea menos tedioso, utiliza webs como HMTL encoder ;) Allí pones tu HTML y te lo «traduce» para que luego aquí se vea bien. Es un engorro, pero este sistema de comentarios funciona así, quizá algún día busque otro mejor. Me he tomado la libertad de editar tu mensaje para que la parte de HTML se vea correctamente (espero que no te moleste, sólo he tocado eso).

      Por otro lado, sobre tu consulta: Yo emplearía la etiqueta address sólo en footers o para dejar claro la forma de contacto con el propietario de la página. En tu caso, tienes fragmentos desperdigados y quizá no sea necesario indicarlo cada vez. Otra cosa es que tengas varios artículos en una misma página, cada uno firmado por su autor y cada autor con su email (por ejemplo), entonces sí podrías hacer uso de la etiqueta de address, pero no cada vez que des un teléfono porque sí.

  5. Hola Roser, no te preocupes pense que podia meter codigo html aqui no lo sabia, hare la conversion para la proxima ;)

    1.cuando cometas que tu emplearías la etiqueta address sólo en footers o para dejar claro la forma de contacto con el propietario de la página. ¿Esto no significa que solo deba utilizarla en footer verdad? Puedo tener la forma de contacto por ejemplo en la pagina, pero no dentro de footer ni nada, por ejemplo tengo una página mía de mi biografía con mi email, pero no está en el footer, está en el párrafo. ¿Es incorrecto O simplemente quieres decir que se recomienda mas en el footer?

    2. Entonces no es correcto si tengo varios datos de contacto desperdigados, por ejemplo mi email, mi teléfono… como comentaste esto: “y quizá no sea necesario indicarlo cada vez” yo no indico siempre el numero de telefono o el emal, sino lo que tengo es un email, teléfono…y todos son datos de contacto, te pongo un ejemplo para explicarme mejor:
    Me llamo pepito y mi teléfono es 365 958 777, naci en el año 2000 en España,. Desde muy pequeño empecé a aficionarme por la informática toqueteando aquellos microprocesadores Intel i286 y cómo no Windows 95. Desde entonces la informática formo parte de mi vida hasta la actualidad.
    Desde hace 10 años empecé blablablá blablablá blablablá blablablá blablabla
    blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
    Así que ya sabes si estas interesad@ en algún proyecto profesional, asesoramiento, etc. No dudes en ponerte en contacto conmigo en esta dirección pepitomail.com, estaré encantado de poder ayudarte.
    Un saludo a todos
    Encuéntrame en google +
    Como puedes ver tengo varios datos de contacto, mi teléfono, email, encuéntrame en google. No son los mismo datos como puedes ver y a esto me refiero en que debería hacer, ya que no veo lógico meter en un solo address todos estos párrafos.

    1. A ver, punto 1: «Cada maestrillo tiene su librillo» que se dice, yo tengo asociada la etiqueta address a los footers, eso no quiere decir que sea exclusiva de ahí, puede aparecer por otros lados. Eso sí, donde esté, mi recomendación es que la utilices casi exclusivamente para indicar la forma de contacto con el propietario de la web (generalmente englobando su email o su web personal/profesional).

      Punto 2: Échale un vistazo a los microformatos para marcar datos sueltos o direcciones completas. Son muy socorridos también cuando quieres hacerle la pelota a Google y utilizar tu cuenta en Google+ para indicarle que eres el autor de una web o un blog ;) Investiga por esa línea.

  6. Sobre el punto 1, estoy de acuerdo contigo en que donde este que la utilice casi exclusivamente para la forma de contacto del propietario de la web, la utilizo así. Claro esto en el caso que este fuera de un article, ya que si esta dentro ya hablamos del autor de cada article, no del propietario de la web.

    Punto 2. Conozco los microdatos y haré uso de ellos, pero de todas formas me gustaría que me confirmaras lo que te plantee en el ejemplo que te puse. ¿no puedo usar mas de un address para meter cada dato mio de contacto como en el ejemplo, un address para el tlf, otro el email..siendo los mismo datos mio? ¿O solo se permite una etiqueta address, tanto este dentro de article como fuera? Ya que como te dije no es normal meter todo eso en un address ¿no? ¿ o en estos caso tengo que hacer uso de loa microdatos si o si?

    1. A ver, ya que address está indicado para datos de contacto, podrías utilizarlo repetidamente, pero mi consejo es: Por un lado, agrupa en alguna parte visible de la web todos los datos de contacto y márcalos con la etiqueta address + microformatos (o si se trata de autores de artículos, en cada article haz lo mismo); por otro lado, cada vez que aparezca un dato suelto, como el email, márcalo sólo con microformatos.

      Un saludo.

  7. p.d..Ya que estamos 

    Roser donde se debe colocar un formulario de búsqueda en la web ( el típico recuadro de búsqueda), es que veo dos conceptos diferentes.
    En algunos sitios lo ponen dentro del header, en otros dentro del nav y este nav a la misma vez dentro del header, y algunos dentro del nav pero este nav no está dentro del header.
    Yo por ejemplo en nav siempre lo pongo dentro del header, pero me surge donde poner el recuadro de búsqueda.

    Definición 1ª:
    El elemento nav sirve para marcar los enlaces de navegación u otras estructuras (por ejemplo, un formulario de búsqueda) que te llevan a diferentes páginas del sitio actual, o a diferentes áreas de la página actual. Otros enlaces, como los enlaces patrocinados, no cuentan. Por supuesto, puedes incluir los encabezados y otros elementos de estructura dentro de nav, pero no es obligatorio.

    Definición 2ª:
    Las etiquetas header y su cierre quizás sean mucho más sencillas de entender que las dos anteriores. Se encargan de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, algún logotipo, el título de la página, quizás una descripción de la misma y poco más. La norma define a la cabecera como un grupo de ayudas a la navegación. En definitiva, el HTML5 nos indica que todo lo que antes teníamos en la cabecera ha de ir ahora entre esas dos etiquetas, no más.
    No es una etiqueta obligatoria, aunque debemos usarla si realmente nuestras páginas tienen algún bloque de código que se pueda entender como «cabecera».
    Además de los elementos citados, un header podría contener un menú de ayuda a la navegación, una tabla de contenidos, un formulario de búsqueda, etc. Su contenido no es tan estricto

    Saludos
    p.d de nuevo: converti los caracteres html Escapando el código, pero al enviar el mensaje me ponia «Token no valido», por eso te he enviado las etiquetas html sin escapar.

    1. Hola de nuevo. Acuérdate de poner las fuentes de dónde sacas la información (las he añadido por ti) más que nada porque me gusta que quede claro el mérito tanta gente que comparte sus conocimientos (cuando usan lo que escribo sin citar se me llevan los demonios xD, por eso procuro no hacerlo yo con otros). Sobre el PD, cosa rara, pero en fin, también puedes optar por eliminar los caracteres especiales y así no hay problema.

      Sobre tu duda: Ponlo donde quieras porque Isabel como Fernando, tanto monta, monta tanto. Cuando tengas dudas de este tipo, mi recomendación es que te fijes en alguna web que te guste y con Firebug o alguna herramienta similar, analices su código para ver dónde incluyen ellos lo que tú no sabes… y copiales, pero copiar no en el sentido de plagio, sino en el sentido de aprendizaje, es decir, tú copias en este caso la posición de un elemento, no el código fuente al completo por la cara ;) Suerte!

  8. Hola roser muy buenas. Quería preguntarte unas cosillas sobre el elemento html5 footer.
    Se que este elemento se usa en muchísimas páginas para representar en pie del página de documento, también se que se puede utilizar en el elemento article. ¿pero en que elementos mas se puede usar es decir, en que elementos mas puede ser relativo el footer? Tanto en tu artículo como en algunas web mas lo describen mas o menos como tu:
    footer:
    Etiqueta para encapsular el pie de página, que al igual que el header puede usarse en como pie de toda la web o bien de los artículos o secciones si conviene.
    ¿A que te refieres con que puede usarse en secciones? Los artículos se que a article, ¿pero secciones?
    Se que anteriormente estuvimos hablando de el uso equivocado de la palabra secciones y la cantidad de significados que la gente le da. Pues aquí ahora no se a que te refieres con footer dentro de secciones.

    Un saludo

    1. Igual que las secciones pueden tener cabeceras, también pueden tener pies. La información que se englobe ahí ya depende, como siempre, de los usos e intenciones de cada uno, pero por ejemplo los footer de las secciones pueden usarse para incluir links de redes sociales, temas relacionados, etc. (similar a lo que pondrías en el pie de un artículo). De cualquier forma, los pies de sección son mucho menos comunes que los de artículo, lo que no quiere decir que no puedan existir. La posibilidad de usarlos está ahí.

      1. Se mas o menos lo elementos que puede englobar footer, pero mi pregunta es ¿A que te refieres con quela etiqueta footer puede usarse en secciones? Los artículos se que a la etiqueta article, ¿pero secciones?

          1. Míralo como si fueran unos calcetines, en un momento dado puedes usarlos para protegerte las manos y hasta parecería que casan… pero los calcetines son para los pies. Hay pies de documentos, hay pies de secciones y hay pies de artículos. ¿Puede haber pies en aside, nav o header? Prff, yo no usaría la etiqueta footer ahí, pero a lo mejor, como los calcetines, un día lo necesitas y te hace un apaño (raro). ¿Quieres una respuesta cerrada? Usa footer sólo para el documento, section y article y no te confundirás.

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.