Pregunta

El intentar conseguir mi cabeza alrededor de los nuevos elementos semánticos en HTML5.

¿Tiene un <section> pertenecen dentro de un <article> o es el otro alrededor de camino? Es más, ¿importa?

Estoy mirando la re-estructuración de un blog de WordPress.

¿Fue útil?

Solución

Desde el HTML5 especificaciones :

  

El elemento section representa una sección documento o aplicación genérica. Una sección, en este contexto, es una agrupación temática de contenido, típicamente con una cabecera y, posiblemente, un pie de página.

y

  

El elemento article representa una sección independiente de un documento, una página o sitio. Esto podría ser un mensaje del foro, un artículo de una revista o un periódico, una entrada de blog, un comentario enviado por el usuario, o cualquier otro elemento independiente del contenido.

Así que yo diría que ambos elementos section y article pueden contener otro elemento, si es apropiado. Creo que su diagrama tiene sentido, además de los elementos de la sección anidados:

  

El elemento sección no es un elemento de contenedor genérico. Cuando se necesita un elemento para peinar propósitos o como una conveniencia para secuencias de comandos, se anima a los autores a utilizar el elemento div en su lugar. Una regla general es que el elemento de sección es adecuada sólo si el contenido del elemento se enumeran explícitamente en el contorno del documento.

Tal vez utilice un <div> para la exterior?

Otros consejos

En el W3 wiki página acerca de la estructuración HTML5 , que dice:

  

<section> : Se utiliza para ninguno de los grupos diferentes artículos en diferentes propósitos o   sujetos, o para definir las distintas secciones de un solo artículo.

Y a continuación, muestra una imagen que limpié:

introducir descripción de la imagen aquí

También es importante saber cómo utilizar la etiqueta <article> (desde el mismo enlace W3 arriba):

  

<article> se relaciona con <section>, pero es claramente diferente.   Mientras que <section> es para agrupar secciones distintas de contenido o   funcionalidad, <article> es para contener individuales relacionados   piezas independientes de contenido, como entradas de blog individuales, videos,   imágenes o noticias. Piénsalo de esta manera - si usted tiene un número de   artículos de contenido, cada uno de los cuales sería adecuado para la lectura en su   poseer, y que tendría sentido para sindicar como partidas separadas en un RSS   alimentación, entonces <article> es adecuado para el marcado para arriba.

     

En nuestro ejemplo, <section id="main"> contiene las entradas de blog. cada blog   entrada sería adecuado para la distribución como un elemento en un feed RSS, y   tendría sentido si se lee por su cuenta, 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>
  

¿eh simple? Tenga en cuenta sin embargo que usted puede también las secciones de nidos en el interior   artículos, donde tiene sentido que lo hagan. Por ejemplo, si cada uno de   estas entradas de blog tiene una estructura consistente de secciones distintas, a continuación,   se puede poner secciones dentro de sus artículos también. Podría parecer   algo como esto:

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

  <section id="content">
  </section>

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

Yo usaría div para la exterior, y div para la interna, a menos que tenga un encabezado directamente dentro de la sección interior.

Ta

Rich

http://html5doctor.com/the-section-element/ más información.

IMOO, que debe ser simple, tan simple como lo que la gente normal se dan por sentado. Si un simple clientes Nombre de etiqueta confunde, se trata de una falla. Para mí:

  • Un <article> es un artículo . Las personas comparten artículos. Cuando se dice que algo es un artículo, voy a esperar que debe tener un título , y tal vez un pequeño resumen así, para que pueda decidir leerlo o no. Si es interesante, voy a compartir a mis amigos. Es autónomo.

  • A <section> es una sección . Es una parte de cosas relacionadas. Básicamente, tendrá otras secciones para obtener el cuadro completo.

¿Por qué se pone un <section> dentro del <body> Ah, porque es parte del cuerpo; parte de mi página web. Voy a poner mis artículos dentro de esta parte.

¿Por qué se pone un <section> dentro de un <section>? porque es parte de que sección.

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