Método 1: ¿Tiene sentido?
<span class="heading">Título del artículo</span>
Aunque <span> puede ser una etiqueta útil en algunas situaciones, no transmite el significado completo del título. Una ventaja de usar este método es que podemos adjuntarle una regla CSS y asignarle una clase de encabezado para que su texto parezca un título.
.título {
tamaño de fuente: 24px;
peso de fuente: negrita;
color: azul;
}
Bien, ahora todos los títulos están marcados con la clase de título en fuente grande, negrita y en azul. ¡maravilloso! ¿Pero es esto lo correcto? ¿Qué sucede si alguien lo ve con un navegador que no admite CSS?
Por ejemplo, ¿qué sucede si las reglas de la hoja de estilo externa que configuramos no son compatibles con versiones anteriores de navegadores? ¿O qué pasa si alguien con discapacidad visual usa un lector de pantalla para leer esta página? Lo que un visitante ve (u oye) a través de estos medios no debe ser diferente del texto normal de la página.
Aunque class="heading" añade un pequeño significado a la etiqueta, <span> sigue siendo simplemente una etiqueta normal que puede modificarse según el estilo predeterminado de la mayoría de los navegadores.
Los motores de búsqueda ignorarán la etiqueta <span> al rastrear esta página, como si no existiera, y no prestarán atención adicional a las palabras clave que pueda contener. Hablaremos más sobre la relación entre los motores de búsqueda y los títulos más adelante.
Finalmente, dado que la etiqueta <span> es un elemento en línea, es posible que necesitemos anidarlo dentro de un elemento adicional a nivel de bloque, como una etiqueta <p> o una etiqueta <div>, para que forme una línea separada. , lo que saturará aún más tus etiquetas con código innecesario. Estas etiquetas adicionales son necesarias para que los navegadores que no admiten CSS puedan mostrar el mismo texto.
Método 2: combinación de <p> y <b>
<p><b>Título del artículo</b></p>
El uso de una etiqueta de párrafo nos dará una visualización a nivel de bloque y <b> pondrá el texto en negrita. Pero cuando utilizamos este método para marcar un título importante, nos enfrentamos a los mismos resultados sin sentido.
A diferencia del método A, la etiqueta <b> puede poner el texto en negrita en navegadores visuales, incluso en navegadores que no admiten CSS. Pero al igual que la etiqueta <span>, los motores de búsqueda no darán mayor prioridad sólo porque algo esté en negrita en un párrafo.
Difícil de estilizar
El uso de la combinación ordinaria de <p> y <b> también trae consigo otro inconveniente: es imposible diseñar este título para que sea diferente de otros párrafos. Es posible que queramos utilizar un estilo especial para resaltar el título y hacer que el contenido de la página sea más claro y estructurado, pero este método sólo puede hacer que aparezca en negrita.
Método 3: estilo más sustancia
<h1>Título del artículo</h1>
Bueno, que gran definición de título. La mayoría de los diseñadores web están familiarizados con él. De hecho, cuando se usa apropiadamente, <Hn> puede proporcionar una estructura flexible, indexable y con estilo para el contenido de la página.
Esta también es una forma inteligente de definirlo y descubrirá que es bastante simple. Ya no se necesitan etiquetas adicionales y se podría argumentar que esto solo ahorra un poquito más de bytes que los otros dos métodos, lo cual es insignificante, pero el ahorro cuenta.
<h1> a <h6> representan seis niveles de títulos, desde el más importante (<h1>) hasta el menos importante (<h6>). Son ellos mismos a nivel de bloque y no requieren la adición de otros elementos para alinearlos individualmente. Sencillo, eficaz: simplemente una gran herramienta.
Personaliza estilos fácilmente
Debido a que usamos la etiqueta <h1> de forma única, y la etiqueta <b> o <p> es más adecuada para usar en toda la página, podemos usar una variedad de métodos CSS para darle estilo.
Es más, una etiqueta de título puede indicar claramente un título, ¡incluso sin necesidad de aplicar ningún estilo! Los navegadores visuales muestran <h1> en una fuente más grande y en negrita. Una página sin estilo mostrará la estructura del documento como se esperaba, con etiquetas de encabezado apropiadas para transmitir significado.
Los lectores de pantalla, PDA, teléfonos móviles y navegadores visuales y no visuales sabrán qué hacer cuando encuentren una etiqueta de título, la manejarán correctamente y la tratarán con más seriedad que el texto normal de la página. Con la etiqueta <span>, los navegadores que no admiten CSS no la tratarán de manera especial.
Estilos predeterminados molestos
En el pasado, los diseñadores podrían haber evitado por completo el uso de etiquetas de título porque los valores predeterminados del navegador eran muy feos. O evite usar <h1> o <h2> debido a sus enormes tamaños predeterminados y, en su lugar, utilice etiquetas de encabezado con números más altos para lograr tamaños más pequeños.
Sin embargo, es importante enfatizar que podemos cambiar fácilmente estas etiquetas de título usando CSS; por ejemplo, una < ;h1> no tiene por qué ser una etiqueta gigante que ocupe la mitad de la pantalla. Más adelante, demostraré lo sencillo que es diseñar etiquetas de título con CSS y, con suerte, aliviaré algunos de tus miedos abrumadores.
compatible con motores de búsqueda
Este es un gran beneficio. A los motores de búsqueda les encantan las etiquetas de título. Por otro lado, una etiqueta <span> o una etiqueta de párrafo normal en negrita significan algo menos. Marcar sus títulos apropiadamente con <h1> a <h6> requiere solo un poco de esfuerzo de su parte, pero hace que sus páginas sean más fáciles de rastrear para los motores de búsqueda, de modo que las personas finalmente puedan encontrarlas.
Los robots de los motores de búsqueda prestarán especial atención a las etiquetas de título; aquí es donde puedes colocar algunas palabras clave. Al igual que se recuperan <title> y <meta>, buscarán en la página a lo largo de la etiqueta del título. Si no utiliza estas etiquetas, las palabras clave contenidas en ellas no se considerarán valiosas y se ignorarán.
Entonces, con solo un poco de esfuerzo, puede aumentar la probabilidad de que las personas encuentren su sitio según el contenido de su página. Suena bien, ¿no?
Sobre el orden de los títulos
En el ejemplo, este título en particular es el más importante de la página porque es el título del documento. Por lo tanto, utilizamos la etiqueta de título más importante, <h1>. Siguiendo la especificación del W3C, algunas personas piensan que saltarse varios niveles de encabezado es una mala práctica. Por ejemplo, imaginemos que estamos en la siguiente página:
<h1>Título del artículo</h1>
Nuestro siguiente título (si no se repite con otro <h1>) sería <h2>, luego <h3>, etc. Probablemente no deberías saltarte un nivel después de <h1> e ir directamente a <h3>. Tiendo a estar de acuerdo con el punto de vista anterior y mantener la continuidad de los niveles a lo largo del texto para construir una estructura de diseño. De esta manera, es más fácil agregar títulos y estilos a una página ya existente y reducirá los errores causados por el uso de números adicionales.
Como se mencionó anteriormente, los diseñadores pueden usar <h4> para etiquetar el encabezado más importante de una página simplemente porque su tamaño de fuente predeterminado no es tan desagradablemente grande como <h1>. Pero recuerde, estructura primero, diseño después. Siempre podemos usar CSS para diseñar los títulos con el tamaño de texto que queramos.