diegoofernandez
Beta
Redactor
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
SOBRE ESTE CURSO
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE
Encabezados en html
Quizás ya hemos visto muy por arriba que existe en HTML una jerarquía de encabezados, ahora vamos a conocer esa jerarquía completa y entender las ventajas de usar la misma correctamente. HTML nos proporciona estas etiquetas para que podamos crear encabezados de varios tamaños y grosores.
La jerarquía de encabezados va desde el número 1 (el encabezado con mayor importancia), hasta el número 6 (el encabezado con menor importancia).
Antes de ver la forma correcta de estructurar los encabezados, escribamos la jerarquía completa para poder conocerlo y aprenderlos, y para eso vamos a abrir nuestro editor de texto que hemos descargado en las clases pasadas de este curso, y crearemos un nuevo archivo:
Como vemos, es la estructura básica que ya aprendimos. Lo que vamos a escribir dentro de las etiquetas body, es la jerarquía completa de encabezados:
Escribe cada línea del código aquí arriba, dentro de las etiqutas body, luego guarda y al abrir el navegador verás el siguiente resultado:
Como vemos, a simple vista se puede notar la diferencia con que el navegador trata cada encabezado, dándole al primero un mayor tamaño de fuente, y variando el mismo hasta llegar al último encabezado de la jerarquía.
Ahora, ¿cual sería la forma correcta de utilizar la jerarquía de encabezados?
Los motores de búsqueda y otros agentes generalmente indexan el contenido de la página basándose en los elementos de encabezado, por ejemplo, para crear una tabla de contenidos, y por eso mismo es importante usar la estructura correcta para los encabezados.
Veamos el siguiente documento (las etiquetas siguientes van dentro de las etiquetas body):
Cómo vemos el título principal del sitio lo colocamos en el encabezado de mayor jerarquía que HTML nos brinda, es decir, en un h1. Luego como tenemos dos partes de contenido de igual importancia, colocamos ambos con un títular h2 (Razones y Conclusiones).
Luego, dentro de las razones, utilizamos las etiquetas h3, ya que esta sección de razones individuales es “hija” de la sección “Razones”. ¿Se entiende la lógica? Espero que si, cualquier duda dejala en los comentarios.
¡Hasta la próxima clase!
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE
Encabezados en html
Quizás ya hemos visto muy por arriba que existe en HTML una jerarquía de encabezados, ahora vamos a conocer esa jerarquía completa y entender las ventajas de usar la misma correctamente. HTML nos proporciona estas etiquetas para que podamos crear encabezados de varios tamaños y grosores.
La jerarquía de encabezados va desde el número 1 (el encabezado con mayor importancia), hasta el número 6 (el encabezado con menor importancia).
Antes de ver la forma correcta de estructurar los encabezados, escribamos la jerarquía completa para poder conocerlo y aprenderlos, y para eso vamos a abrir nuestro editor de texto que hemos descargado en las clases pasadas de este curso, y crearemos un nuevo archivo:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>Como vemos, es la estructura básica que ya aprendimos. Lo que vamos a escribir dentro de las etiquetas body, es la jerarquía completa de encabezados:
HTML:
<h1>Soy el títular de mayor jerarquía</h1>
<h2>Soy un títular de segunda jerarquía</h2>
<h3>Yo estoy tercero en la jerarquía</h3>
<h4>A mí me ha tocado ser el cuarto</h4>
<h5>Soy un títular de quinta jerarquía</h5>
<h6>Y yo finalmente soy el sexto de la jerarquía</h6>Escribe cada línea del código aquí arriba, dentro de las etiqutas body, luego guarda y al abrir el navegador verás el siguiente resultado:
Como vemos, a simple vista se puede notar la diferencia con que el navegador trata cada encabezado, dándole al primero un mayor tamaño de fuente, y variando el mismo hasta llegar al último encabezado de la jerarquía.
Ahora, ¿cual sería la forma correcta de utilizar la jerarquía de encabezados?
Los motores de búsqueda y otros agentes generalmente indexan el contenido de la página basándose en los elementos de encabezado, por ejemplo, para crear una tabla de contenidos, y por eso mismo es importante usar la estructura correcta para los encabezados.
Veamos el siguiente documento (las etiquetas siguientes van dentro de las etiquetas body):
HTML:
<h1>Título principal del sitio</h1>
<p>Intoducción</p>
<h2>Razones</h2>
<h3>Razón 1</h3>
<p>Contenido en párrafo</p>
<h3>Razón 2</h3>
<p>Contenido en párrafo</p>
<h2>Conclusiones</h2>
<p>Conclusión en párrafo</p>Cómo vemos el título principal del sitio lo colocamos en el encabezado de mayor jerarquía que HTML nos brinda, es decir, en un h1. Luego como tenemos dos partes de contenido de igual importancia, colocamos ambos con un títular h2 (Razones y Conclusiones).
Luego, dentro de las razones, utilizamos las etiquetas h3, ya que esta sección de razones individuales es “hija” de la sección “Razones”. ¿Se entiende la lógica? Espero que si, cualquier duda dejala en los comentarios.
¡Hasta la próxima clase!
