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:

Anclas html
- 598
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...
Ejercicio html sobre listas anidadas para un menú de navegación
- 61
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.
LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Imágenes en html: la etiqueta img
- 498
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
- 36
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
Validadores de código HTML y CSS
- 558
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Resumen de como comentar código en html, css y javascript
- 584
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Ejercicio html sobre códigos HTML y caracteres especiales
- 49
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Como indicar a Google la modificación y corrección de contenidos mediante html
- 118
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Etiquetas básicas introductoras al html5
- 915
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
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.