Mejores prácticas de HTML5; elementos de sección / encabezado / aparte / artículo

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 sección / encabezados / artículo son nuevas, y todos tienen opiniones diferentes sobre cuándo/dónde debe usar estas etiquetas. Entonces, ¿qué piensan del siguiente diseño y código?

Diseño del sitio web

  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 section comienza con un header?

Línea 23. Ser este div derecho? ¿o debe ser esto un section?

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

Línea 25. Lugar correcto para la etiqueta article?

Línea 26. ¿Es necesario poner su h1-tag en la header-tag?

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

Línea 44. H2 sin header

Línea 53. section sin header

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

Línea 64. header con h2

Línea 65. Hmm, div o section? O elimine este div y solo use el article-tag

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

Author: Robert Siemer, 2011-01-24
Source

16 answers

En realidad, tienes razón cuando se trata de encabezado/pie de página. Aquí hay información básica sobre cómo se puede/debe 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 div con elementos de sección, siempre pregúntese: "Es todo el contenido ¿emparentados?"

aparte – Se utiliza para contenido relacionado tangencialmente. Solo porque algún contenido aparezca a la izquierda o a la derecha del contenido principal no es razón suficiente para usar el elemento a un lado. Pregúntate si el contenido dentro del apartado puede eliminarse sin reducir el significado del contenido principal. Las Pullquotes son un ejemplo de contenido tangencialmente relacionado.

encabezado – Hay una diferencia crucial entre el elemento header y el general uso aceptado de la cabecera (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". Puedes usar un encabezado en cualquier sección de tu sitio. De hecho, probablemente deberías usar un encabezado dentro de la mayoría de tus secciones. La especificación describe el elemento section como " una agrupación temática de contenido, típicamente con un encabezado."

nav – Destinado a mayores información de navegación. Un grupo de enlaces agrupados no es razón suficiente para usar el elemento nav. La navegación en todo el sitio, por otro lado, pertenece a un elemento de navegación.

pie de página – Suena como una descripción de la posición, pero no. Los elementos de pie de página contienen información sobre su elemento de contenido: quién lo escribió, derechos de autor, enlaces a contenido relacionado, etc. Mientras que por lo general tenemos un pie de página para un documento completo, HTML5 nos permite también tener pie de página dentro apartado.

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 de article, que no se encuentra en la fuente anterior:

artículo – Se utiliza para el elemento que especifica contenido independiente y autónomo. Un artículo debe tener sentido por sí solo. Antes de reemplazar todos sus div con elementos de artículo, siempre pregunte usted mismo: "¿Es posible leerlo independientemente del resto del sitio web?"

 458
Author: Nathan J. Brauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-26 10:02:28

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

Escribí 3 respuestas:

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

Para entender el papel de los elementos html discutidos aquí hay que saber que algunos de ellos seccionen el documento. Todos y cada uno de los documentos html pueden seccionarse de acuerdo con el algoritmo de esquema HTML5 con el propósito de crear un esquema o tabla de contenidos (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.

Puede crear secciones con exactamente estos elementos y nada else:

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

Las secciones pueden ser nombre:

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

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

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

titular

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 puede:
    • estar anidados el uno en el otro
    • tomar una noción diferente en un contexto diferente o nivel de anidamiento
  • <section>s son como capítulos de libros
    • por lo general tienen hermanos (tal vez en un documento diferente?)
    • juntos tienen algo en común, como capítulos en un libro{[70]]}
  • 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í es también un buen ejemplo
    • una entrada de blog <article> y sus comentarios <article> también podrían estar envueltos con un <article>
    • es algo "completo", no una parte en una serie de{[70] similares]}
  • <section> s en un <article> son como capítulos en un libro
  • <article> s en a <section> son como poemas en un volumen (dentro de una serie)

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

  • tienen cero influencia en seccionado
  • <header> y <footer>
    • te permiten marcar zonas de todas y cada sección
    • incluso dentro de una sección puedes tenerlos varias veces{[70]]}
    • 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
      • puede incluso estar por encima de un <header>
  • <main>
    • solo se permite una vez
    • marca la parte principal de la sección de nivel superior (es decir, el documento, <body> que es)
    • las subsecciones por sí mismas no tienen marcado para su parte principal
    • <main> puede incluso "ocultar" en algunas subsecciones de la documento, mientras que el documento <header> y <footer> no pueden (ese marcado marcaría el encabezado / pie de página de esa subsección entonces)
      • pero no está permitido en <article> secciones 3
    • ayuda a distinguir "lo real" del contenido no-encabezado, no-pie de página, no-principal del documento, si eso tiene sentido en su caso...

