Elementos de cabecera HTML

Más ejemplos

Título del documento
La etiqueta <title> define el título del documento.
Todos los enlaces tienen un objetivo
Cómo usar la etiqueta base para que todos los enlaces de la página se abran en una nueva ventana.
Descripción del documento
Usar el elemento <meta> para describir el documento.
Palabras clave del documento
Usar el elemento <meta> para definir las palabras clave del documento.
Redirigir usuarios
Cómo redirigir a los usuarios a una nueva URL.

Elemento <head> de HTML

El elemento <head> es el contenedor de todos los elementos de la cabecera. Los elementos dentro de <head> pueden contener scripts, indicar a los navegadores dónde pueden encontrar las hojas de estilo, proporcionar información metadata, etc.

Las siguientes etiquetas se pueden agregar al segmento head: <title>, <base>, <link>, <meta>, <script> y <style>.

Elemento <title> de HTML

La etiqueta <title> define el título del documento.

El elemento title es obligatorio en todos los documentos HTML/XHTML.

El elemento title puede:

  • Título definido en la barra de herramientas del navegador
  • Título que se muestra cuando la página se agrega a los favoritos
  • Título de la página que se muestra en los resultados de los motores de búsqueda

Un documento HTML simplificado:

<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
</head>
<body>
El contenido del documento......
</body>
</html>

Elemento <base> de HTML

La etiqueta <base> define la dirección predeterminada o el objetivo predeterminado (target) para todos los enlaces en la página:

<head>
<base href="http://www.codew3c.com/images/" />
<base target="_blank" />
</head>

Elemento <link> de HTML

La etiqueta <link> define la relación entre el documento y recursos externos.

La etiqueta <link> se utiliza más a menudo para conectar hojas de estilo:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Elemento <style> de HTML

La etiqueta <style> se utiliza para definir información de estilo para el documento HTML.

Puedes definir estilos para los elementos HTML dentro del elemento style:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Elemento <meta> de HTML

Los metadatos (metadata) son información sobre los datos.

La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los metadatos no se muestran en la página, pero son legibles para las máquinas.

En situaciones típicas, el elemento meta se utiliza para definir la descripción de la página, palabras clave, autor del documento, fecha de última modificación y otros metadatos.

La etiqueta <meta> siempre se encuentra dentro del elemento head.

Los metadatos se pueden usar en navegadores (cómo mostrar contenido o recargar la página), motores de búsqueda (palabras clave) u otros servicios web.

Palabras clave para motores de búsqueda

Algunos motores de búsqueda utilizarán las propiedades name y content del elemento meta para indexar su página.

El siguiente elemento meta define la descripción de la página:

<meta name="description" content="Tutoriales gratuitos en línea sobre HTML, CSS, XML" />

El siguiente elemento meta define las palabras clave de la página:

<meta name="keywords" content="HTML, CSS, XML" />

El propósito de las propiedades name y content es describir el contenido de la página.

Elemento <script> de HTML

La etiqueta <script> se utiliza para definir scripts del cliente, como JavaScript.

Explicaremos el elemento script en un capítulo posterior.

Elementos de cabecera HTML

Etiqueta Descripción
<head> Define información sobre el documento.
<title> Define el título del documento.
<base> Define la dirección o el destino predeterminado de todos los enlaces en la página.
<link> Define la relación del documento con recursos externos.
<meta> Define metadatos del documento HTML.
<script> Define scripts del cliente.
<style> Define la información de estilo del documento.