HTML - El elemento Head
El elemento HTML <head> es un contenedor para los siguientes elementos: <title>, <style>, <meta>, <link>, <script>, and <base>.
El elemento HTML <head>
El elemento <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre el <html> etiqueta y la etiqueta <body>.
Los metadatos HTML son datos sobre el documento HTML. Los metadatos no se muestran.
Los metadatos normalmente definen el título del documento, el juego de caracteres, los estilos, los scripts y otra metainformación.
El elemento HTML <title>
El elemento <title> define el título del documento. El título debe ser solo 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>:
- definir 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
¡Intenta que el título sea lo más preciso y significativo posible!
Un documento HTML simple:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Inténtalo tú mismo »
El elemento HTML <style>
El elemento <style> se utiliza para definir información de estilo para una sola página HTML:
Ejemplo
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Inténtalo tú mismo »
El elemento HTML <link>
El elemento <link> define la relación entre el documento actual y un recurso externo.
El elemento <link> se utiliza con mayor frecuencia para vincular a hojas de estilo externas:
Consejo: Para aprender todo sobre CSS, visite nuestro Tutorial de CSS.
El elemento HTML <meta>
El elemento <meta> se utiliza normalmente para especificar el juego 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 utilizarán los navegadores (cómo mostrar el contenido o recargar la página), los motores de búsqueda (palabras clave) y otros servicios web.
Ejemplos
Definir el juego de caracteres utilizado:
<meta charset="UTF-8">
Definir palabras clave para motores de búsqueda:
<meta name="keywords" content="HTML, CSS, JavaScript">
Defina una descripción de su página web:
<meta name="description" content="Free Web tutorials">
Definir el autor de una página:
<meta name="author" content="John Doe">
Actualizar documento cada 30 segundos:
<meta http-equiv="refresh" content="30">
Configurar 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">
Ejemplo de etiquetas <meta>:
Ejemplo
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Inténtalo tú mismo »
Configuración de la ventana gráfica
La ventana gráfica es el área visible para el 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 la 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.
Aquí hay 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:
Consejo: Si estás navegando por esta página con un teléfono o una tableta, puedes hacer clic en los dos enlaces siguientes para ver la diferencia.
El elemento HTML <script>
El elemento <script> se utiliza para definir JavaScript del lado del cliente.
El siguiente JavaScript escribe "Hello JavaScript!" en un elemento HTML con id="demo":
Ejemplo
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Inténtalo tú mismo »
Consejo: Para aprender todo sobre JavaScript, visite nuestro Tutorial de JavaScript.
El elemento HTML <base>
El elemento <base> especifica la URL base y/o el destino para todas las URL relativas de 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!
Ejemplo
Especifique una URL predeterminada y un destino predeterminado para todos los enlaces de una página:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.html">HTML base Tag</a>
</body>
Inténtalo tú mismo »
Resumen del capítulo
- El elemento
<head>es un contenedor de metadatos (datos sobre datos) - El elemento
<head>se coloca entre la etiqueta<html>y la<body>etiqueta - El elemento
<title>es obligatorio y define el título del documento - El elemento
<style>se utiliza para definir información de estilo para un solo documento - La etiqueta
<link>se utiliza con mayor frecuencia para vincular a hojas de estilo externas - El elemento
<meta>se utiliza normalmente para especificar el juego 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 - El elemento
<script>se utiliza para definir JavaScripts del lado del cliente - El elemento
<base>especifica la URL base y/o el destino para todas las URL relativas de una página
Elementos de head HTML
| Etiqueta | Descripción |
|---|---|
| <head> | Define información sobre el documento |
| <title> | Define el título de un documento |
| <base> | Definir 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> | Definir un script del lado del cliente |
| <style> | Define información de estilo para un documento |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
