Cabeza de HTML
Cabeza de HTML
El elemento HTML 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. Metadata no se muestra.
Los metadatos generalmente definen el título del documento, conjunto de caracteres, estilos, enlaces, scripts y otra metainformación.
Las siguientes etiquetas describen los metadatos: título, estilo, meta, enlace, script y base.
El elemento HTML title
El elemento title define el título del documento y es obligatorio en todos los documentos HTML / XHTML.
El elemento title:
- define un título en la pestaña 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
Un documento HTML simple:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
El elemento HTML style
El elemento style se usa 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>
El elemento HTML link
El elemento link se usa para vincular a hojas de estilo externas:
Ejemplo
<link rel="stylesheet" href="mystyle.css">
El elemento HTML meta
El elemento meta se usa para especificar qué conjunto de caracteres se usa, descripción de página, palabras clave, autor y otros metadatos.
Los navegadores usan la metadata (cómo mostrar el contenido), los motores de búsqueda (palabras clave) y otros servicios web.
Definir el conjunto de caracteres utilizado:
<meta charset="UTF-8">
Defina una descripción de su página web:
<meta name="description" content="Free Web tutorials">
Definir palabras clave para los motores de búsqueda:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Definir el autor de una página:
<meta name="author" content="John Doe">
Actualizar el documento cada 30 segundos:
<meta http-equiv="refresh" content="30">
Ejemplo de etiquetas meta:
Ejemplo
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Configuración de la ventana gráfica
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica a través de la etiqueta meta.
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de computadora.
Debe incluir el siguiente elemento de ventana meta en todas sus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un elemento de ventana meta le da instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página.
El ancho = parte del ancho del dispositivo establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La escala inicial = 1.0 parte 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 la ventana gráfica y la misma página web con la metaetiqueta de la ventana gráfica:
Consejo: Si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces siguientes para ver la diferencia.
El elemento HTML script
El elemento script se usa para definir JavaScripts del lado del cliente.
Este JavaScript escribe "¡Hola, JavaScript!" en un elemento HTML con id = "demo":
Ejemplo
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}</script>
El elemento HTML base
El elemento base especifica la URL base y el objetivo base para todas las URL relativas en una página:
Ejemplo
<base href="https://www.w3schools.com/images/" target="_blank">
¿Omitir html, head y body?
De acuerdo con el estándar HTML5; las etiquetas html, body y head pueden omitirse.
El siguiente código se validará como HTML5:
Ejemplo
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Nota:
W3Schools no recomienda omitir las etiquetas html y body. Omitir estas etiquetas puede bloquear el software DOM o XML y producir errores en navegadores antiguos (IE9).
Sin embargo, omitir la etiqueta head ha sido una práctica común desde hace bastante tiempo.
Elementos de cabeza 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 |