En este tutorial vamos a ver cual es la importancia de los encabezados, como implementarlos y la forma correcta de usar los Encabezados dentro del documento HTML.
Los Encabezados
Los encabezados son muy importantes porque los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de las páginas web ya que los usuarios ingresan a las páginas a través de los encabezados mostrados por los buscadores.
Los encabezados se implementan con las etiquetas <h1> a <h6>, el encabezado <h1> es el mas importante y el <h6> es el menos importante y su sintaxis es la siguiente.
<h1>Este es un Encabezado</h1>
<h2>Este es un Encabezado</h2>
<h3>este es un Encabezado</h3>
<h4>Este es un encabezado</h4>
<h5>Este es un Encabezado</h5>
<h6<Este es un Encabezado</h6>
<h2>Este es un Encabezado</h2>
<h3>este es un Encabezado</h3>
<h4>Este es un encabezado</h4>
<h5>Este es un Encabezado</h5>
<h6<Este es un Encabezado</h6>
Los encabezados son mostrados por los navegadores normalmente por defecto de la siguiente forma, pero con CSS pueden cambiar totalmente su apariencia, color, tamaño y posición, esto se verá con más detalles en el tutorial CSS3.
El uso Correcto de los Encabezados
Los encabezados se utilizan para darle un nombre o título a las páginas y el contenido de las mismas, el encabezado h1 tiene el mayor rango y solo se puede colocar una sola vez por página o documento HTML.
El uso correcto para utilizar los encabezados es seguir el rango de los encabezados, para crear una estructura correcta, h1, h2, h3, h4, h5, h6, y no se debe utilizar los encabezados para hacer la letra de una palabras o un párrafo más grande.
Los encabezados h2 a h6 no es obligatorio ponerlos todos en un documento HTML o página web y se pueden utilizar tantas veces como sea necesario siguiendo el rango mencionada arriba.
Si un sitio web, contiene más de una página, se puede o se debe poner un h1 en cada página, por ejemplo un sitio web de noticias que tiene varias páginas como Deportes, Espectáculos, salud, etc.
Para estructurar correctamente la página cada página debe tener su encabezado h1 ejemplos.
Página de Inicio o (Home)
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>El Noticiero Impacto</title>
</head>
<body>
<header>
<h1>El Noticiero Impacto</h1>
</header>
<section>
<h2>Las Noticias del dia de Hoy</h2>
<p>Estas son las noticias mas relevantes del día</p>
<article>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
<article>
<h2>Título de la Noticia 2</h2>
<h3>SubTítulo de la Noticia 2</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Manuel Jiménez</h4>
</article>
</section>
</body>
</html>
<html lang="es-MX">
<head>
<title>El Noticiero Impacto</title>
</head>
<body>
<header>
<h1>El Noticiero Impacto</h1>
</header>
<section>
<h2>Las Noticias del dia de Hoy</h2>
<p>Estas son las noticias mas relevantes del día</p>
<article>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
<article>
<h2>Título de la Noticia 2</h2>
<h3>SubTítulo de la Noticia 2</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Manuel Jiménez</h4>
</article>
</section>
</body>
</html>
Página de Deportes
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>El Noticiero Impacto Deportes</title>
</head>
<body>
<header>
<h1>El Noticiero Impacto Deportes</h1>
</header>
<section>
<h2>Las Noticias del dia de Hoy</h2>
<p>Estas son las noticias de deportes más relevantes del día</p>
<article>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
<article>
<h2>Título de la Noticia 2</h2>
<h3>SubTítulo de la Noticia 2</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Manuel Jiménez</h4>
</article>
</section>
</body>
</html>
<html lang="es-MX">
<head>
<title>El Noticiero Impacto Deportes</title>
</head>
<body>
<header>
<h1>El Noticiero Impacto Deportes</h1>
</header>
<section>
<h2>Las Noticias del dia de Hoy</h2>
<p>Estas son las noticias de deportes más relevantes del día</p>
<article>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
<article>
<h2>Título de la Noticia 2</h2>
<h3>SubTítulo de la Noticia 2</h3>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Manuel Jiménez</h4>
</article>
</section>
</body>
</html>
Esta es la forma correcta de utilizar los encabezados en cada página solo hay un encabezado h1 y en cada sección se respeta el rango de los encabezados h2, h3, h4.
Si se desea poner el mismo tamaño para todos los encabezados se puede hacer con la propiedad de CSS font-size (tamaño de fuente) no es recomendable poner varias veces los encabezados de un mismo rango seguidamente en un documento HTML.
Por que afecta la estructura del documento al ser leida por los navegadores y podrian panalizar la pagina web en el posicionamiento de las busquedas en los navegadores.
En estas imágenes con un poco de CSS les muestro como se ve bien la estética de las estructuras de los encabezados de mayor a menor rango, al ser mostrados por el navegador.
Solo se modificaron los encabezados h1 y h2 cambiando su posición al centro, el tamaño y el color son los que les da por defecto el navegador, los elementos <header> (Cabecera), <section> (Sección) y <article> (Articulo) se les dio tamaño y color de fondo, estas etiquetas las veremos más adelante con más detalles.
En el código de las páginas que se muestran arriba solo se les cambió el encabezado h1 que se encuentra en la <header> con esto los navegadores mostrarán cada página como la principal de su respectiva sección del sitio web.
Para entender mejor esto, por ejemplo, si un usuario ingresa la palabra Deportes en el buscador del navegador y el sitio no tiene esta palabra en el encabezado o título de su sitio es menos probable que se muestre en las opciones del navegador para visitar el sitio.
Otra regla a seguir es cuando se agrupen dos o más encabezados se debe utilizar la etiqueta <hgroup> cuando no haya elementos entre ellos y puede confundir al navegador y provocar errores de indexación, la sintaxis quedaría de la siguiente manera.
<article>
<hgroup>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
</hgroup>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
<hgroup>
<h2>Título de la Noticia 1</h2>
<h3>SubTítulo de la Noticia 1</h3>
</hgroup>
<p>El dia de hoy en ......</p>
<h4>Escrita por: Jorge Mendoza</h4>
</article>
Resumen
Los encabezados son muy importantes para estructurar correctamente las páginas.
Los motores de búsqueda los utilizan para indexar correctamente las páginas.
Los usuarios ingresan a las páginas por los encabezados mostrados por los navegadores.
Los encabezados se implementan con las etiquetas <h1> a <h6>.
Los encabezados se rigen por rangos el de mayor rango es <h1> y el de menor rango es el <h6>
El encabezado <h1> solo se debe ingresar una sola vez por página.
Los encabezados <h2> a <h6> se pueden utilizar todas las veces que sea necesario.
Los encabezados no se deben usar para hacer más grande las palabras o párrafos.
La etiqueta <hgroup> se debe utilizar cuando se agrupan dos o más encabezados.
En el siguiente tutorial veremos la etiqueta <p> (parrafo) que es la que se utiliza para ingresar el texto al documento HTML, y los formatos que se le pueden dar al texto.
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario