Comunidad de diseño web y desarrollo en internet

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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate