section etiquetas encabezado ejemplos div attribute html html5 header article

etiquetas - Buenas prácticas HTML5; Sección/encabezado/apartado/artículos del artículo



section html5 ejemplos (16)

  1. La sección debe usarse solo para envolver una sección dentro de un documento (como capítulos y similares)
  2. Con etiqueta de cabecera : NO. La etiqueta de encabezado representa una envoltura para el encabezado de página y no debe confundirse con H1, H2, etc.
  3. Que div? :RE
  4. Sí
  5. De las escuelas del W3C:

    La etiqueta define contenido externo. El contenido externo puede ser un artículo de noticias de un proveedor externo, un texto de un registro web (blog), un texto de un foro o cualquier otro contenido de una fuente externa.

  6. No, la etiqueta de cabecera tiene un uso diferente. H1, H2, etc. representan los títulos de documentos H1, siendo los más importantes

No respondí a otros porque es difícil adivinar a qué te referías. Si hay más preguntas, por favor hágamelo saber.

Hay suficiente información sobre HTML5 en la web (y también en stackoverflow), pero ahora tengo curiosidad por las "mejores prácticas". Las etiquetas como la sección / encabezados / artículo son nuevas, y todos tienen diferentes opiniones sobre cuándo y dónde debe usar estas etiquetas. Entonces, ¿qué piensan ustedes del siguiente diseño y código?

1 <!doctype html> 2 <head> 3 <title>Website</title> 4 </head> 5 6 <body> 7 <section> 8 <header> 9 <div id="logo"></div> 10 <div id="language"></div> 11 </header> 12 13 <nav> 14 <ul> 15 <li>menu 1</li> 16 <li>menu 2</li> 17 <li>menu 3</li> 18 <li>menu 4</li> 19 <li>menu 5</li> 20 </ul> 21 </nav> 22 23 <div id="main"> 24 <div id="main-left"> 25 <article> 26 <header><h1>This is a title</h1></header> 27 28 <p>Lorem ipsum dolor sit amet, consectetur 29 adipiscing elit. Quisque semper, leo eget</p> 30 31 <p>Lorem ipsum dolor sit amet, consectetur 32 adipiscing elit. Quisque semper, leo eget</p> 33 34 <p>Lorem ipsum dolor sit amet, consectetur 35 adipiscing elit. Quisque semper, leo eget</p> 36 37 <p>Lorem ipsum dolor sit amet, consectetur 38 adipiscing elit. Quisque semper, leo eget</p> 39 </article> 40 </div> 41 42 <div id="main-right"> 43 <section id="main-right-hot"> 44 <h2>Hot items</h2> 45 <ul> 46 <li>Lorem ipsum</li> 47 <li>dolor sit</li> 48 <li>...</li> 49 </ul> 50 </section> 51 52 <section id="main-right-new"> 53 <h2>New items</h2> 54 <ul> 55 <li>Lorem ipsum</li> 56 <li>dolor sit</li> 57 <li>...</li> 58 </ul> 59 </section> 60 </div> 61 </div> 62 63 <div id="news-items"> 64 <header><h2>The latest news</h2></header> 65 66 <div id="item_1"> 67 <article> 68 <header> 69 <img src="#" title="titel artikel" /> 70 <h3>Lorem ipsum .....</h3> 71 </header> 72 <p>Lorem ipsum dolor sit amet, 73 adipiscing elit. Quisque semper, </p> 74 <a href="#">Read more</a> 75 </article> 76 </div> 77 78 79 <div id="item_2"> 80 <article> 81 <header> 82 <img src="#" title="titel artikel" /> 83 <h3>Lorem ipsum .....</h3> 84 </header> 85 <p>Lorem ipsum dolor sit amet, 86 adipiscing elit. Quisque semper, </p> 87 <a href="#">Read more</a> 88 </article> 89 </div> 90 91 92 <div id="item_3"> 93 <article> 94 <header> 95 <img src="#" title="titel artikel" /> 96 <h3>Lorem ipsum .....</h3> 97 </header> 98 <p>Lorem ipsum dolor sit amet, 99 adipiscing elit. Quisque semper, </p> 100 <a href="#">Read more</a> 101 </article> 102 </div> 103 </div> 104 105 <footer> 106 <ul> 107 <li>menu 1</li> 108 <li>menu 2</li> 109 <li>menu 3</li> 110 <li>menu 4</li> 111 <li>menu 5</li> 112 </ul> 113 </footer> 114 </section> 115 </body> 116 </html>

