Por qué usar.h1 en lugar de h1 real?

La mayoría de las hojas de estilo tienen un conjunto de tamaños de fuente que se corresponden con los estilos de encabezado del 1 al 6. A veces, en otras partes de la página, los diseñadores web quieren usar esos mismos tamaños de fuente en el texto que debería no ser parte de un elemento de encabezado real, por razones semánticas. En lugar de proporcionar nombres para cada uno de esos tamaños como .size-12, .size-14, .size-16, etc, es más fácil simplemente nombrarlos a todos con nombres de clase similares a sus encabezados. De esa manera, usted sabe que el texto será del mismo tamaño que un Elemento H1, aunque en realidad no es un elemento H1. He hecho esto un par de veces.

Algunas razones que se me ocurren:

• Usando div en lugar de etiqueta adecuada para obtener la visual de un encabezado sin un impacto en SEO
• Para evitar complicaciones de inconsistencias del navegador
• Compatibilidad con otras bibliotecas y frameworks que optan por hacer lo mismo por las razones 1 y 2
• Flexibilidad de diseño (como señaló @scrappedcola en los comentarios)

Esto permite una separación de la jerarquía visual de la jerarquía semántica. por ejemplo, quiero decirle al espectador una cosa, mientras que decirle a una computadora (motores de búsqueda) algo más.

<article>
    <h1 class="h1">Page Title</h1>
    <p>Some content</p>
    <section>
        <h1 class="h2">Section Heading</h1>
        <div class="h6">Sub Heading</div>
        <p>Some content</p>
    </section>
    <section>
        <h1 class="h2">Section Heading 2</h1>
        <div class="h6">Sub Heading 2</div>
        <p>Some content 2</p>
    </section>
</article>

Véase:

• http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections (hacia el botton de sección)
• http://html5doctor.com/html5-seo-search-engine-optimisation /
• http://www.youtube.com/watch?v=GIn5qJKU8VM

Lo único que se me ocurre de repente es para los motores de búsqueda. Muchos verán una etiqueta h1 real como el título o asunto de una página y la usarán para búsquedas, etc. Tener múltiples etiquetas h1 puede confundir a las arañas del motor de búsqueda y puede arruinar las búsquedas que devolverían resultados para su sitio (también he oído que puede conseguirle en la lista de "sitio malo" con algunas arañas como Google).

Tener los estilos le permite tener el mismo aspecto visual a un elemento sin arruinar la búsqueda motor.

Otra razón que he encontrado recientemente... esto no es particular de Angular pero sirve como un buen ejemplo:

Quiero crear formularios dinámicos/declarativos en Angular (consulte Formularios dinámicos en el libro de cocina de Angular) y permitir elementos de texto con estilo. La máxima flexibilidad requeriría permitirme agregar declarativamente elementos HTML arbitrarios a mis formularios, pero esto está abierto a ataques de scripting, y requiere una subversión explícita del compilador Angular para incluso permitirlo. En su lugar, permito elementos de texto que se agregarán a los formularios, junto con una clase para controlar el estilo. Así que puedo usar el .estilo h1 pero no el elemento h1.

Esto definitivamente ayudaría en términos de SEO y rastreadores de Google a entender mejor tu página. Cuando lee h1, asume que lo que está allí debe ser el punto focal de la página. H2, serían los segundos componentes y así sucesivamente. De esta manera, Google puede entender el "alcance" de lo que cubre tu página en términos de contenido.

No estoy del todo seguro, pero una gran variable en mi opinión sería el modo "leído" de las páginas. Esto permitiría a los dispositivos y lectores organizar el contenido especialmente para dispositivos utilizados por personas con discapacidad visual.

También proporciona estructura a la página y un sentido de orden.