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

546

Hay suficiente información sobre HTML5 en la web (y también sobre stackoverflow), pero ahora tengo curiosidad sobre 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 ustedes 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. en sectiontodo el sitio web? O solo a div?

línea 8. Cada uno sectioncomienza con un header?

línea 23. ¿Es esto divcorrecto? o debe ser esto un section?

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

línea 25. ¿Lugar correcto para la articleetiqueta?

línea 26. ¿Es necesario poner su h1etiqueta en la headeretiqueta?

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

línea 44. H2 sin header

línea 53. sectionsinheader

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

línea 64. headercon h2

línea 65. Hmm, divo section? O elimine esto divy solo use la articleetiqueta

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

html header article Bas van Dorst
fuente
456bereastreet.com/archive/201103/…
Christophe Roussy el

Respuestas:

486

En realidad, tienes bastante 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 / debe usarse (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's con elementos de sección, siempre pregúntese: "¿Está todo el contenido relacionado?"

aparte : se utiliza para contenido relacionado tangencialmente. El hecho de que parte del contenido aparezca a la izquierda o la derecha del contenido principal no es razón suficiente para usar el elemento aparte. Pregúntese si el contenido dentro de un lado puede eliminarse sin reducir el significado del contenido principal. Los pullquotes son un ejemplo de contenido relacionado tangencialmente.

encabezado : existe una diferencia crucial entre el elemento de encabezado y el uso general aceptado de encabezado (o encabezado). 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 de contenido, generalmente con un encabezado".

nav : destinado a la información de navegación principal. 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 - 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 el elemento que lo contiene: quién lo escribió, derechos de autor, enlaces a contenido relacionado, etc. Mientras que generalmente tenemos un pie de página para un documento completo, HTML5 también nos permite tener un pie de página dentro de las secciones.

Fuente : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

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

artículo : se utiliza para el elemento que especifica contenido independiente y autónomo. Un artículo debería tener sentido por sí solo. Antes de reemplazar todos los div por elementos del artículo, siempre pregúntese: "¿Es posible leerlo independientemente del resto del sitio web?"

Nathan JB
fuente
68
Para mí es un enigma cómo esta respuesta obtuvo tantos votos: no habla de <article>elementos, no contrasta los elementos mencionados, ni los agrupa. ¡La respuesta no ofrece "mejores prácticas", ni responde a ninguna de las preguntas explícitas del OP!
Robert Siemer
2
@RobertSiemer Para mí también es un acertijo cómo su comentario obtuvo 24 votos a favor y la pregunta solo 6 votos a favor ...
Veger
@RobertSiemer porque se ve genial, ¿qué te parece? No tenía idea de que era malo hasta revisar su comentario y afirmarlo con la siguiente respuesta.
Det
238

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

Escribí 3 respuestas:

  1. Esta explicación (comience 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 seccionan el documento. Todos y cada uno de los documentos html se pueden seccionar de acuerdo con el algoritmo de esquema HTML5 con el fin de crear una 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.

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

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

Las secciones se pueden nombrar:

  • <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". Las secciones que contengan son privadas para ellos:

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

título

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 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
  • 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 sus comentarios <article>también se pueden envolver con un<article>
    • es algo "completo", no parte de una serie de 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 hacer <header>, <footer>y <main>en todo esto?

  • 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
    • 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 necesita 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>es decir)
    • Las subsecciones en sí mismas no tienen marcado para su parte principal
    • <main>incluso puede "esconderse" en algunas subsecciones del documento, mientras que el documento <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 las <article>secciones 3
    • ayuda a distinguir "lo real" del contenido sin encabezado, sin pie de página y no principal del documento, si eso tiene sentido en su caso ...

1 a la mente viene: contornos, algoritmo, seccionamiento implícito
2 Yo uso <h*>como forma abreviada de <h1>, <h2>, <h3>, <h4>, <h5>y <h6>
3 no está <main>permitido en <aside>o <nav>, pero eso es de ninguna sorpresa. - En efecto: <main>solo se puede ocultar en <section>secciones descendentes (anidadas) o aparecer en el nivel superior, es decir<body>

Robert Siemer
fuente
33
La respuesta es como un poema en sí. Mi parte favorita es: ¡la sections in an article are like chapters in a book, articles in a section are like poems in a volumemejor y más intuitiva articlevs sectionexplicación que he visto!
Sergey Lukin
1
Eso es un amplio conocimiento sin repeticiones resumido en algunos puntos. ¡Gracias por compartir! A veces, en SO, la mejor respuesta no es la aceptada ni la mejor calificada.
3
Sé que es un cliché, pero "¡Esta debería ser la respuesta aceptada!". Notas al pie y todo! ¡Gracias!
Eugene el
Eugene y ft o tienen razón. Recuerde que puede votar las respuestas incompletas e incorrectas mientras vota esta. No es un delito para sus autores, es el costo de garantizar que las mejores respuestas se vean primero. Además del comentario de Robert sobre la respuesta elegida, tampoco me gusta porque plagió (incompleto) el contenido de otras partes de la web.
IAmNaN
Esta respuesta muy detallada y dejó en claro muchas cosas, ¡gracias!
Alaeddine
112

Los elementos div se pueden reemplazar con los nuevos elementos: encabezado, navegación, sección, artículo, a un lado y pie de página.

El marcado para ese documento podría tener el siguiente aspecto:

<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 .

cilerler
fuente
25
Esta estructura repetitiva no vale el espacio en esta página. 1) Ninguno de los elementos HTML mencionados está vinculado a ninguna posición en un documento. 2) Implica falsamente que <header> y <footer> son elementos a nivel de documento. 3) Implica falsamente que <section> está destinado como <article> -child solamente. @DanDascalescu
Robert Siemer
2
No podría estar más de acuerdo @RobertSiemer. Esta sigue siendo una de las ideas erróneas más comunes sobre los elementos HTML5 y se está convirtiendo en una desventaja semántica para nuestro querido lenguaje de marcado.
kano
@RobertSiemer Re: 2), ¿No puede ser <header>y <footer>ser elementos a nivel de documento, así como dentro de las <section|article|nav|aside>secciones?
Flimm
1
@Flimm, sí pueden. Mi punto era: la respuesta no es incorrecta, simplemente no responde mucho.
Robert Siemer
63

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 un contenido independiente que tendría
sentido si se distribuye como un elemento RSS, por ejemplo, una noticia.

