Con el propósito de identificar semánticamente diferentes textos de una página web, identificaremos las etiquetas de HTML para el marcado de títulos y encabezados en un documento. Algunos creadores de proyectos web marcan de forma incorrecta los títulos, por lo tanto, en el proceso de indexación, por parte del navegador. se recopila información irrelevante de la página. Por este motivo, según las necesidades del proyecto identificaremos el marcado correcto de títulos y encabezados.

Cuando navegamos en internet, el nombre en la parte superior de la página web permite ubicar rápidamente la pestaña necesitada. Por lo tanto, al momento de tener varias páginas abiertas, cada una muestra un nombre resumido, a fin de identificarla con facilidad como en el ejemplo de la ilustración:

061-01_0401_fot01. Ejemplo de título y encabezado

Según los observado, es posible dirigirnos de forma rápida a la plataforma VKTV, debido al nombre mostrado en la parte superior.

Para comenzar la identificación de una página web, en el editor de texto preferencial, creamos el cupero básico del un documento HTML, siguiendo los pasos descritos a continuación:

• Indicamos al navegador el tipo de documento a trabajar, en este caso es HTML.
• Definimos el idioma del documento.
• Identificamos la cabecera y el cuerpo.
• Guardamos el documento con la extensión HTML para evitar pérdidas.

Al ejecutarlo en cualquier navegador web, observamos cómo la pestaña en la parte superior muestra el nombre asignado al documento.

061-01_0401_ilu01. Ejemplo de página sin título

Para identificar la página web, en la cabecera definimos la etiqueta title, en español título, y dentro de ella, incorporamos el nombre del proyecto, guardamos y verificamos la asignación del nombre de la página en la parte superior, tal como se muestra en la siguiente ilustración:

061-01_0401_ilu02. Ejemplo de página con título

El nombre de la etiqueta title puede confundirse con el título de un texto, por ser esa la traducción literal de la etiqueta, sin embargo, en este caso se refiere al título de la hoja en redacción. Para marcar el título de un texto HTML están los encabezados, representados por la etiqueta h acompañada de un número, los cuales varían del 1 al 6  y a nivel de visualización tienen tamaños diferentes, tal como se muestra en la imagen.

061-01_0401_ilu03. Creación de la etiqueta encabezado

El uso correcto de la etiqueta de encabezado depende de la relevancia aplicada al texto. Al identificarlo con el número 1, el navegador web lo interpreta como el más importante del documento, cuando aumentamos el número disminuye la relevancia del título.

061-01_0401_ilu04. Uso correcto de relevancia de título

Ahora bien, al agregar palabras fuera del encabezado, se visualizan en líneas distintas de forma automática, debido al bloque de texto creado por la etiqueta title. Por lo tanto, es innecesario agregar saltos de línea para separar el encabezado de un texto normal.

061-01_0401_ilu05. Etiqueta de bloque title

Keynotes

• Para identificar la página web, en la cabecera definimos la etiqueta title, en español título, y dentro de ella, incorporamos el nombre del proyecto.
• El nombre de la etiqueta title puede confundirse con el título de un texto, por ser esa la traducción literal de la etiqueta, sin embargo, en este caso se refiere al título de la hoja en redacción.
• Para marcar el título de un texto HTML están los encabezados, representados por la etiqueta h acompañada de un número, los cuales varían del 1 al 6  y a nivel de visualización tienen tamaños diferentes.
• El uso correcto de la etiqueta de encabezado depende de la relevancia aplicada a el texto. Al identificarlo con el número 1, el navegador web lo interpreta como el más importante del documento, cuando aumentamos el número disminuye la relevancia del título.
• Ahora bien, al agregar palabras fuera del encabezado, se visualizan en líneas distintas de forma automática, debido al bloque de texto creado por la etiqueta title. Por lo tanto, es innecesario agregar saltos de línea para separar el encabezado de un texto normal.

Crea un documento HTML con nombre proyecto01 y en él marca el título y tres de los tipos de encabezados aprendidos. Es necesario ubicar el estándar oficial de HTML, a fin de cumplir con las recomendaciones alli estipuladas.

¡Comparte el resultado final de tu reto en vKonnect e invita a dos compañeros para agregar un comentario de mejoría a tu código!

Tiempo disponible: entre 15 y 30 minutos.

Con la creación de títulos y encabezados de forma correcta en un documento HTML aseguramos la recopilación de información relevante, por parte de los navegadores web en el proceso de indexación. También, marcamos eficientemente la información principal de proyectos destinados a internet. Con práctica y paciencia, obtendremos códigos limpios y estructurados correctamente a nivel semántico.