1 a la mente viene: esquema, algoritmo, implícito corte
2 yo uso <h*> como fórmula para <h1>, <h2>, <h3>, <h4>, <h5> y <h6>
3 tampoco es <main> permitido en <aside> o <nav>, pero de lo que no hay sorpresa. - En efecto: <main> solo puede ocultarse en (anidadas) secciones descendentes <section> o aparecer en el nivel superior, a saber <body>

 185
Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-25 05:11:54

Los elementos div se pueden reemplazar con los nuevos elementos: header, nav, section, article, aside y footer.

El marcado para ese documento podría ser el siguiente: 

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

Puedes encontrar más información en este artículo en Una Lista Aparte.

 113
Author: cilerler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-05 08:38:01

Sugiero 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 independiente de contenido que haría
sentido si sindicado como un elemento RSS, por ejemplo, una noticia.

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

<aside> Define un bloque de contenido que está relacionado con el principal contenido a su alrededor, pero no central para el flujo de la misma.

Que incluyen una imagen que he limpiado aquí:

html5

En código, esto se ve 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>

El elemento <section> es para contener diferentes áreas de área de funcionalidad o temas, o dividir un artículo o historia en diferentes secciones. Así que en este caso: "sidebar1" contiene varios enlaces útiles que persistirán en cada página del sitio, tales como "subscribe to RSS" y "Buy music from store". "main" contiene el contenido principal de esta página, que es entradas de blog. En otras páginas de la sitio, este contenido cambiará. Es un elemento bastante genérico, pero todavía tiene mucho más significado semántico que el viejo <div>.

<article>

<article> está relacionado con <section>, pero es claramente diferente. Considerando que <section> es para agrupar distintas secciones de contenido o funcionalidad, <article> es para contener individuos relacionados piezas de contenido independientes, como publicaciones de blog individuales, videos, imágenes o noticias. Piense en ello de esta manera - si usted tiene un número de elementos de contenido, cada uno de que sería adecuado para leer en su propio, y tendría sentido para sindicar como elementos separados en un RSS alimentación, entonces <article> es adecuado para marcarlos. En nuestro ejemplo, <section id="main"> contiene entradas de blog. Cada entrada del blog sería adecuado para la distribución como un elemento en un feed RSS, y tener sentido cuando se lee 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 artículo, donde tiene sentido hacerlo. Por ejemplo, si cada uno de estas publicaciones de blog tienen una estructura consistente de secciones distintas, entonces también puedes poner secciones dentro de tus artículos. Podría parecer algo como esto:

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

<header> y <footer>

Como ya hemos mencionado anteriormente, el propósito de la <header> y <footer> elements es envolver el contenido de 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 copyright note, 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 pie de página en cada página - así como el encabezado y pie de página de nivel superior que acabamos de discutir, también podría tener un elemento <header> y <footer> anidado dentro de cada uno <article>, en cuyo caso solo se aplicarían a ese particular artículo. Añadiendo 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> es para marcar los enlaces de navegación u otros construcciones (por ejemplo, un formulario de búsqueda) que le llevará a diferentes páginas de el sitio actual, o diferentes áreas de la página actual. Otros enlaces, tales como enlaces patrocinados, no cuentan. Por supuesto, puede incluir encabezados y otros elementos estructurantes dentro de la <nav>, pero es no es obligatorio.

<aside>

Es posible que haya notado que usamos un elemento <aside> para marcar el 2a barra lateral: la que contiene últimos conciertos y detalles de contacto. Este es perfectamente apropiado, ya que <aside> es para marcar piezas de información que está relacionada con el flujo principal, pero que no encaja en él directamente. Y el contenido principal en este caso es todo sobre la banda! Otras buenas opciones para un <aside> sería información sobre el autor de la(s) entrada (s) de blog, biografía de una banda o discografía de una banda con enlaces para comprar sus álbumes.

¿Dónde queda eso <div>?

Así, con todos estos grandes elementos nuevos para usar en nuestras páginas, los días de los humildes <div> están contados, ¿no? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Usted debe usarlo cuando no hay otro elemento más adecuado disponible para agrupar un área de contenido, que a menudo será cuando se está utilizando puramente un elemento para agrupar contenido conjunto para propósitos de estilo / visuales. 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 para todo el contenido.

 59
Author: Justin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-29 17:24:44

[explicaciones en mi "respuesta principal"]

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

Ninguno. Para el estilo: utilice el <body>, ya está allí. Para seccionado / semántica: como se detalla en mi ejemplo HTML su efecto es contrario a la utilidad. Envoltorios adicionales a contenido ya envuelto no es una mejora, pero el ruido.


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

No, es la elección del autor dónde poner el contenido generalmente resumido como "encabezado". Y si ese contenido de 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 una sección?

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

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


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

No. ¿Por qué?


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

Sí, tiene sentido.


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

No. Un elemento <h*> solitario probablemente nunca necesita 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 abarcara un eslogan (marcado con <p>), por ejemplo.


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