<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 que no es central para el flujo del mismo.

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 <section>elemento es para contener distintas áreas de funcionalidad o áreas temáticas, 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". "principal" 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 semántico más que el viejo <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 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 sí mismo y tendría sentido distribuirlos como elementos separados en una fuente 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 sindicarse como un elemento en una fuente RSS, y tendría sentido cuando se lea por sí solo, fuera de contexto, por <article> lo tanto, es perfecta 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 los 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 poner secciones dentro de sus artículos. Podría verse más o menos 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 de los elementos <header>y <footer>es ajustar el contenido del encabezado y pie de página, respectivamente. En nuestro ejemplo particular, el <header>elemento contiene una imagen de logotipo, y el <footer>elemento contiene un aviso de copyright, pero puede agregar contenido más elaborado si lo desea. También nota que se puede tener más de un encabezado y pie de página en cada página -, así como la cabecera de nivel superior y el pie que hemos discutido, que podría también tener una <header>y <footer>elemento anidado dentro de cada uno <article>, en cuyo caso se acaba de aplicar a esa artículo 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 <nav>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 los enlaces patrocinados, no cuentan. Por supuesto, puede incluir encabezados y otros elementos estructurantes dentro del <nav>, pero no es obligatorio.

<aside>

Es posible que haya notado que utilizamos un <aside>elemento para marcar la segunda barra lateral: la que contiene los últimos conciertos y detalles de contacto. Esto es perfectamente apropiado, como lo <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 sobre la banda! Otras buenas opciones para un <aside>sería la información sobre el autor de las publicaciones del blog, una biografía de la banda o una discografía de la banda con enlaces para comprar sus álbumes.

¿A dónde se va eso <div>?

Entonces, con todos estos nuevos elementos geniales para usar en nuestras páginas, ¿los días de los humildes <div>están contados, sin duda? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Debería usarlo cuando no haya otro elemento más adecuado disponible para agrupar un área de contenido, lo que a menudo ocurrirá cuando 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.

Justin
fuente
1
Sin embargo, para las secciones anidadas, ¿no tendría más sentido usar en <section class="summary">lugar de <section id="summary">? Si tenía varios artículos en una página, el último método daría como resultado identificaciones duplicadas en la misma página, un paso en falso HTML. ¿Derecha?
JP Lew
Sí, probablemente usaría clases en ese caso.
Justin
1
¿No deberían envolverse todas las etiquetas que mencionó en un "principal" que luego se envuelve en el "cuerpo"?
Francisco Aguilera
1
La mainetiqueta sería buena para agregar. Dónde colocarlo se decidiría en función del contenido único de la página. En este ejemplo, creo que lo pondría alrededor del centro section. Más información: w3.org/TR/2012/WD-html-main-element-20121217 "La sección de contenido principal de un documento incluye contenido exclusivo de ese documento y excluye contenido que se repite en un conjunto de documentos como el sitio enlaces de navegación, información de copyright, logotipos y pancartas del sitio y formularios de búsqueda ".
Justin
sigue siendo tan ambiguo como lo es la documentación de MDN
oldboy
23

[ explicaciones en mi "respuesta principal" ]

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

Ninguno. Para el estilo: use <body>, ya está allí. Para seccionamiento / semántica: como se detalla en mi HTML de ejemplo, su efecto es contrario a la utilidad. Las envolturas adicionales para contenido ya envuelto no son 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 generalmente se resume como "encabezado". Y si el contenido del encabezado es claramente reconocible sin marcas adicionales, puede quedar perfectamente sin él <header>. Esta es también la elección del autor.


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

El <div>probablemente está mal. Depende de las intenciones: es solo para diseñar, podría ser correcto. Si es para propósitos semánticas que es un error: debe ser un <article>lugar como se muestra en mi otra respuesta . <article>también es correcto si es para el estilo y el corte combinado.

<section>se ve mal aquí, ya que no hay secciones similares antes o después de esta, como los 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 ?

Si, tiene sentido.


línea 26. ¿Es necesario poner su etiqueta h1 en la etiqueta del encabezado ?

No. Un <h*>elemento solitario probablemente nunca necesite entrar en un <header>(pero puede hacerlo si lo desea) ya que está claro que es el título 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. El contenido no está relacionado con el artículo principal, así que decidí que esta es una sección y no un aparte .

Es un malentendido que un <aside>tiene que estar "tangencialmente relacionado " 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 <aside>ser una opción decente, <article>aún podría ser mejor que una, <section>ya que los "artículos populares" y los "artículos nuevos" no deben leerse como dos capítulos en un libro. Puedes 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 encabezado

Es genial.


línea 53. sección sin encabezado

Bueno, no hay <header>, pero el <h2>encabezado 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. encabezado con h2

Discutido ya.


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

¡Exactamente! Eliminar el <div>.


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

Muy razonable.

Robert Siemer
fuente
Dividir una respuesta en 3 incompletas no es útil.
Christian Strempfer
66
@ChristianStrempfer En realidad es útil, ya que muchas personas no vienen aquí para leer las respuestas específicas a preguntas específicas del OP (esta respuesta), sino para leer más sobre el tema en cuestión (mi respuesta principal). - Creo que con una gran respuesta tldr ni siquiera obtendría los votos que tengo solo en mi respuesta principal. - ¿Que sugieres?
Robert Siemer
Sugiero fusionarlos en una sola respuesta. Los votos de colección no son un buen argumento para dividirlos. Especialmente la tercera respuesta no puede estar sola, ya que estás refiriendo tu respuesta principal.
Christian Strempfer
@ChristianStrempfer Eso sería demasiado largo para mi gusto. - Estoy trabajando para mejorar las tablas, sin embargo ...
Robert Siemer
20

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 muestro:

  • el HTML original y su esquema
  • un posible esquema previsto y el HTML que hace eso

original html (shortened)
<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>

original html relevant for 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>












































resulting outline
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)


The outline of the original is
definitively not what was intended.

































































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>

possible intended outline
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










































































modified 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>``

resulting outline
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)


The modified HTML reflects the
intended outline way better than
the original.
































































Robert Siemer
fuente
Gracias por una excelente respuesta detallada, es muy esclarecedor. Quiero aprender más sobre el tema, así que espero que pueda explicar algunas de las opciones, que me parecen extrañas. Los publicaré como comentarios individuales.
Gorn
1. encabezado a un lado> div [id = logo] parece ser irrelevante para mí. En la actualidad es un encabezado, pero semánticamente no. El idioma div es quizás algún tipo de navegación y el logotipo puede ser una especie de encabezado para todo el sitio, pero seguramente no para la página.
Gorn
2. <ARTICLE id = main> parece realmente solo presentacional. No contiene nada relacionado dentro. (Lo mismo ocurre con <ARTICLE id = main-right> pero es mucho más defendible allí (como "news and hot")). Sugiero usar div o main en el peor de los casos.
Gorn
3. <ARTICLE id = news-items> me parece un caso típico en el que usaría a un lado. No tiene nada que ver con el artículo principal, es solo una fuente de noticias. Y estoy de acuerdo en que contiene noticias como artículos individuales "pequeños".
Gorn
1
Considere editar su propuesta, su respuesta "teórica" ​​está muy bien escrita, pero creo que la mayoría de los principiantes solo mirarán el ejemplo del código y podrían estar realmente confundidos, porque no está en línea con la parte teórica.
Gorn
17

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 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 estilizar el documento, sino construir un documento autoexplicado.

