semantico - semantica html5 ejemplos
¿Cómo usar correctamente los elementos semánticos HTML en un blog? (2)
Leí mucha información sobre w3schools . Define <section> como:
El elemento <section> define una sección en un documento. [...] Una página de inicio normalmente se puede dividir en secciones para la introducción, el contenido y la información de contacto.
Entonces, básicamente, ¿una <section> puede ser un <header> (introducción) y un <footer> (información de contacto)?
El elemento <header> especifica un encabezado para un documento o sección.
Entonces, ¿podría poner un <header> dentro de una <section> ? Pero una <section> se puede usar "para la introducción", ¿entonces básicamente es un encabezado? La misma historia con el elemento <footer> .
Preguntas
¿Cómo se supone que debo usar los elementos?
¿Debo usar
<header>para el título de un<article>o para la parte de mi sitio web que contiene el logotipo y la navegación?¿Debo usar
<footer>para los datos de un<article>o para la parte de mi sitio web que contiene la navegación de copyright y pie de página?¿Debería poner una etiqueta
<section>alrededor de mis etiquetas<article>?
Digamos que tengo un sitio web simple, que contiene un logotipo, navegación, varios artículos y texto de pie de página. ¿Cuál sería la mejor manera de hacer el marcado?
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<header>
<img src="logo.png" alt="My logo!">
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header><h2>Article 1 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
<article>
<header><h2>Article 2 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
<article>
<header><h2>Article 3 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
</section>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
Si hago eso, el Nu HTML Checker dice:
Advertencia: la sección carece de encabezado. Considere usar elementos h2-h6 para agregar encabezados de identificación a todas las secciones.
No quiero que <h1> que la <section> contiene etiquetas de <article> . ¿Debo eliminar la <section> ? Parece ser una etiqueta flexible, pero no puedo encontrar un lugar válido para ponerla.
¿Cuál sería el marcado correcto?
Un encabezado no es lo mismo que encabezado. Utiliza la etiqueta para su encabezado (encabezado de página) y para su encabezado (títulos, subtítulos, etc.). Esa es la diferencia entre el encabezado y los encabezados. Aparte de eso, su marcado parece lo suficientemente lógico, excepto por el problema del título del encabezado y no usaré, la etiqueta para que los pies de página muestren algunos datos como fechas o autores.
La semántica HTML5 es muy lógica: encabezado, navegación, contenido principal, contenido del contenido principal, contenido aparte, etc.
Pero un artículo puede ser parte de una sección. Y una sección también puede ser parte de un artículo. Entonces mi opinión es que si sigues la lógica de las etiquetas HTML, no tienes que preocuparte mucho por la semántica.
Ah, y para responder a tu pregunta. Lo haría así:
<section>
<article>
<h2>Article 1 title</h2>
<p>Posted on Foo.Bar.2017</p>
</article>
<article>
<h2>Article 2 title</h2>
<p>Posted on Foo.Bar.2017</p>
</article>
</section>
Si es necesario, podría usar la etiqueta de tiempo con la etiqueta p, pero yo no lo haría (debido a la compatibilidad)
header / footer
Hay contenido de seccionamiento y elementos raíz de seccionamiento . header elementos de header / footer siempre "pertenecen" a uno de estos elementos de sección (contenido / raíz).
<body>
<header>belongs to the ''body''</header>
<article>
<header>belongs to the ''article''</header>
<footer>belongs to the ''article''</footer>
</article>
<div>
<header>belongs to the ''body''</header>
<footer>belongs to the ''body''</footer>
</div>
<footer>belongs to the ''body''</footer>
</body>
Tenga en cuenta que el elemento div no es un elemento de sección, por lo que sus hijos de header / footer pertenecen al body (que es un elemento raíz de sección), no al elemento div .
De modo que puede usar elementos de header / footer para el contenido de todo el sitio colocándolos de modo que el elemento principal de sección más cercano sea el elemento de body .
section
Un header / footer puede constar de uno o varios elementos de section , pero esto solo tiene sentido si el header / footer es (inusualmente) complejo.
En general, ¿cuándo tiene sentido usar la section ? Si tiene una sección implícita, o si necesita una entrada en el esquema del documento. Por favor vea mis respuestas relacionadas:
- cómo decidir qué elemento de contenido de sección usar (con tres ejemplos de marcado de blog)
-
sectionenarticlevs.articleensection(en contexto de blog) - una regla de oro cuando usar la
section
Tenga en cuenta que el validador informa una advertencia, no un error , cuando un elemento de contenido de sección no tiene un elemento de encabezado. No es necesario que tengan encabezados, pero puede ser señal de que los elementos de contenido de la sección se usan mal: por lo general, tiene sentido usar uno si podría tener un encabezado, incluso si no se proporciona uno.