html5 - parts - section html
evitar que<nav> aparezca como "sección sin título" en los sitios web html5 (4)
Estoy tratando de implementar la sección correcta con elementos y títulos de sección html5 mientras logro el diseño / diseño que mi cliente ha solicitado (incluidas ciertas restricciones).
El diseño general será algo así:
<body>
<header>
<nav class="breadcrumbs"><ol /></nav>
<h1>page title</h1>
<p>visual title</p>
<p>sponsor</p>
<nav class="main_navigation"><ul /></nav>
</header>
<div class="main_content">
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
</div>
<footer>Footer stuff<footer>
</body>
Lo que me preocupa ahora es que si uso un forro html5 , obtengo la navegación de navegación y la navegación principal aparece como secciones sin título. Siguiendo una estructura jerárquica de titulares, no puedo darles titulares por debajo de h2 y, naturalmente, no los "titularía" en absoluto y escondería un titular con css para "titularlos" se siente mal.
¿Cuál es la mejor manera de mantenerse semánticamente correcto, confirmar los estándares de SEO y evitar que aparezcan como secciones sin título?
Aparentemente, los elementos de nav tienen título porque son elementos de sección.
Si debe tenerlas como secciones tituladas en su esquema, deberá agregar un encabezado dentro de ellas.
En este caso, podrías hacer lo siguiente ...
<nav class="breadcrumbs">
<h2>Breadcrumb navigation</h2><ol />
</nav>
<h1>page title</h1>
<p>visual title</p>
<p>sponsor</p>
<nav class="main_navigation">
<h2>Main navigation</h2><ul />
</nav>
A continuación, ocultar los h2 s con css.
Por cierto, probablemente deberías cambiar div a section para ser más semántico ... aquí
<section class="main_content">
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
</section>
Creé una clase CSS para los encabezados que solo eran importantes para los esquemas HTML5.
h1.outline, .outline {
display: none;
}
... luego en el html
<nav>
<h1 class="nocontent outline">--- Main Navigation ---</h1>
<a href="/about">About Us</a>
<a href="/products">Products</a>
...
</nav>
... en el esquema, esto se muestra como
1. --- Main Navigation ---
Edición: la clase "nocontent" es importante para que los algoritmos SEO de Google sepan que hay contenido "boilerplate" en la etiqueta que no es relevante para SEO, por lo que no se contabiliza ni está en contra del ranking del motor de búsqueda de su sitio. https://support.google.com/customsearch/answer/2364585?hl=en De acuerdo con la página, está bien combinar otras clases con "nocontent".
Edición: no hice el siguiente paso en mi propio sitio, y de acuerdo con las Herramientas para webmasters de Google, no fue penalizado, ni los títulos ocultos crearon advertencias o banderas. Sin embargo, la documentación de Google recomienda este paso final para habilitar la clase "nocontent".
Para habilitar la clase "nocontent" para los propósitos de clasificación de Google, modifique el archivo de contexto de su sitio:
- En el Panel de control, en el menú de la izquierda, haga clic en Avanzado.
- En la sección de contexto de Descarga , haga clic en Descargar en formato XML.
- Edite el archivo de contexto descargado cse.xml para agregar un nuevo atributo enable_nocontent_tag = "true" a la etiqueta CustomSearchEngine. Por ejemplo, cambie a.
- En la sección de contexto Cargar , haga clic en Cargar y cargue el archivo cse.xml actualizado.
Esto llenó mis navegadores con encabezados que no eran visibles para el usuario, pero limpió la vista de esquema y ayudó a que tuviera más sentido.
Este es el enfoque recomendado de w3c, como se menciona en su curso edx.
MEJOR PRÁCTICA 1: para NO mostrar el contenido del encabezado en la pantalla, la técnica recomendada se describe en este artículo por Steve Faulkner . No use pantalla: ninguna o visibilidad: oculta en su hoja de estilo CSS, ya que en ese caso el contenido del encabezado nunca será vocalizado por los lectores de pantalla, y más generalmente por las tecnologías de asistencia.
Código de ejemplo en el artículo:
.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
<div class="offscreen">This text is hidden.</div>
No tiene que limitarse a solo un h1 en toda la página, puede usar tantos como desee. Los encabezados se dividen por elementos de sección, cada sección puede tener su propia estructura jerárquica a partir de h1 y hacia abajo. Incluso puede tener numerosos h1 por sección si lo desea, secciones anidadas dentro de las secciones, cada una con su propia estructura independiente. Todo depende de cómo desee estructurar su página / esquema.
Además, dado que solo estás usando 3 niveles en tu ejemplo, podrías fácilmente bajar tus artículos a h3 o h4 para acomodar los encabezados de navegación. Tener un encabezado (oculto o de otro tipo) es, de hecho, la forma correcta de titular semánticamente los elementos de sección.
http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/