Las mejores prácticas HTML5; sección/encabezado/aparte/elementos del artículo

StackOverflow https://stackoverflow.com/questions/4781077

  •  23-10-2019
  •  | 
  •  

Pregunta

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

Website layout

  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 alrededor de todo el sitio web? O solo un div?

Línea 8. cada uno section Empiece con un header?

línea 23. ¿Es esta div ¿Correcto? o debe ser esto section?

Línea 24. Divida la columna izquierda/derecha con un div.

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

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

línea 43. El contenido no está relacionado con el artículo principal, por lo que decidí que este es un section Y no un aside.

línea 44. H2 sin header

línea 53. section sin que 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 eliminar esto div y solo usa el article-etiqueta

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

¿Fue útil?

Solución

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

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

aparte - Utilizado para contenido tangencialmente relacionado. El hecho de que cierto contenido aparezca a la izquierda o a la derecha del contenido principal no es suficiente razón para usar el elemento aparte. Pregúntese si el contenido dentro de la aparte se puede eliminar sin reducir el significado del contenido principal. Pullquotes es un ejemplo de contenido tangencialmente relacionado.

encabezamiento - Existe una diferencia crucial entre el elemento del encabezado y el uso general aceptado de encabezado (o cabezal). Por lo general, solo hay un encabezado o 'masthead' en una página. En HTML5 puedes tener tantos 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 dentro de la mayoría de sus secciones. La especificación describe el elemento de sección como "una agrupación temática del contenido, típicamente con un encabezado".

navegación - destinado a la información importante de navegación. Un grupo de enlaces agrupados no es una razón suficiente para usar el elemento NAV. La navegación en todo el sitio, por otro lado, pertenece a un elemento NAV.

pie de página - Parece que es una descripción de la posición, pero no lo es. Los elementos de pie de página contienen información sobre su elemento que contiene: quién lo escribió, los derechos de autor, los enlaces al 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 dentro de 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 en article, no se encuentra en la fuente anterior:

artículo -Utilizado para elementos que especifica contenido independiente y autónomo. Un artículo debe tener sentido por sí solo. Antes de reemplazar todos sus DIV con elementos del artículo, siempre pregúntese: "¿Es posible leerlo independientemente del resto del sitio web?"

Otros consejos

Desafortunadamente, las respuestas dadas hasta ahora (incluida la más votada) son "solo" sentido común, simplemente incorrecto o confuso en el mejor de los casos. Ninguna de palabras clave cruciales1 ¡surgir!

Escribí 3 respuestas:

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

Para comprender el papel de los elementos HTML discutidos aquí, debe saber que algunos de ellos secan el documento. Todos y cada uno de los documentos HTML pueden ser seccionado de acuerdo con el Algoritmo de esquema HTML5 con el propósito de crear un esquema — ⁠or⁠ - Tabla de contenido (TOC). El esquema generalmente no es 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:

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

Se pueden nombrar secciones:

  • <h*> SECCIONES creadas se nombran ellos mismos
  • <section|article|nav|aside> las secciones serán nombradas por el primero <h*> si hay uno
    • estas <h*> son los únicos que no crean secciones ellos mismos

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

  • el documento en sí con <body>
  • células de tabla con <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, y <figure>
  • nada más

title

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:
    • ser anidados el uno en el otro
    • Tome una noción diferente en un contexto o nivel de anidación diferente
  • <section>s son como capítulos de libros
    • generalmente tienen hermanos (¿tal vez en un documento diferente?)
    • juntos tienen algo en común, como capítulos en un libro
  • un autor, uno <article>, al menos en el nivel más bajo
    • Ejemplo estándar: un solo comentario de blog
    • Una entrada de blog en sí también es un buen ejemplo
    • Una entrada de blog <article> y su comentario <article>S también podría estar envuelto con un <article>
    • Es algo "completo", no una parte de una serie de similares
  • <section>s en un <article> son como capítulos en un libro
  • <article>s en un <section> son como poemas en un volumen (dentro de una serie)

Como hacer <header>, <footer> y <main> encaja?

  • ellos tienen cero influencia en seccionamiento
  • <header> y <footer>
    • te permiten marcar zonas de todos y cada uno sección
    • Incluso dentro de una sección puedes tenerlos varias veces
    • para 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 logotipo para esta sección
      • no tiene necesidad de 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> eso es)
    • Las subsecciones en sí mismas no tienen marcado para su parte principal
    • <main> puede incluso "ocultar" en algunas subsecciones del documento, mientras que los documentos <header> y <footer> no puede (ese marcado marcaría el encabezado/pie de página de esa subsección entonces)
      • Pero no está permitido en <article> secciones3
    • Ayuda a distinguir "lo real" del contenido no principal, no de pie, no principal de los documentos, si eso tiene sentido en su caso ...

