El elemento

El elemento HTML <head> es un contenedor de los siguientes elementos:

Se trata de un contenedor para metadatos (datos acerca de datos), y es colocado entre las etiquetas <html> y <body>.

los metadatos HTML son datos acerca del documento HTML, y no son mostrados. Los metadatos generalmente 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 un título para el 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. ¡La etiqueta <title> es necesaria 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 cuando se enumeran 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.

Un sencillo documento HTML

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful 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.

Ejm

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

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 HTML <meta>

El elemento <meta> se usa generalmente 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 navegadores los usan (cómo mostrar el contenido o recargar la página), los motores de búsqueda (palabras clave) y otros servicios web.

Ejms

Define el juego de caracteres utilizado

<meta charset="UTF-8">

Se definen las keywords para los motores de búsqueda

<meta name="keywords" content="HTML, CSS, JavaScript">

Se define una descripción de tu página web

<meta name="description" content="Free Web tutorials">

Se define el autor de la página

<meta name="author" content="John Doe">

Se refresca (recarga) 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">

Veamos un ejm completo de etiquetas meta.

<!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 una pantalla de computadora.

Debes incluir el siguiente elemento <meta> en todas sus 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.

El elemento <script>

El elemento <script> se utiliza para definir JavaScripts del lado del cliente.

El siguiente JavaScript escribe “¡Hola JavaScript!” en un elemento HTML con id = “demo”.

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 un href o un atributo de destino presente, o ambos.

¡Solo puede haber un único elemento <base> en un documento!

Ejm

<!DOCTYPE html>
<html>
<head>
<base href="https://websarrolladores.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

Tag Description
<head> Define información acerca del documento
<title> Define el título del documento
<base> Define una dirección predeterminada o un destino predeterminado para todos los enlaces de una página
<link> Define la relación entre un documento y un recurso externo
<meta> Define metadatos sobre un documento HTML
<script> Define un script del lado del cliente
<style> Define información de estilo para un documento