Definición destacada

¿Como funciona el comando en HTML5: 'head'?

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Linux HTML5 Dominios

La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra head

Última modificación: 2024-06-10

Instrucción HTML5: `<head>`

El elemento <head> de HTML5 es un contenedor para los metadatos (datos sobre datos) y otros elementos importantes de la cabecera de un documento HTML. En este espacio se pueden colocar elementos que proporcionen información sobre el documento, como enlaces a hojas de estilo, declaraciones de metadatos , enlaces a iconos y scripts que deben cargar antes del cuerpo del documento.

Atributos del elemento <head>:

global
- En HTML5, el <head> puede tener algunos atributos globales que se pueden aplicar a la mayoría de los elementos HTML:
  - accesskey: Permite que un elemento reciba el foco cuando se presiona una tecla específica.
  - class: Permite definir una o más clases CSS.
  - contenteditable: Indica si el contenido es editable.
  - *data- attributes**: Permiten almacenar información personalizada en el elemento.
  - dir: Indica la dirección del texto. Puede ser ltr (left to right) o rtl (right to left).
  - draggable: Especifica si el elemento es arrastrable.
  - hidden: Indica que el elemento no es relevante.
  - id: Define un identificador único.
  - lang: Especifica el idioma del contenido del elemento.
  - spellcheck: Determina si el texto es revisado ortográficamente.
  - style: Permite definir estilos CSS en línea.
  - tabindex: Define el orden de tabulación.
  - title: Proporciona información adicional cuando se pasa el ratón sobre el elemento.
  - translate: Indica si el contenido del elemento debe ser traducido.

Los atributos específicos aplicables directamente al <head> son menos relevantes comparados con los elementos que puede contener, ya que su propósito principal es contener metadatos y enlaces a recursos.

Uso del `<head>` en HTML5

El uso del <head> en HTML5 incluye la definición de elementos como <title>, <meta>, <link>, <style>, <script>, y otros elementos que no se visualizan directamente en la página pero que son esenciales para el funcionamiento y la optimización del documento HTML.

Elementos comunes dentro de `<head>`

<title>: Define el título del documento que aparece en la pestaña del navegador.
<meta>: Proporciona metadatos como la descripción, palabras clave y la codificación de caracteres.
<link>: Define una relación entre el documento actual y un recurso externo, como una hoja de estilo CSS.
<style>: Contiene CSS que se aplica al documento.
<script>: Contiene o referencia scripts de JavaScript.

Ejemplos sencillos

Aquí hay un ejemplo básico que muestra cómo se pueden organizar estos elementos dentro del <head>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Esta es una página de ejemplo para demostrar el uso del elemento <head> en HTML5">
    <meta name="keywords" content="HTML, CSS, JavaScript, Ejemplo">
    <meta name="author" content="Nombre del autor">
    <title>Ejemplo de uso del head en HTML5</title>
    <link rel="stylesheet" href="estilos.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Bienvenido a la página de ejemplo</h1>
    <p>Este es un documento HTML básico con un elemento <strong>&lt;head&gt;</strong> bien estructurado.</p>
</body>
</html>

Descripción de los componentes del ejemplo

<meta charset="UTF-8">: Define la codificación de caracteres como UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Asegura que el diseño sea responsivo en dispositivos móviles.
<meta name="description" content="...">: Proporciona una breve descripción del documento.
<meta name="keywords" content="...">: Define palabras clave para motores de búsqueda.
<meta name="author" content="...">: Indica el autor del documento.
<title>Ejemplo de uso del head en HTML5</title>: Define el título que aparecerá en la pestaña del navegador.
<link rel="stylesheet" href="estilos.css">: Enlaza una hoja de estilo externa.
<link rel="icon" href="favicon.ico" type="image/x-icon">: Establece un icono para la pestaña del navegador.
<style>: Contiene CSS en línea.
<script src="script.js" defer></script>: Enlaza un archivo de JavaScript y utiliza el atributo defer para cargar el script después de que el documento se haya procesado.

Estos elementos y atributos juegan un papel crucial en la definición de cómo se comporta una página HTML y cómo es interpretada por diversas tecnologías web.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

¿Como funciona el comando en HTML5: 'head'?

Instrucción HTML5: <head>

Uso del <head> en HTML5

Elementos comunes dentro de <head>