Cuantos header, footer y navs puedo ocupar?

jorgeteChileno · #1 (**permalink**) 21/12/2011, 09:05

hola... quiero saber cuantas veces puedo ocupar o repertir las etiquetas Header, nav y footer.. en una pag. o sitio con HTML5?

gracias.

ryugen · #2 (**permalink**) 21/12/2011, 09:17

pues depende del contexto y significado de la página pero no hay limites.

Describe el contenido de tu página y como lo quieres organizar y podríamos ver.

cristian_cena · #3 (**permalink**) 22/12/2011, 16:21

Supongo que usar <header > y <footer> solo una vez y <nav> tantas como menús tengas será semántico. Pues no tienes más de una cabecera y un pié en una página, pero si podes tener más de un menú.
Lo demás podrías colocar en <section> o si es una estructura más abstracta como puede ser el layout, entonces dentro de <div>.

Saludos.

ryugen · #4 (**permalink**) 22/12/2011, 17:12

Cita:

Iniciado por cristian_cena

Supongo que usar <header > y <footer> solo una vez y <nav> tantas como menús tengas será semántico. Pues no tienes más de una cabecera y un pié en una página, pero si podes tener más de un menú.
Lo demás podrías colocar en <section> o si es una estructura más abstracta como puede ser el layout, entonces dentro de <div>.

Saludos.

Eso no es semánticamente correcto. De acuerdo a la especificación ( http://www.w3.org/TR/html5/sections....header-element ) y mirando este muy interesante documento ( http://html5doctor.com/the-header-element/ ). El elemento header representa el encabezado de una sección y puede repetirse más de una vez por página. Por ejemplo si miramos este sitio ( http://www.forosdelweb.com ) Vemos en la portada tres grandes secciones, por una lado la seccion del manejo de usuario personal, por otra parte la seccion de foros y por ultimo la sección de Estadisticas (para generalizar). Cada una de esta sección podría tener un encabezado.
Por eso no se debería confundir el tag header como encabezado de página (no es una relación uno a uno)

cristian_cena · #5 (**permalink**) 22/12/2011, 17:30

ey ryugen muy buen artículo, observo que cada vez que necesitemos algo más que un h1-h6 podríamos usar <header>. ¿Esto quiere decir que la cabecera y el pié del sitio pueden tratarse como divs mas del layout y usar header y footer para las secciones?. Digo esto porque le eché un ojo a http://html5doctor.com/the-footer-element-update/

O en cambio sería semantico usarlo en varios "niveles" de anidación: ¿que opinas sobre esta estructura?

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header></header> <!-- <div id="header"></div>-->
    <div id="colums">
        <section>
            <header>
                <h2></h2>
                <p></p>
            </header>
            <article></article>
            <footer></footer>
        </section>
        <section>
            <header>
                <h2></h2>
                <p></p>
            </header>
            <article></article>
            <footer></footer>
        </section>
    </div>
    <footer></footer>
</body>
</html>

Saludos

kseso? · #6 (**permalink**) 23/12/2011, 15:40

Posíblemente estemos ante uno falso amigo (palabras de grafía similar pero significados muy distintos en dos idiomas).

Si bien en inglés header sea tanto un encabezamiento o cabecera como un título, en castellano son cosas muy distintas.
Así el encabezamiento (header) sería:

Cita:

1. m. Conjunto de las palabras con que, según fórmula, se empieza un documento.
2. m. Aquello que, como advertencia o en otro concepto, se dice al principio de un libro o escrito de cualquier clase.

O lo que para mi, en mi ignorancia, es más bien cabecera el significado de header:

Cita:

16. f. Nombre de un periódico registrado como propiedad de una persona o entidad mercantil, que suele ir en la primera página.
17. f. ant. Cabeza o principio de un escrito. (pero no de cada parte que componga dicho escrito, añado de mi cosecha)

Y el título (hnº):

Cita:

Palabra o frase con que se da a conocer el nombre o asunto de una obra o de cada una de las partes o divisiones de un escrito.

Así que una página sólo debería tener una cabecera o encabezamiento y un pie o cierre.
Y en cada artículo o sección comenzará por el título del mismo (hn) más o menos estilizado, tendrá un cuerpo (no body) que contendrá el desarrollo del mismo y terminará o no con una conclusión. Otra cosa es que visualmente se realcen esas partes (apertura, desarrollo y final) como se crea conveniente.

ryugen · #7 (**permalink**) 23/12/2011, 16:07

Si leemos la spec en el apartado Sectioning content:
http://www.w3.org/TR/html5/content-m...ioning-content

Veamos:

Cita:

Sectioning content is content that defines the scope of headings and footers.

article
aside
nav
section

Each sectioning content element potentially has a heading and an outline. See the section on headings and sections for further details.

There are also certain elements that are sectioning roots. These are distinct from sectioning content, but they can also have an outline.

Cita:

3.2.5.1.4 Heading content

Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).

