Comunidad de diseño web y desarrollo en internet online

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.

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