Es un malentendido que un <aside> tiene que ser "tangencialmente relacionado" con el contenido alrededor. El punto es: use un <aside> si el contenido solo está "tangencialmente relacionado" o no en absoluto!

Sin embargo, aparte de que <aside> es una opción decente, <article> aún podría ser mejor que un <section> ya que "artículos calientes" y "artículos nuevos" no deben leerse como dos capítulos en un libro. Usted puede ir perfectamente para 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.


línea 53. sección sin encabezado

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


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

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


línea 64. header con h2

Ya discutido.


línea 65. Hmm, div o sección? O elimine este div y solo use el article - tag

¡Exactamente! Eliminar el <div>.


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

Muy razonable.

 20
Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:48

De acuerdo con 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 outline
<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 de la original es
definitivamente no lo que era destinado.

































































La siguiente tabla muestra mi propuesta para un versión mejorada. Utilizo el siguiente marcado:

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

posible intención esquema
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










































































modificado html
<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 código HTML modificado refleja la
esquema previsto mucho mejor que
el original.
































































 19
Author: Robert Siemer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:55:00

El principal error: Tienes "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 más elementos dentro del encabezado, solo use un solo h2.
Tenga en cuenta que su estructura no es para estilizar el documento, sino para construir un documento auto-explicado.

Aplica esto al resto del documento; Buena suerte ;)

 17
Author: Covi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-08 23:19:25

¿Por qué no tener el item_1, item_2, etc. ¿Identificaciones en las etiquetas del artículo? Así: 

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

Parece innecesario agregar los divs de envoltura. Los valores ID no tienen significado semántico en HTML, así que creo que sería perfectamente válido hacer esto-no estás diciendo que el primer artículo es 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.

También, en cuanto a su pregunta en la línea 26, yo no creas que la etiqueta

es necesaria allí, y creo que podrías omitirla ya que está por sí sola en el div "main-left". Si estuviera en la lista principal de artículos, es posible que desee incluir la etiqueta
solo por el bien de la coherencia.

 10
Author: Matt Browne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-20 16:40:31
  1. La sección debe usarse solo para envolver una sección dentro de un documento (como capítulos y similares)
  2. Con encabezado etiqueta: NO. La etiqueta de encabezado representa un envoltorio para el encabezado de la página y no debe confundirse con H1, H2, etc.
  3. ¿Qué div? : D
  4. Sí
  5. De las Escuelas del W3C:

    La etiqueta define el contenido externo. El contenido externo podría ser un artículo 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. representar títulos de documentos H1 siendo el más importante

No respondí a otras porque es un poco difícil adivinar a qué se refería. Si hay más preguntas, por favor hágamelo saber.

 5
Author: MeanEYE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-24 11:09:45

Este es mi ejemplo en el que trabajo

introduzca la descripción de la imagen aquí

 3
Author: Ivan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-24 12:20:53

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

Un artículo debe ser capaz de mantenerse por sí mismo y seguir teniendo sentido o estar completo. Como es incompleto o simplemente 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

 1
Author: conordarcy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-19 11:38:23

EDITAR: Desafortunadamente tengo que corregirme.

Refiérase a continuación https://stackoverflow.com/a/17935666/2488942 para un enlace a las especificaciones de w3 que incluyen un ejemplo (a diferencia de los que he visto anteriormente).

Pero entonces.... Aquí es un buen artículo sobre ello gracias a @Fez.

Mi respuesta original fue:

La forma en que se estructuran las especificaciones de 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 nav

4.3.4.4 El elemento article

....

Me sugiere que section es un nivel más alto que article. Como se menciona en esta respuesta section agrupa contenido relacionado temáticamente. El contenido dentro de un artículo está en mi opinión relacionado temáticamente de todos modos, por lo tanto, 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 ser utilizado como esto: 

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
 1
Author: pandita,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:48

"línea 23. ¿Este div es correcto? ¿o debe ser una sección?"

Ninguno – hay una etiqueta main 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 de todo el sitio).

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

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

 1
Author: feeela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-27 13:08:24 
<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

 1
Author: Юрий Светлов,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-28 01:40:35

Quiero aclarar esta pregunta con más precisión, corrígeme si me equivoco Tomemos un ejemplo del muro de Facebook

1.La pared viene bajo la etiqueta "sección", que denota que está separada de la página.

2.Todos los mensajes vienen bajo la etiqueta" artículo".

3.Luego tenemos un solo post, que viene bajo la etiqueta "sección".

3.Tenemos el encabezado "X user post this" para esto podemos usar la etiqueta" heading".

4.Luego, dentro del post tenemos tres secciones, una es Imágenes / texto, me gusta-compartir-comentar botón y cuadro de comentarios.

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

 0
Author: Flicks Gorger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-14 17:32:18

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

introduzca la descripción de la imagen aquí

 0
Author: alejnavab,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:45