Definir títulos y enlaces en el elemento de encabezado de página HTML: maniquíes

Dentro del elemento HTML de una página que está creando para su sitio web, hay dos elementos principales y definitorios. El contenido visible de la página se incluye en la etiqueta, y luego todo lo demás va en el elemento principal.

La sección del encabezado del documento HTML es donde se define el título de la página y también donde se definen los enlaces a los archivos de los que depende la página HTML. Los elementos HTML dentro del elemento principal comunican información importante, como el nombre del sitio, una descripción del contenido del sitio y la hoja de estilo vinculada. Esta información es utilizada por el navegador, los motores de búsqueda y los visitantes del sitio.

La sección principal de un HTML generalmente incluye:

• El título de la página

• Enlaces a los archivos de la hoja de estilos CSS que se usan para formatear la página

• Palabras clave y otros "Metadatos" utilizados en los motores de búsqueda

Los títulos resumen el contenido de la página

Un título de la página aparece en la barra de título de un navegador o pestaña del navegador y también en la mayoría de las listas de resultados del motor de búsqueda. Los títulos de las páginas son esenciales; deben ser concisos, pero a la vez resumir el contenido de la página.

Aquí hay un código de muestra para el título de una página:

¡Bienvenido a Web Collective!

Enlaces a hojas de estilo CSS

Los enlaces a hojas de estilo también pertenecen al elemento principal de una página HTML. Recuerde que el formato se proporciona a páginas web modernas a través de archivos externos, distintos, separados y vinculados. Así es como se ve el código:

La sintaxis de una hoja de estilo vinculada es un poco confusa, por lo que desglosarla. La etiqueta que vincula una hoja de estilo a una página HTML es un ejemplo de un elemento que no es contenedor (a veces denominado elemento vacío). En otras palabras, solo hay una etiqueta de apertura y ninguna etiqueta de cierre. En cambio, esta etiqueta de enlace se abre con.

Elementos, atributos y valores

Por cierto, o tal vez no por el camino, los elementos HTML tienen atributos, y esos atributos se definen con la sintaxis que sigue al modelo de atributo name = "valor".

Para seguir con el ejemplo de una hoja de estilos vinculada, el elemento de enlace tenía atributos rel, href y type. Esos atributos tienen los nombres de atributo (como rel, href o type) y values ​​ (la información específica entre comillas que sigue al nombre del atributo).

La función (menos, pero aún relevante) de las metaetiquetas

Metaetiquetas son elementos opcionales dentro de un elemento principal que transmiten información adicional sobre una página, incluidos los siguientes:

• Descripciones y palabras clave utilizadas por los motores de búsqueda.

• Información adicional sobre la página, como autor.

Como todo lo demás en HTML, el rol y el valor de las metaetiquetas está evolucionando. En épocas anteriores, las metaetiquetas para palabras clave desempeñaban un papel más importante en la optimización del motor de búsqueda (SEO, visualización destacada y precisa en los resultados del motor de búsqueda).

Sin embargo, los motores de búsqueda modernos (y las nuevas etiquetas adicionales en HTML5) proporcionan canales alternativos y más complejos y sofisticados para identificar el contenido de la página e indexar ese contenido en los motores de búsqueda. Aún así, el uso de metaetiquetas para el autor, la descripción y las palabras clave (que a veces son útiles para los motores de búsqueda) aún puede ser una parte importante del contenido del encabezado de HTML.

Observe la apariencia típica de una página HTML, incluido el elemento principal.

Bienvenido a Web Revolution

Los elementos HTML dentro del elemento principal comunican información importante, como el nombre del sitio, una descripción del contenido del sitio y la hoja de estilo vinculada. Esta información es utilizada por el navegador, los motores de búsqueda y los visitantes del sitio.

La figura revela cómo las piezas del elemento principal comunican información al mundo. Puede ver el código fuente HTML de la versión de craigslist de la ciudad de Nueva York. com (arriba a la izquierda), junto con el título definido, que se muestra en la barra de título de un navegador (arriba a la derecha) y la descripción definida tal como aparece en el resultado de búsqueda de Google (abajo a la derecha).