El elemento <head> es un contenedor de los siguientes elementos:
- <title>
- <style>
- <meta>
- <link>
- <script>
- <base>
El elemento <head>
El elemento <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>. Los metadatos HTML son datos sobre el documento HTML. Los metadatos no se muestran. Los metadatos suelen definir el título del documento, el conjunto de caracteres, los estilos, los scripts y otra metainformación.
El elemento <title>
El elemento <title> define el título del documento. El título debe ser solo de texto y se muestra en la barra de título del navegador o en la pestaña de la página.
¡El elemento <title> es obligatorio en los documentos HTML!
¡El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden al enumerar las páginas en los resultados de búsqueda.
El elemento <title>:
- define un título en la barra de herramientas del navegador
- proporciona un título para la página cuando se agrega a favoritos
- muestra un título para la página en los resultados del motor de búsqueda
Por lo tanto, trata de hacer que el título sea lo más preciso y significativo posible.
El elemento <style>
El elemento <style> se usa para definir la información de estilo para una sola página HTML.
Ejm
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>El elemento <link>
El elemento <link> define la relación entre el documento actual y un recurso externo. La etiqueta <link> se usa con mayor frecuencia para vincular a hojas de estilo externas.
Ejm
<link rel="stylesheet" href="mystyle.css">
El elemento <meta>
El elemento <meta> generalmente se usa para especificar el conjunto de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica.
Los metadatos no se mostrarán en la página, pero los utilizan los navegadores (cómo mostrar contenido o recargar la página), los motores de búsqueda (palabras clave) y otros servicios web.
Ejms
Definir el set de caracteres usados
<meta charset="UTF-8">
Definir las palabras clave para motores de búsqueda
<meta name="keywords" content="HTML, CSS, JavaScript">
Definir una descripción de nuestra página web
<meta name="description" content="Free Web tutorials">
Definir el autor de una página web
<meta name="author" content="John Doe">
Refrescar el documento cada 30 segundos
<meta http-equiv="refresh" content="30">
Configuración de la ventana gráfica para que su sitio web se vea bien en todos los dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ejm
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> </head> <body> <p>All meta information goes inside the head section.</p> </body> </html>
Configuración de la ventana gráfica
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora.
Debes incluir el siguiente elemento <meta> en todas tus páginas web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página. La parte width=device-width establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo). La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez. Este es un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica.
El elemento <script>
El elemento <script> se usa para definir JavaScripts del lado del cliente.
Ejm
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
El elemento <base>
El elemento <base> especifica la URL base y/o el destino para todas las URL relativas en una página. La etiqueta <base> debe tener presente un atributo href o target, o ambos. ¡Solo puede haber un único elemento <base> en un documento.
Ejm
<!DOCTYPE html> <html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body> <h1>The base element</h1> <p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p> <p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p> </body> </html>
Resumen
| Etiqueta | Descripción |
|---|---|
| <head> | Define la información acerca del documento. |
| <title> | Define el título de un documento. |
| <base> | Define una dirección predeterminada o un destino predeterminado para todos los enlaces en una página. |
| <link> | Define la relación entre un documento y un recurso externo. |
| <meta> | Define metadatos sobre un documento HTML. |
| <script> | Define script de lado de cliente. |
| <style> | Define la información de estilo para un documento. |