Línea 7. ¿ section todo el sitio web? O solo un div ?

línea 8. ¿Cada section comienza con un header ?

línea 23. ¿Es esto div correcto? ¿O debe ser esto una section ?

línea 24. Dividir columna izquierda / derecha con un div .

línea 25. ¿Lugar correcto para la etiqueta del article ?

línea 26. ¿Es necesario poner su etiqueta h1 en el header -tag?

línea 43. El contenido no está relacionado con el artículo principal, así que decidí que esta es una section y no un aside .

línea 44. H2 sin header

linea 53. section sin header

línea 63. Div con todas las noticias (no relacionadas)

línea 64. header con h2

línea 65. Hmm, div o section ? O elimina este div y solo usa el article -tag

línea 105. pie de página :-)

„Línea 23. ¿Es esto div derecho? ¿O debe ser esto una sección?

Ninguno: hay una etiqueta main para ese propósito, que solo se permite una vez por página y se debe usar como un contenedor para el contenido principal (en contraste con una barra lateral o un encabezado de todo el sitio).

<main> <!-- The main content --> </main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

¿Por qué no tener los identificadores item_1, item_2, etc. en las etiquetas del artículo? Me gusta esto:

<article id="item_1"> ... </article> <article id="item_2"> ... </article> ...

Parece innecesario agregar los divs de envoltura. Los valores de ID no tienen un significado semántico en HTML, por lo que creo que sería perfectamente válido hacer esto; no está diciendo que el primer artículo sea siempre item_1, solo item_1 dentro del contexto de la página actual. No se requiere que las ID tengan un significado que sea independiente del contexto.

Además, en cuanto a su pregunta en la línea 26, no creo que la etiqueta <header> se requiera allí, y creo que podría omitirla ya que está sola en el div "main-left". Si estuviera en la lista principal de artículos, es posible que desee incluir la etiqueta <header> solo por coherencia.

Aquí está mi ejemplo en el que trabajo

De acuerdo con la explicación en mi respuesta "principal", el documento en cuestión debe marcarse de acuerdo con un esquema.

En las siguientes dos tablas os muestro:

  • El HTML original y su esquema.
  • un posible esquema previsto y el HTML haciendo eso

html original (acortado)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

HTML original relevante para el esquema
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































esquema resultante
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


El esquema del original es
Definitivamente no fue lo que se pretendía.

































































La siguiente tabla muestra mi propuesta para una versión mejorada. Yo uso el siguiente marcado:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

posible esquema previsto
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































html modificado
<body> <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main> <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article> </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer> </section> ``

esquema resultante
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


El HTML modificado refleja el
forma prevista esquema mejor que
el original.
































































EDIT: Lamentablemente tengo que corregirme.

Consulte a continuación https://.com/a/17935666/2488942 para obtener un enlace a las especificaciones de w3 que incluye un ejemplo (a diferencia de las que he visto anteriormente).

Pero entonces ... Here hay un buen artículo al respecto gracias a @Fez.

Mi respuesta original fue:

La forma en que se estructuran las especificaciones w3:

4.3.4 Secciones

4.3.4.1 El elemento cuerpo

4.3.4.2 El elemento de sección

4.3.4.3 El elemento de navegación

4.3.4.4 El elemento artículo

....

Me sugiere que la section es más alta que el article . Como se mencionó en esta section respuestas section agrupan los contenidos relacionados temáticamente. El contenido de un artículo en mi opinión está relacionado temáticamente de todos modos, de ahí que, al menos para mí, también sugiera que la section agrupe a un nivel superior en comparación con el article .

Creo que está destinado a ser usado así:

section: Chapter 1 nav: Ch. 1.1 Ch. 1.2 article: Ch. 1.1 some insightful text article: Ch. 1.2 related to 1.1 but different topic

o para un sitio web de noticias:

section: News article: This happened today article: this happened in England section: Sports article: England - Ukraine 0:0 article: Italy books tickets to Brazil 2014

El error principal: Usted tiene "divitis" en todo el documento.
¿Por qué esto?

<header> <div id="logo"></div> <div id="language"></div> </header>

En lugar de:

<header role="banner"> <!-- Not the best --> <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... --> <h2 id="language"></h2> <!-- Better, if the IDs have not semantic sense --> <h1></h1> <h2></h2> </header>

Para estilizar este encabezado, use la jerarquía CSS: cuerpo> sección> encabezado> h1, cuerpo> sección> encabezado> h2

Más, ... línea 63: ¿por qué el encabezado envuelve h2? Si no incluye ningún elemento más dentro del encabezado, solo use un solo h2.
Tenga en cuenta que su estructura no es para estilizar el documento, sino construir un documento autoexplicado.

Aplicar esto al resto del documento; Buena suerte ;)

En realidad, tienes toda la razón cuando se trata de encabezado / pie de página. Aquí hay información básica sobre cómo se pueden / deben usar cada una de las principales etiquetas HTML5 (sugiero leer la fuente completa vinculada en la parte inferior):

Sección : se utiliza para agrupar contenido relacionado temáticamente. Suena como un elemento div, pero no lo es. El div no tiene significado semántico. Antes de reemplazar todos sus divs con elementos de sección, siempre pregúntese: "¿Está todo el contenido relacionado?"

aparte - Usado para contenido relacionado tangencialmente. El hecho de que algunos contenidos aparezcan a la izquierda o a la derecha del contenido principal no es razón suficiente para usar el elemento aparte. Pregúntese si el contenido dentro del apartado puede eliminarse sin reducir el significado del contenido principal. Pullquotes son un ejemplo de contenido relacionado tangencialmente.

encabezado : existe una diferencia crucial entre el elemento del encabezado y el uso general aceptado del encabezado (o cabecera). Por lo general, solo hay un encabezado o ''cabecera'' en una página. En HTML5 puedes tener tantas como quieras. La especificación lo define como "un grupo de ayudas introductorias o de navegación". Puede usar un encabezado en cualquier sección de su sitio. De hecho, probablemente debería usar un encabezado en la mayoría de sus secciones. La especificación describe el elemento de la sección como "una agrupación temática de contenido, típicamente con un encabezado".

nav : destinado a la información de navegación más importante. Un grupo de enlaces agrupados no es razón suficiente para usar el elemento de navegación. La navegación en todo el sitio, por otra parte, pertenece a un elemento de navegación.

pie de página - Parece que es una descripción de la posición, pero no lo es. Los elementos del pie de página contienen información sobre el elemento que lo contiene: quién lo escribió, los derechos de autor, los enlaces a contenido relacionado, etc. Mientras que generalmente tenemos un pie de página para un documento completo, HTML5 también nos permite tener pie de página en las secciones.

Fuente : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Además, aquí hay una descripción del article , que no se encuentra en la fuente anterior:

Artículo : se utiliza para el elemento que especifica contenido independiente y autocontenido. Un artículo debe tener sentido por sí mismo. Antes de reemplazar todos sus divs con elementos de artículos, siempre pregúntese: "¿Es posible leerlo independientemente del resto del sitio web?"

No creo que debas usar la etiqueta en el resumen de la noticia (líneas 67, 80, 93). Usted podría usar la sección o simplemente tener el div adjunto.

Un artículo debe poder sostenerse por sí mismo y aún tener sentido o estar completo. Como está incompleto o solo un extracto no puede ser un artículo, es más una sección.

Al hacer clic en "leer más", la página siguiente puede

Quiero aclarar esta pregunta con mayor precisión, corríjame si me equivoco. Tomemos un ejemplo de Facebook Wall.

1.Wall se incluye en la etiqueta "section", que indica que está separada de la página.

2. Todas las publicaciones están bajo la etiqueta de "artículo".

3. Luego tenemos una publicación única, que se incluye en la etiqueta "sección".

3.Tenemos el encabezado "X usuario publicar esto" para esto podemos usar la etiqueta "encabezado".

4. Luego, dentro de la publicación, tenemos tres secciones, una es Imágenes / texto, botón de compartir y comentar.

5.Para el cuadro de comentarios podemos usar la etiqueta del artículo.