1 A la mente viene: esquema, algoritmo, seccionamiento implícito
2 yo suelo <h*> como taquigrafía para <h1>, <h2>, <h3>, <h4>, <h5> y <h6>
3 tampoco es <main> permitido en <aside> o <nav>, pero eso no es sorprendente. - En efecto: <main> solo puede esconderse en (anidado) descendente <section> secciones o aparecer en el nivel superior, a saber <body>

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

El marcado para ese documento podría parecer lo 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 una lista aparte.

Sugeriría leer el W3 Página de wiki sobre estructurar html5:

<header> Se utiliza para contener el contenido de encabezado de un sitio. <footer>Contiene el contenido de 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
Sense si se sindica como un elemento RSS, por ejemplo, un elemento de noticia.

<section> Utilizado para agrupar diferentes artículos en diferentes
propósitos o sujetos, o para definir las diferentes secciones de un solo artículo.

<aside> Define un bloque de contenido relacionado con el contenido principal a su alrededor, pero no es central para el flujo de él.

Incluyen una imagen que he limpiado aquí:

html5

En código, esto parece así:

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

Exploremos algunos de los elementos HTML5 con más detalle.

<section>

los <section> El elemento es para contener diferentes áreas diferentes de funcionalidad o área de sujetos, 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 son publicaciones de blog. En otras páginas del sitio, este contenido cambiará. Es un elemento bastante genérico, pero aún tiene mucho más significado semántico que el viejo viejo <div>.

<article>

<article> está relacionado con <section>, pero es claramente diferente. Mientras <section> es para agrupar distintas secciones de contenido o funcionalidad, <article> es para contener piezas de contenido independientes individuales 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 sindicarse como elementos separados en un alimento RSS, entonces <article> es adecuado para marcarlos. En nuestro ejemplo, <section id="main"> Contiene entradas de blog. Cada entrada de blog sería adecuada para la sindicación como un elemento en un alimento RSS, y tendría sentido cuando se lea por sí solo, 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? Sin embargo, 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 secciones distintas, entonces también podría colocar secciones dentro de sus artículos. Podría parecer algo así:

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

<header> y <footer>

Como ya mencionamos anteriormente, el propósito del <header> y <footer> Elements es envolver el contenido de encabezado y pie de página, respectivamente. En nuestro ejemplo particular el <header> El elemento contiene una imagen de logotipo y el <footer> El elemento contiene un aviso de derechos de autor, pero podría agregar contenido más elaborado si lo desea. También tenga en cuenta que puede tener más de un encabezado y un pie de página en cada página, así como el encabezado de nivel superior y el pie de página que acabamos de discutir, también podría tener un <header> y <footer> elemento anidado dentro de cada uno <article>, en cuyo caso simplemente 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>

los <nav> El elemento es 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 enlaces patrocinados, no cuentan. Por supuesto, puede incluir encabezados y otros elementos de estructuración dentro del <nav>, pero no es obligatorio.

<aside>

Es posible que hayas notado que usamos un <aside> Elemento para marcar la segunda barra lateral: la que contiene los últimos conciertos y datos de contacto. Esto es perfectamente apropiado, como <aside> es para marcar piezas de información relacionadas con el flujo principal, pero no encaje directamente. ¡Y el contenido principal en este caso se trata de la banda! Otras buenas opciones para un <aside> Sería información sobre el autor de la (s) publicación (s) de blog, una biografía de banda o una discografía de banda con enlaces para comprar sus álbumes.

¿Dónde se va 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, seguramente? 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 será cuando use puramente un elemento para agrupar contenido para fines de estilo/visual. Un ejemplo común es usar un <div> Para envolver todo el contenido en 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 alrededor de todo el sitio web? O solo un div?

Ninguno de los dos. Para el estilo: use el <body>, ya está ahí. Para seccionar/semántica: Como se detalla en mi ejemplo html Su efecto es contrario a la utilidad. Los envoltorios adicionales al contenido ya envuelto no son mejoras, pero el ruido.


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

No, es la elección del autor dónde poner contenido típicamente resumido como "encabezado". Y si ese contenido de encabezado es claramente reconocible sin marcas adicionales, puede quedarse perfectamente sin <header>. Esta es también la elección del autor.


línea 23. ¿Es esta div ¿Correcto? o debe ser esto sección?

los <div> Probablemente esté mal. Depende de las intenciones: ¿es para el estilo solo que podría ser correcto? Si es para fines semánticos, es incorrecto: debería ser un <article> en cambio Como se muestra en mi otra respuesta. <article> También es correcto si es para el estilo y el seccionamiento combinado.

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


Línea 24. Divida la columna izquierda/derecha con un div.

¿No porque?


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

Sí, tiene sentido.


línea 26. ¿Es necesario poner su H1-Tag en el encabezamiento-¿etiqueta?

No solo <h*> El elemento probablemente nunca necesite ir en un <header> (Pero puede si lo desea), ya que ya está claro que es el encabezado de lo que está por venir. - Tendría sentido si eso <header> también abarcó un lema (marcado con <p>), por ejemplo.