Aplicar esto al resto del documento; Buena suerte ;)

Covi
fuente
44
@superUntitled <hgroup> ya no es parte de HTML5
bradley.ayers
¿Debe role = "banner" estar en el h1 mismo, no en todo el encabezado? De esa manera, apunta a una sola pieza de texto que anunciaría un lector de pantalla, no a un montón de HTML.
enigment
11
Usar h1 y h2 para el logotipo y el idioma no tiene sentido para mí. ¿El pequeño y pequeño botón de idioma a la derecha debería ser el segundo contenido / información más importante en esta página? Y si coloca su logotipo dentro de un h1, un robot de búsqueda descubrirá que el contenido principal de cada página es el mismo (bastante aburrido en mi mente). También vea la respuesta @MeanEYE para el uso de h1 y h2. Aparte de eso, las ID son de uso no semántico RDFa si necesita semántica. Tu camino hace que los selectores CSS sean más lentos: developers.google.com/speed/docs/best-practices/…
F Lekschas
10

¿Por qué no tener los ID de 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 divisores 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 siempre sea el elemento_1, solo el elemento_1 dentro del contexto de la página actual. No se requiere que las 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 se requiera la etiqueta <header> 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 razones de coherencia.

Matt Browne
fuente
2
Solo estaba siguiendo el ejemplo original y mostrando cómo lograr lo mismo sin divisiones innecesarias. Las ID podrían estar allí por varias razones ... por un lado, podría haber enlaces de anclaje apuntando a ellas.
Matt Browne
5
  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 encabezado : NO. La etiqueta de encabezado representa un contenedor para el encabezado de página y no debe confundirse con H1, H2, etc.
  3. Cual div? :RE
  4. si
  5. De las escuelas del W3C:

    La etiqueta define 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. representan los títulos de documentos. H1 es el más importante

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

MeanEYE
fuente
1
¡Gracias por tus respuestas! En el punto 3; Lo siento, los números de línea no estaban bien. Debe ser line_23 en lugar del punto 3; Ver también los cambios de línea en mi publicación.
Bas van Dorst
Sí, hago lo mismo en mis sitios. En general, los DIV se deben utilizar para crear la estructura del sitio. Introducir encabezado, pie de página y etiquetas similares en HTML5 es solo para hacer las cosas un poco más fáciles de leer. Se comportan de la misma manera que DIV.
MeanEYE
3
Revisa tus fuentes. El sitio de las escuelas w3c no especifica que articlenecesariamente sea de una fuente externa . w3schools.com/html5/tag_article.asp
chharvey
Hm, ni siquiera pensé que ese artículo fuera para ser usado desde una fuente externa. Esta es una vieja respuesta, apenas puedo recordar de qué se trataba. :)
MeanEYE
Estoy de acuerdo con el n. ° 1. Creo que esos elementos SECTION tienen más sentido como ASIDEs.
Andy
3

Aquí está mi ejemplo en el que trabajo

ingrese la descripción de la imagen aquí

Ivan
fuente
2 
<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

Юрий Светлов
fuente
1

No creo que deba usar la etiqueta en el resumen de las noticias (líneas 67, 80, 93). Puede usar la sección o simplemente tener el div que lo encierra.

Un artículo debe ser capaz de mantenerse por sí mismo y tener 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

conordarcy
fuente
1

EDITAR: Desafortunadamente tengo que corregirme.

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

Pero entonces ... Aquí hay un buen artículo al respecto 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 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 sectiones un nivel más alto que article. Como se menciona en esta respuesta, se section agrupan los contenidos relacionados 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 los sectiongrupos en un nivel superior en comparación con 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
pandita
fuente
0

Quiero aclarar esta pregunta con mayor precisión, corregirme si me equivoco. Tomemos un ejemplo del muro de Facebook.

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

2. Todas las publicaciones vienen bajo la etiqueta "artículo".

3. Luego tenemos una sola publicación, que viene bajo la etiqueta "sección".

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

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

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

Flicks Gorger
fuente
0

Según la respuesta de Nathan , esto tiene mucho sentido (para las partes roja y naranja, tal vez podría usar div's y / o header y footerrespectivamente):

ingrese la descripción de la imagen aquí

Alejandro Nava
fuente