Los Encabezados son muy importantes para nuestras páginas web. Los buscadores toman lo que ponemos entre las Etiquetas del Elemento Encabezado como referencias para posicionar nuestro sitio.
Los Encabezados, si habláramos de un libro, sería el equivalente a lo encontrado en un Índice es decir, su función es enfatizar títulos y subtítulos. Esto nos permite estructurar la jerarquía de importancia de nuestro Contenido, e identificar cuándo es un tema principal y cuáles son los temas secundarios.
La estructura básica básica para crear un Encabezado es la siguiente:
<h1>Contenido</h1>
Observando el ejemplo, nos damos cuenta que comienza con una Etiqueta de Inicio del Elemento Encabezado, continúa con el Contenido que puede ser el título de un tema o el nombre que identifique el resto de información de nuestra página web, etc. y terminamos con la Etiqueta de Cierre del Elemento Encabezado.
Además de ser información importante para los buscadores, también el Elemento le da un formato al contenido. Por lo general el texto entre las Etiquetas del Elemento Encabezado toman un formato de "negrita" y aumenta el tamaño del texto considerablemente a comparación de un elemento Párrafo por ejemplo.
Tipos de Encabezados
El Elemento Encabezado tiene como opciones las siguientes Etiquetas:
<h1>Contenido<h1>
<h2>Contenido<h2>
<h3>Contenido<h3>
<h4>Contenido<h4>
<h5>Contenido<h5>
<h6>Contenido<h6>
Se visualizará en nuestra web de la siguiente manera:
Contenido
Contenido
Contenido
Contenido
Contenido
Contenido
Así es como podemos agregar un Encabezado en nuestra página web. Pero ¿Qué más podemos hacer?
Nota:
La siguiente información es extra y es probable que sea agregada en más Elementos HTML. Puedes omitir su consulta a menos que te sea de utilidad porque esto se verá como tema cuando veamos Atributos para Elementos HTML.
¿Cómo podemos cambiar el color del texto en un Encabezado?
Para cambiar el Color del texto en la Etiqueta de Inicio del Elemento Encabezado, tenemos que utilizar un Atributo llamado Color.
El Atributo Color nos permite darle Valores RGB, HEX o HLS para asignarle un color al contenido.
La sintaxis quedaría de la siguiente manera:
<h1 style="color:red;">Contenido</h1>
Para éste ejercicio utilizaremos el Atributo style que es una Propiedad CSS.
El Atributo style va a tomar lo que la Propiedad Color le dé, y para ello, dependerá del Valor que le demos a la Propiedad Color.
Utilizaremos los Tres tipos de Valores que le podemos dar a las Propiedad color: RGB, HEX y HLS.
No te preocupes por el momento de qué es RGB, HEX o HSL. Eso lo veremos en Colores en HTML. Veamos los ejemplos para que lo puedas realizar.
Color con nombres pre-establecidos
Vamos a utilizar el ejemplo anterior, aprovechando que usa Nombre de Color Pre-Establecido:
<h1 style="color:red;">Contenido</h1>
Un Encabezado Normal se vería:
Contenido
Un Encabezado con el Atributo style, la Propiedad color y el Valor red:
Contenido
Color con RGB
Si queremos utilizar RGB la línea es diferente porque el Valor aunque es lo mismo que red, en RGB cambia como en la siguiente línea:
<h1 style="color:rgb(255,0,0);">Contenido</h1>
Un Encabezado Normal se vería:
Contenido
Un Encabezado con el Atributo style, la Propiedad color y el Valor rgb(255,0,0):
Contenido
Color con HEX
Si queremos utilizar HEX la línea es diferente porque el Valor aunque es lo mismo que red, en HEX cambia como en la siguiente línea:
<h1 style="color:#ff0000;">Contenido</h1>
Un Encabezado Normal se vería:
Contenido
Un Encabezado con el Atributo style, la Propiedad color y el Valor #ff0000:
Contenido
Color con HSL
Si queremos utilizar HSL la línea es diferente porque el Valor aunque es lo mismo que red, en HSL cambia como en la siguiente línea:
<h1 style="color:hsl(0,100%,50%);">Contenido</h1>
Un Encabezado Normal se vería:
Contenido
Un Encabezado con el Atributo style, la Propiedad color y el Valor hsl(0,100%,50%):
Contenido
No es todolo que podemos hacer con el Elemento Encabezado pero sí es lo que más se utiliza. El tema de hoy no nos permite ver detalles del Atributo style por el momento copia y pega para que veas los resultados pero si no funciona, quizá sea un punto y coma (;) lo que haga falta.