h1
h2
h3
h4
h5
h6
hgroup

Y ... http://www.w3.org/TR/html5/sections....header-element

Cita:

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
[...]

The header element is not sectioning content; it doesn't introduce a new section.

Resumiendo, los elementos generadores contenedores de secciones son:
article
aside
nav
section
Los "h1-6" son encabezados para cada una de las secciones, "h1-6" de menor valor dentro de una misma seccion generan subsecciones.

Por ultimos en la definición de header dice que el tag "header" puede ser el encabezado para una sección (pero marca que esto no es obligatorio) por lo tanto un "h1-6" por si solo ya puede encabezar una seccion sin embargo si incluimos un header podemos incorporar al encabezado otros elementos, como por ejemplo navegacion con nav. También aclara que por si solo el "header" no tiene el poder de un "h1-6" para poder generar una nueva sección o subseccion.

Para que se entienda

Código HTML:

Ver originalh1
 h2
 h2
h1
 h2
 h2

Genera dos secciones y dos subsecciones en cada una.

Código HTML:

Ver originalheader
 h2
 h2
header
 h2
 h2

Genera cuatro secciones de nivel 2.

Espero que se haya entendido

PD: Muy enriquesedores los debates que se están armando

cristian_cena · #8 (**permalink**) 02/01/2012, 04:55

En este theme html5 usan <header> y <footer> pare la cabecera y el pié de página.
Además usan <footer> para los piés de los artículos tal como indica el artículo de html5doctor que mencionó ryugen en #4. No usan <header> en los artículos porque no lo necesitan, le basta con un h2. Aunque si la cabecera de los artículos tendría una volanta o una bajada hubieran encerrado estos 3 elementos dentro de <header>.
Según html5doctor <header> y <footer> pueden ser usados multiples veces en un documento.
Lo que no sabía era: si es semantico que pertenezcan a distintos niveles de anidamiento. En el theme que les indico parece que si, esto aclara mi duda en #5. Aunque seguiré viendo.

A través de un tweet me encontré con un listado de themes html5 que estan buenos para ver.

En este theme cuya cabecera contiene un titulo y una descripción con la fecha y la categoría del artículo usan múltiples <header>

kseso? · #9 (**permalink**) 02/01/2012, 15:37

Antes de nada, hacer notar que en las páginas de la w3c http://www.w3.org/TR/html5/ hay un hermoso aviso en rojo y con box-shadow que comienza:

Cita:

This is a work in progress!

Y ésto lo resalto no para rebatir lo que están argumentando en base a ellas.
No.
Lo hago notar porque tengo la sensación que html5 ha sido un parto prematuro. Demasiadas cosas sin definir y por lo tanto susceptibles de interpretación.
Y otras diréctamente un paso atrás respecto al xhtml strict y html4.
Cuestiones como el permitir no cerrar tags, que cualquier elemento pueda contener a cualquier otro... y tanto con la semántica pues chirrían.

Pero ahora no puedo extenderme más sobre la pretendida semántica del código y "la concepción fractal " de los documentos web (lo único que diferencia al todo del elemento base que lo conforma es la escala).
Visión extendida a todo de la estructura de blogs.
Eso lo dejo para otro momento de más inspiración y cuando lo tenga más claro.

jorgeteChileno · #10 (**permalink**) 18/01/2012, 12:28

GRACIAS POR SUS RESPUESTAS !!!!!!!! disculpen la demora en participar..

Hace un tiempo hice el curso de HTML5 impartido por Christian Van Der Henst y John Freddy Vega.. (directores de cristalab y foros del web), según Freddy dice que solo debemos usar una vez los tags Header, footer y un nav, ya que por semántica en seo seria lo mas aceptable, lo encontre lógico... claro está que me he topado en muchos articulos incluyendo a Stephany Sulivan que podemos usar mas de un Header, no tan solo como encabezado del sitio, sino también como encabezado de textos tomando al H1(que se utiliza una vez) y a otros H2... tal como señala nuestro buen amigo "ryugen"
Para mi entre tanta info ya me he mareado pero opte por mezclar un poco de ambas y solo repetir un header mas osea dos por sitio(cabecera general y un h1 como apoyo). y dejar como único en el sitio los elementos footer y el nav.