Sugeriría leer la página wiki de W3 sobre la estructuración de HTML5 :

<header> Se utiliza para contener el contenido del encabezado de un sitio. <footer> Contiene el contenido del pie de página de un sitio. <nav> Contiene el menú de navegación u otra funcionalidad de navegación para la página.

<article> Contiene una pieza de contenido independiente que haría
detecta si está sindicado como un elemento RSS, por ejemplo, un elemento de noticias.

<section> Se utiliza para agrupar diferentes artículos en diferentes
Propósitos o temas, o para definir las diferentes secciones de un solo artículo.

<aside> Define un bloque de contenido que está relacionado con el contenido principal que lo rodea, pero no es fundamental para el flujo de este.

Incluyen una imagen que he limpiado aquí:

En el código, esto se ve así:

<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>

Vamos a explorar algunos de los elementos HTML5 con más detalle.

<section>

El elemento <section> es para contener distintas áreas diferentes de funcionalidad o área de temas, o dividir un artículo o historia en diferentes secciones. Entonces, en este caso: "sidebar1" contiene varios enlaces útiles que persistirán en cada página del sitio, como "suscribirse a RSS" y "Comprar música de la tienda". "main" contiene el contenido principal de esta página, que es publicaciones de blog. En otras páginas del sitio, este contenido cambiará. Es un elemento bastante genérico, pero aún tiene un significado más semántico que el antiguo <div> .

<article>

<article> está relacionado con <section> , pero es claramente diferente. Mientras que <section> es para agrupar distintas secciones de contenido o funcionalidad, <article> es para contener piezas de contenido independientes relacionadas, como publicaciones de blog individuales, videos, imágenes o noticias. Piénselo de esta manera: si tiene varios elementos de contenido, cada uno de los cuales sería adecuado para leer por su cuenta, y tendría sentido sindicar como elementos separados en una fuente RSS, entonces <article> es adecuado para marcar hacia arriba. En nuestro ejemplo, <section id="main"> contiene entradas de blog. Cada entrada de blog sería adecuada para sindicar como un elemento en una fuente RSS, y tendría sentido cuando se lea por sí misma, fuera de contexto, por lo tanto, <article> es perfecto para ellos:

<section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section>

Simple eh? Tenga en cuenta que también puede anidar secciones dentro de artículos, donde tiene sentido hacerlo. Por ejemplo, si cada una de estas publicaciones de blog tiene una estructura consistente de distintas secciones, también podría incluir secciones dentro de sus artículos. Podría verse algo como esto:

<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>

<header> y <footer>

como ya mencionamos anteriormente, el propósito de los elementos <header> y <footer> es envolver el contenido del encabezado y pie de página, respectivamente. En nuestro ejemplo particular, el elemento <header> contiene una imagen de logotipo, y el elemento <footer> contiene un aviso de copyright, pero puede agregar contenido más elaborado si lo desea. También tenga en cuenta que puede tener más de un encabezado y pie de página en cada página, así como el encabezado y pie de página de nivel superior que acabamos de analizar, también podría tener un elemento <header> y <footer> anidados dentro de cada <article> en cuyo caso solo se aplicarían a ese artículo en particular. Agregando a nuestro ejemplo anterior:

<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article>

<nav>

El elemento <nav> sirve para marcar los enlaces de navegación u otras construcciones (por ejemplo, un formulario de búsqueda) que lo llevará a diferentes páginas del sitio actual o diferentes áreas de la página actual. Otros enlaces, como los enlaces patrocinados, no cuentan. Por supuesto, puede incluir encabezados y otros elementos de estructuración dentro de <nav> , pero no es obligatorio.

<aside>

es posible que hayas notado que usamos un elemento <aside> para marcar la segunda barra lateral: el que contiene los últimos conciertos y detalles de contacto. Esto es perfectamente apropiado, ya que <aside> es para marcar piezas de información relacionadas con el flujo principal, pero que no encajan directamente en él. ¡Y el contenido principal en este caso es todo acerca de la banda! Otras buenas opciones para un <aside> serían información sobre el autor de la (s) publicación (es) del blog, una biografía de la banda o una discografía de la banda con enlaces para comprar sus álbumes.

¿Dónde deja eso <div> ?

Entonces, con todos estos grandes elementos nuevos para usar en nuestras páginas, los días de los humildes <div> están numerados, ¿no? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Debe usarlo cuando no haya otro elemento más adecuado disponible para agrupar un área de contenido, que a menudo lo estará cuando solo esté utilizando un elemento para agrupar contenido con fines visuales o de estilo. Un ejemplo común es usar un <div> para envolver todo el contenido de la página y luego usar CSS para centrar todo el contenido en la ventana del navegador, o aplicar una imagen de fondo específica a todo el contenido.

[ explicaciones en mi "respuesta principal" ]

Línea 7. ¿ Sección de todo el sitio web? O solo un div ?

Ninguno. Para el estilo: use <body> , ya está ahí. Para secciones / semánticas: como se detalla en mi ejemplo HTML, su efecto es contrario a la utilidad. Envoltorios extra para contenido ya envuelto no es una mejora, sino ruido.


línea 8. ¿Cada sección comienza con un encabezado?

No, es la elección del autor dónde colocar el contenido que normalmente se resume como "encabezado". Y si el contenido del encabezado es claramente reconocible sin marcas adicionales, puede permanecer perfectamente sin <header> . Esta es también la elección del autor.


línea 23. ¿Es esto div correcto? ¿O debe ser esto una sección ?

El <div> es probablemente incorrecto. Depende de las intenciones: es solo para el estilo, podría ser correcto. Si es para fines semánticos, es incorrecto: debería ser un <article> lugar de como se muestra en mi otra respuesta . <article> también es correcto si es para el estilo y la sección combinados.

<section> ve mal aquí, ya que no hay secciones similares antes o después de ésta, como capítulos de un libro. (Este es el propósito de <section> ).


línea 24. Dividir columna izquierda / derecha con un div .

¿No porque?


línea 25. ¿Lugar correcto para la etiqueta del artículo ?

Sí, tiene sentido.


línea 26. ¿Es necesario poner su etiqueta h1 en el encabezado -tag?

No. Es probable que un elemento único <h*> nunca tenga que ir en un <header> (pero puede hacerlo si lo desea), ya que está claro que es el encabezado de lo que está por venir. - Tendría sentido si ese <header> también abarcara un lema (marcado con <p> ), por ejemplo.


línea 43. El contenido no está relacionado con el artículo principal, así que decidí que esta es una sección y no un apartado .

Es un malentendido que un <aside> tiene que estar " relacionado tangencialmente" con el contenido que lo rodea. El punto es: ¡use un <aside> si el contenido solo está "relacionado tangencialmente " o no lo está!

Sin embargo, aparte de que <aside> sea ​​una opción decente, <article> podría ser mejor que una <section> ya que los "elementos candentes" y los "elementos nuevos" no deben leerse como dos capítulos de un libro. Puede elegir perfectamente uno de ellos y no el otro como una clasificación alternativa de algo, no como dos partes de un todo.


línea 44. H2 sin cabecera

Es genial.


linea 53. seccion sin cabecera

Bueno, no hay <header> , pero el <header> <h2> deja bastante claro qué parte de esta sección es el encabezado.


línea 63. Div con todas las noticias (no relacionadas)

<article> o <aside> podría ser mejor.


línea 64. cabecera con h2

Ya discutido.


línea 65. Hmm, div o sección ? O elimina este div y solo usa el artículo -tag

¡Exactamente! Retire el <div> .


línea 105. pie de página :-)

Muy razonable.

Desafortunadamente, las respuestas dadas hasta ahora (incluidas las más votadas) son "simplemente" de sentido común, simplemente erróneas o, en el mejor de los casos, confusas. Ninguna de las palabras clave cruciales 1 aparece!

Escribí 3 respuestas:

  1. Esta explicación (empieza aquí).
  2. Respuestas concretas a las preguntas de OP.
  3. HTML detallado mejorado.

Para comprender la función de los elementos html que se analizan aquí, debe saber que algunos de ellos seccionan el documento. Todos y cada uno de los documentos html se pueden dividir de acuerdo con el algoritmo de esquema HTML5 con el fin de crear un esquema, o bien, tabla de contenido (TOC). El esquema no es generalmente visible (en estos días), pero los autores deben usar html de tal manera que el esquema resultante refleje sus intenciones.

Puedes crear secciones con exactamente estos elementos y nada más :

  • creando subsecciones (explícitas)
    • <section> secciones
    • secciones <article>
    • <nav> secciones
    • <aside> secciones
  • creando secciones o subsecciones de hermanos
    • secciones de tipo no especificado con <h*> 2 (no todas hacen esto, ver más abajo)
  • para subir de nivel la sección (sub) explícita actual

Las secciones pueden ser nombradas:

  • <h*> secciones creadas nombre ellos mismos
  • <section|article|nav|aside> serán nombradas por la primera <h*> si hay una
    • estos <h*> son los únicos que no crean secciones en sí mismos

Hay una cosa más en las secciones: los siguientes contextos (es decir, elementos) crean "contornos de límites". Cualquier sección que contengan es privada para ellos:

  • el propio documento con <body>
  • celdas de tabla con <td>
  • <blockquote>
  • <details> , <dialog> , <fieldset> y <figure>
  • nada mas

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Esto plantea dos preguntas:

¿Cuál es la diferencia entre <article> y <section> ?

  • ambos pueden:
    • estar anidados unos en otros
    • tomar una noción diferente en un contexto diferente o nivel de anidamiento
  • <section> s son como capítulos de libros
    • usualmente tienen hermanos (tal vez en un documento diferente?)
    • Juntos tienen algo en común, como capítulos de un libro.
  • un autor, un <article> , al menos en el nivel más bajo
    • Ejemplo estándar: un solo comentario de blog.
    • una entrada de blog en sí es también un buen ejemplo
    • una entrada de blog <article> y su comentario <article> s también podrían incluirse en un <article>
    • Es algo "completo", no una parte en una serie de similares.
  • <section> s en un <article> son como capítulos de un libro
  • <article> s en una <section> son como poemas en un volumen (dentro de una serie)

¿Cómo encajan <header> , <footer> y <main> ?

  • Tienen cero influencia en el seccionamiento.
  • <header> y <footer>
    • Te permiten marcar zonas de cada sección.
    • Incluso dentro de una sección puedes tenerlos varias veces.
    • Diferenciar de la parte principal en esta sección.
    • Limitado solo por el gusto del autor
    • <header>
      • puede marcar el título / nombre de esta sección
      • Puede contener un logo para esta sección.
      • no tiene que estar en la parte superior o superior de la sección
    • <footer>
      • Puede marcar los créditos / autor de esta sección.
      • puede venir en la parte superior de la sección
      • incluso puede estar por encima de un <header>
  • <main>
    • solo permitido una vez
    • marca la parte principal de la sección de nivel superior (es decir, el documento, <body> que es)
    • Las subsecciones en sí no tienen marcado para su parte principal.
    • <main> incluso puede "esconderse" en algunas subsecciones del documento, mientras que <header> y <footer> no pueden (ese marcado marcaría el encabezado / pie de página de esa subsección)
      • pero no está permitido en <article> secciones 3
    • ayuda a distinguir "lo real" del contenido no principal del documento, sin pie de página, no principal, si eso tiene sentido en su caso ...

1 a la mente viene: esquema, algoritmo, sección implícita
2 Utilizo <h*> como abreviatura para <h1> , <h2> , <h3> , <h4> , <h5> y <h6>
3 tampoco se permite <main> en <aside> o <nav> , pero eso no es una sorpresa. - En efecto: <main> solo puede ocultar secciones <section> descendentes (anidadas) o aparecer en el nivel superior, es decir <body>

El marcado para ese documento podría verse como el siguiente:

<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>

Puede encontrar más información en este artículo en A List Apart .

De acuerdo con la respuesta de Nathan , esto tiene mucho sentido (para las partes rojas y naranjas, quizás puedas usar div''s y / o header y footerrespectivamente):

<body itemscope itemtype="http://schema.org/Blog"> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <main> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">My Day at the Beach</h1> </header> <div itemprop="articleBody"> <p>Today I went to the beach and had a lot of fun.</p> ...more content... </div> <footer> <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p> </footer> </article> ...more blog posts... </main> <footer> <p>Copyright © <span itemprop="copyrightYear">2010</span> <span itemprop="copyrightHolder">The Example Company</span> </p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element