Estilos CSS para encabezados y titulos

En éste tutorial, trataré de explicar qué es un encabezado, cuantos niveles hay, cuando y por qué es importante el uso de éstos.

¿Qué son los encabezados?

Los títulos también conocidos como encabezados, o headings en inglés, sirven para denotar importáncia y jerarquía en una página o documento.

¿Cuántos encabezados existen?

En HTML y/o XHTML, existen 6 niveles de encabezados <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Siendo el número 1 de mayor importancia y el 6 de menor importancia.

¿Jerarquía? Títulos y Subtítulos

Sabiendo que el <h1> es el de mayor rango, o digamos el título principal del documento, es fácil saber que el <h2> es un subtítulo de alto rango, mientras que el <h3> es un subtítulo, y así sucesivamente. Un ejemplo, aquí.

¿Cuándo usarlos?

Es normal que se usen textos muy largos en internet, para una fácil forma de organizarlos, y entenderlos, se crean secciones y subsecciones dentro de un mismo documento, y/o títulos, subtítulos.

A continuación les muestro un ejemplo de cuando y cómo usar los encabezados, pero ésta es mi interpretación de los encabezados. Obviamente cada uno trabaja a su modo, y comodidad.

<h1>: Título de un capítulo, nombre del sitio web.
<h2>: Título principal.
<h3>: Título de secciones en la página.
<h4>: Título de una subsección.
<h5>: Subtítulo de una subsección.
<h6>: Segundo subtítulo.

¿Por qué usarlos?

Por accesibilidad web, y fácilidad para agregar estilos (CSS).

¿Qué diferencia hay entre un <h1> y un <font size="6">?

Todo. Un encabezado es un encabezado (disculpen la redundancia), por accesibilidad web sea donde sea que vean la página, ya sea con un celular, una PDA, o por Braile; éstos dispositivos reconocerán que ése texto es un título, mientras que si fuera un texto con tamaño grande, los dispositivos no lo reconocerán, y creerán que es un simple texto más, por lo tanto se crea una mala accesibilidad.

<title>

Además, recuerden que aunque sea un título de jerarquía 1 <h1>, éste puede tener un tamaño chico gracias al CSS.

<title>

¿Y que es <title>?

Cuando hablamos sobre éste tema, muchos suelen confundir un encabezado con el título del navegador; éste es el título que se coloca entre las etiquetas <head>, que sirve para agregar un título en la barra de título del navegador.

Titulo del Navegador

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.