línea 43. El contenido no está relacionado con el artículo principal, por lo que decidí que este es un sección Y no un aparte.

Es un malentendido que un <aside> tiene que ser "tangencialmente relacionado"Para el contenido. El punto es: usar un <aside> Si el contenido es solo "tangencialmente relacionado ”o no en absoluto!

Sin embargo, aparte de <aside> Ser una elección decente, <article> todavía podría ser mejor que un <section> Como "artículos calientes" y "nuevos elementos" no deben leerse como dos capítulos en un libro. Puede ir perfectamente a uno de ellos y no al otro como una clasificación alternativa de algo, no como dos partes de un todo.


línea 44. H2 sin que encabezamiento

Es genial.


línea 53. sección sin que encabezamiento

Bueno, no hay <header>, pero el <h2>-Meir hojas bastante claras en 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. encabezamiento con H2

Discutido ya.


línea 65. hmm, div o sección? O eliminar esto div y solo usa el artículo-etiqueta

¡Exactamente! Quitar el <div>.


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

Muy razonable.

De acuerdo a La explicación en mi respuesta "principal" El documento en cuestión debe marcarse de acuerdo con un esquema.

En las dos tablas siguientes 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 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 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
Esquema más mejor que
el original.
































































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

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

En vez 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 de CSS: cuerpo> Sección> Cabeza> H1, Cuerpo> Sección> Header> H2

Más, ... Línea 63: ¿Por qué envuelve el encabezado H2? Si no incluye más elemento dentro del encabezado, solo use un solo H2.
Tenga en cuenta que su estructura no es estilizar el documento, sino construir un documento autoexplicado.

Aplicar esto al resto del documento; Buena suerte ;)

¿Por qué no tener el elemento_1, item_2, etc. IDS en las etiquetas del artículo en sí mismas? Como esto:

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

Parece innecesario agregar los divs de envoltura. Los valores de identificación no tienen 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 los ID tengan ningún significado que sea independiente del contexto.

Además, en cuanto a su pregunta en la línea 26, no creo que elu003Cheader> La etiqueta se requiere allí, y creo que podría omitirlo ya que está solo en el div. Si estuviera en la lista principal de artículos, es posible que desee incluir elu003Cheader> Etiqueta solo por el bien de la consistencia.

  1. La sección debe usarse solo para envolver una sección dentro de un documento (como capítulos y similares)
  2. Con encabezamiento sin etiquetar. La etiqueta de encabezado representa un envoltorio para el encabezado de página y no debe confundirse con H1, H2, etc.
  3. ¿Qué div? :D
  4. Sí
  5. De las escuelas W3C:

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

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

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

Aquí está mi ejemplo en el que trabajo

enter image description here

<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

No creo que debas usar la etiqueta en el resumen de la noticia (líneas 67, 80, 93). Puede usar la sección o simplemente tener el Div Closing.

Un artículo debe poder mantenerse por sí mismo y seguir tener sentido o estar completo. Como es incompleto o simplemente un extracto, no puede ser un artículo, es más una sección.

Cuando hace clic en 'Leer más', la página posterior puede

Editar: Desafortunadamente tengo que corregirme.

Referirse a continuación https://stackoverflow.com/a/17935666/2488942 para un enlace a las especificaciones W3 que incluyen un ejemplo (a diferencia de las que observé anteriormente).

Pero entonces....Aquí es 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 del cuerpo

4.3.4.2 El elemento de sección

4.3.4.3 El elemento NAV

4.3.4.4 El elemento del artículo

....

me sugiere que section es un nivel más alto que article. Como se mencionó en esta respuesta section Agrupe contenido relacionado temáticamente. El contenido dentro de un artículo está en mi opinión relacionado temáticamente de todos modos, de ahí que esto, al menos para mí, también sugiere que section grupos en un nivel superior en comparación con article.

Creo que está destinado a usarse 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

„Línea 23. ¿Es este divio? ¿O debe ser esta una sección? "

Tampoco, hay un main Etiqueta para ese propósito, que solo se permite una vez por página y debe usarse como envoltura para el contenido principal (en contraste con una barra lateral o un encabezado en todo el sitio).

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

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

Quiero aclarar esta pregunta más precisamente, corrígeme si estoy equivocado, tomemos un ejemplo de Facebook Wall

1. La pareja se encuentra en la etiqueta "Sección", que la denota está separada de la página.

2. Todas las publicaciones se encuentran en la etiqueta "Artículo".

3. Luego tenemos una sola publicación, que se encuentra en la etiqueta "Sección".

3. Tenemos el encabezado "X User Publica esto" Para esto podemos usar la etiqueta de "encabezado".

4. Luego dentro de la publicación, tenemos tres sección, uno es imágenes/texto, botón de comment y cuadro de comentarios.

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

De acuerdo a La respuesta de Nathan, esto tiene mucho sentido (para las partes rojas y naranjas, tal vez podrías usar div's y/o header y footer respectivamente):

enter image description here

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top