HTML - El elemento principal
El elemento HTML <head>es un contenedor para los siguientes elementos:
<title>, <style>,
<meta>, <link>, <script>y <base>.
El elemento HTML <head>
El <head>elemento es un contenedor de metadatos (datos sobre datos) y se coloca entre la <html>etiqueta y la <body>etiqueta.
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 HTML <título>
El <title>elemento 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 <title>elemento 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 <title>elemento:
- 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, trate de hacer 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>
El elemento HTML <estilo>
El <style>elemento se utiliza para definir la información de estilo para una sola página HTML:
Ejemplo
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
El elemento HTML <enlace>
El <link>elemento define la relación entre el documento actual y un recurso externo.
La <link>
etiqueta se usa con mayor frecuencia para vincular a hojas de estilo externas:
Ejemplo
<link rel="stylesheet" href="mystyle.css">
Sugerencia: para obtener más información sobre CSS, visite nuestro Tutorial de CSS .
El elemento HTML <meta>
El <meta>elemento se usa normalmente 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.
Ejemplos
Defina el juego de caracteres utilizado:
<meta charset="UTF-8">
Definir palabras clave para motores de búsqueda:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define una descripción de tu 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">
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">
Ejemplo de <meta>etiquetas:
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">
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 <meta>elemento 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 width=device-widthparte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1.0parte 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:
Sugerencia: si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces a continuación para ver la diferencia.
El elemento HTML <script>
El <script>elemento se utiliza para definir JavaScripts del lado del cliente.
El siguiente JavaScript escribe "¡Hola, JavaScript!" en un elemento HTML con id="demo":
Ejemplo
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Sugerencia: para obtener más información sobre JavaScript, visite nuestro tutorial de JavaScript .
El elemento HTML <base>
El <base>elemento especifica la URL base y/o el destino de todas las URL relativas de una página.
La <base>etiqueta debe tener presente un href o un atributo de destino, o ambos.
¡ Solo puede haber un único <base>
elemento en un documento!
Ejemplo
Especifique una URL predeterminada y un destino predeterminado para todos los enlaces en 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.asp">HTML base Tag</a>
</body>
Resumen del capítulo
- El
<head>elemento es un contenedor de metadatos (datos sobre datos) - El
<head>elemento se coloca entre la<html>etiqueta y la<body>etiqueta. - El
<title>elemento es obligatorio y define el título del documento. - El
<style>elemento se utiliza para definir la información de estilo para un solo documento. - La
<link>etiqueta se usa con mayor frecuencia para vincular a hojas de estilo externas - El
<meta>elemento se usa normalmente 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. - El
<script>elemento se utiliza para definir JavaScripts del lado del cliente - El
<base>elemento especifica la URL base y/o el destino de todas las URL relativas en una página.
Elementos de encabezado HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .