Como usar los encabezados h1 a h6 en html

Como usar los encabezados h1 a h6 en html

Print Friendly, PDF & Email
Como usar los encabezados h1 a h6 en html
Valora esta entrada
Una duda frecuente cuando estamos aprendiendo html es como debemos usar las etiquetas h1 a h6.

En estos casos suelo responder que escribir una página web es muy parecido a escribir un libro. O un argumento.

Se trata de seguir una idea principal y desarrollarla tanta como distintos prismas queramos darle.

Debes tener muy clara que idea quieres perseguir. Generalmente aquella que te interesa que se posicione en Internet.

La longitud y la organización de los contenidos que vayamos a publicar son una cuestión clave.

Estructura de árbol

Pensemos en un ensayo.

Siempre tiene presentación, desarrollo y conclusión.

Una web se escribe igual.

Típicamente encontraremos una explicación inicial de la idea. Este es el lugar adecuada para introducir un h1.

En esta introducción se suelen explicar los puntos que se trataran en el escrito.

Cada uno de estos puntos es un lugar perfecto para introducir un encabezado h2.

En función de la longitud del texto que encontremos dentro de cada una de las ideas a desarrollar podremos tener diversos puntos de vista. Cada uno de estos puntos de vista podría ser introducido por un h3.

Y así sucesivamente hasta completar una estructura de árbol.

árbol con ramas
Ramas de un árbol

Cada zona de la web tiene su propio peso y debe ser diferenciada

Si pensamos en términos de lectura más que de web podemos encontrar una respuesta muy intuitiva que nos ayudará a redactar y distribuir los contenidos prácticamente en cualquier página web.

Cada encabezado aportará un peso relativo a un contenido

Típicamente diferenciaremos entre la cabecera (header), el cuerpo central (main), los laterales (aside) y el pie de página (footer).

Header y cuerpo central

Un h1 lo pondría en el encabezado o en el cuerpo principal.

Hay quien dice que no pasa nada por poner 2 h1 en un texto si el contenido es muy largo.

Personalmente no me gusta porqué pienso que diluyes la importancia del h1.

Es tan importante el contenido como en que lugar de la web vamos a ponerlo.

Main

El main es el cuerpo central del documento.

Es el lugar dónde vamos a exponer y desarrollar nuestras ideas.

Aquí deberemos hacer aparecer nuestros h2 y h3.

A poder ser haz un esfuerzo por encontrar sinónimos y conceptos relacionados con tu idea clave de la publicación.

Laterales

Entiendo los laterales como un espacio dónde poner contenido auxiliar.

Incluso algún menú de navegación.

Es importante no diluir los contenidos desarrollados en el main.

Para mi gusto usaría aquí los h3 y h4.

Pie de página

En el pie de página usaría h3 y h4.

layout ejercicio capas

¡Hola querido lector!

Por norma general diremos que debes intentar que toda la página tenga una coherencia y que los pesos queden distribuidos de un modo lógico en función del mensaje que quieras dar y a que contenidos quieras darle una mayor importancia.

La idea de árbol también te puede ayudar mucho.

En cualquier caso, hagas lo que hagas, si eres capaz de encontrar un criterio lógico entonces es que lo estás haciendo bien.

Nos leemos mañana, como siempre, con un nuevo contenido sobre web.

Entradas relacionadas:

Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 542
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Meta etiquetas en HTML : meta tags
- 477
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Qué es un favicon y para que sirve
- 100
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumen de atributos html para ayudarnos a memorizar
- 193
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Enlaces en html: la etiqueta a
- 151
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Etiquetas xmp, pre y code en HTML
- 690
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Anclas html
- 423
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Etiquetas audio y video de html5
- 24
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Creación de formularios html
- 540
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.