Una guía simple para elementos HTML
<head>
- Mínimo Recomendado
- Elementos
- Meta
- Enlaces
- Iconos
- Social
- Navegadores / Plataformas
- Navegadores (Chinos)
- Enlaces de Aplicaciones
- Otros Recursos
- Proyectos Relacionados
- Otros Formatos
- Traducciones
- Contribuir
- Autor
- Autor de la traducción
- Licencia
A continuación se muestran los elementos esenciales para cualquier documento web (sitios web/aplicaciones):
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Las 2 etiquetas meta anteriores *deben* aparecer primero en el <head>
para garantizar consistentemente el renderizado correcto del documento.
Cualquier otro elemento head debe venir *después* de estas etiquetas.
-->
<title>Título de la Página</title>meta charset - define la codificación del sitio web, utf-8 es el estándar
meta name="viewport" - configuración de la ventana gráfica relacionada con la capacidad de respuesta móvil
width=device-width - usar el ancho físico del dispositivo (¡excelente para móviles!)
initial-scale=1 - el zoom inicial, 1 significa sin zoom
Los elementos válidos para <head> incluyen meta, link, title, style, script, noscript, y base.
Estos elementos proporcionan información sobre cómo debe ser percibido y renderizado un documento por las tecnologías web. Por ejemplo: navegadores, motores de búsqueda, bots, etc.
<!--
Establece la codificación de caracteres para este documento, para que
todos los caracteres dentro del espacio UTF-8 (como los emojis)
se rendericen correctamente.
-->
<meta charset="utf-8">
<!-- Establece el título del documento -->
<title>Título de la Página</title>
<!-- Establece la URL base para todas las URLs relativas dentro del documento -->
<base href="https://ejemplo.com/pagina.html">
<!-- Enlace a un archivo CSS externo -->
<link rel="stylesheet" href="estilos.css">
<!-- Usado para agregar CSS dentro del documento -->
<style>
/* ... */
</style>
<!-- JavaScript y etiquetas No-JavaScript -->
<script src="script.js"></script>
<script>
// función(es) aquí
</script>
<noscript>
<!-- Alternativa sin JS -->
</noscript><!--
Las siguientes 2 etiquetas meta *deben* aparecer primero en el <head>
para garantizar consistentemente el renderizado correcto del documento.
Cualquier otro elemento head debe venir *después* de estas etiquetas.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Permite controlar desde dónde se cargan los recursos.
Colocar lo más temprano posible en el <head>, ya que la etiqueta
solo se aplica a los recursos que se declaran después de ella.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Nombre de la aplicación web (solo debe usarse si el sitio web se usa como una aplicación) -->
<meta name="application-name" content="Nombre de la Aplicación">
<!-- Color del tema para Chrome, Firefox OS y Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Descripción corta del documento (límite de 150 caracteres) -->
<!-- Este contenido *puede* ser usado como parte de los resultados del motor de búsqueda. -->
<meta name="description" content="Una descripción de la página">
<!-- Control del comportamiento de rastreo e indexación del motor de búsqueda -->
<meta name="robots" content="index,follow"><!-- Todos los Motores de Búsqueda -->
<meta name="googlebot" content="index,follow"><!-- Específico de Google -->
<!-- Le dice a Google que no muestre el cuadro de búsqueda de enlaces del sitio -->
<meta name="google" content="nositelinkssearchbox">
<!-- Le dice a Google que no proporcione una traducción para este documento -->
<meta name="google" content="notranslate">
<!-- Verificar la propiedad del sitio web -->
<meta name="google-site-verification" content="token_de_verificacion"><!-- Google Search Console -->
<meta name="yandex-verification" content="token_de_verificacion"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="token_de_verificacion"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="token_de_verificacion"><!-- Alexa Console -->
<meta name="p:domain_verify" content="codigo_de_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="codigo_norton"><!-- Norton Safe Web -->
<!-- Identifica el software usado para construir el documento (ej. - WordPress, Dreamweaver) -->
<meta name="generator" content="programa">
<!-- Breve descripción del tema de tu documento -->
<meta name="subject" content="tema de tu documento">
<!-- Proporciona una calificación de edad general basada en el contenido del documento -->
<meta name="rating" content="General">
<!-- Permite controlar cómo se pasa la información del referente -->
<meta name="referrer" content="no-referrer">
<!-- Desactiva la detección y el formateo automático de posibles números de teléfono -->
<meta name="format-detection" content="telephone=no">
<!-- Desactiva completamente la búsqueda previa de DNS configurándola en "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Especifica que el documento aparezca en un marco específico -->
<meta http-equiv="Window-Target" content="_value">
<!-- Etiquetas Geo -->
<meta name="ICBM" content="latitud, longitud">
<meta name="geo.position" content="latitud;longitud">
<meta name="geo.region" content="pais[-estado]"><!-- Código de país (ISO 3166-1): obligatorio, código de estado (ISO 3166-2): opcional; ej. content="US" / content="US-NY" -->
<meta name="geo.placename" content="ciudad/pueblo"><!-- ej. content="Nueva York" -->
<!-- Monetización Web https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$indicador_de_pago.ejemplo">- 📖 Meta tags que Google entiende
- 📖 WHATWG Wiki: MetaExtensions
- 📖 ICBM en Wikipedia
- 📖 Geoetiquetado en Wikipedia
<!-- Apunta a una hoja de estilo externa -->
<link rel="stylesheet" href="https://ejemplo.com/estilos.css">
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="https://ejemplo.com/articulo/?pagina=2">
<!-- Enlaza a una versión AMP HTML del documento actual -->
<link rel="amphtml" href="https://ejemplo.com/ruta/a/version-amp.html">
<!-- Enlaces a un archivo JSON que especifica credenciales de "instalación" para las aplicaciones web -->
<link rel="manifest" href="manifest.json">
<!-- Enlaces a información sobre el/los autor(es) del documento -->
<link rel="author" href="humans.txt">
<!-- Se refiere a una declaración de derechos de autor que se aplica al contexto del enlace -->
<link rel="license" href="copyright.html">
<!-- Da una referencia a una ubicación en tu documento que puede estar en otro idioma -->
<link rel="alternate" href="https://es.ejemplo.com/" hreflang="es">
<!-- Proporciona información sobre un autor u otra persona -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">
<!-- Enlaces a un documento que describe una colección de registros, documentos u otros materiales de interés histórico -->
<link rel="archives" href="https://ejemplo.com/archivos/">
<!-- Enlaces al recurso de nivel superior en una estructura jerárquica -->
<link rel="index" href="https://ejemplo.com/articulo/">
<!-- Proporciona una auto-referencia - útil cuando el documento tiene múltiples referencias posibles -->
<link rel="self" type="application/atom+xml" href="https://ejemplo.com/atom.xml">
<!-- Los documentos primero, último, anterior y siguiente en una serie de documentos, respectivamente -->
<link rel="first" href="https://ejemplo.com/articulo/">
<link rel="last" href="https://ejemplo.com/articulo/?pagina=42">
<link rel="prev" href="https://ejemplo.com/articulo/?pagina=1">
<link rel="next" href="https://ejemplo.com/articulo/?pagina=3">
<!-- Usado cuando se utiliza un servicio de terceros para mantener un blog -->
<link rel="EditURI" href="https://ejemplo.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Forma un comentario automatizado cuando otro blog WordPress enlaza a tu blog o entrada de WordPress -->
<link rel="pingback" href="https://ejemplo.com/xmlrpc.php">
<!-- Notifica a una URL cuando enlazas a ella en tu documento -->
<link rel="webmention" href="https://ejemplo.com/webmention">
<!-- Permite publicar en tu propio dominio usando un cliente Micropub -->
<link rel="micropub" href="https://ejemplo.com/micropub">
<!-- Búsqueda Abierta -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Título de Búsqueda">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/ejemplo" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://ejemplo.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prebúsqueda, precarga, pre-navegación -->
<!-- Más información: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//ejemplo.com/">
<link rel="preconnect" href="https://www.ejemplo.com/">
<link rel="prefetch" href="https://www.ejemplo.com/">
<link rel="prerender" href="https://ejemplo.com/">
<link rel="preload" href="imagen.png" as="image"><!-- Para IE 10 y anteriores -->
<!-- Colocar favicon.ico en el directorio raíz - no se necesita etiqueta -->
<!-- Icono en la resolución más alta que necesitamos -->
<link rel="icon" sizes="192x192" href="/ruta/al/icono.png">
<!-- Icono de Apple Touch (reutilizar icono.png de 192px) -->
<link rel="apple-touch-icon" href="/ruta/al/apple-touch-icon.png">
<!-- Icono de Pestaña Fijada de Safari -->
<link rel="mask-icon" href="/ruta/al/icono.svg" color="blue">- 📖 Todo sobre Favicons (Y los Iconos Touch)
- 📖 Crear Iconos de Pestañas Fijadas
- 📖 Hoja de Trucos de Favicon
- 📖 Iconos y Colores del Navegador
La mayoría del contenido se comparte en Facebook como una URL, por lo que es importante que marques tu sitio web con etiquetas Open Graph para controlar cómo aparece tu contenido en Facebook. Más sobre el Marcado Facebook Open Graph
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://ejemplo.com/pagina.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Título del Contenido">
<meta property="og:image" content="https://ejemplo.com/imagen.jpg">
<meta property="og:image:alt" content="Una descripción de lo que hay en la imagen (no un pie de foto)">
<meta property="og:description" content="Descripción Aquí">
<meta property="og:site_name" content="Nombre del Sitio">
<meta property="og:locale" content="es_ES">
<meta property="article:author" content="">- 📖 Protocolo Open Graph
- 🛠 Prueba tu página con el Depurador de Compartidos de Facebook
Con las Tarjetas de Twitter, puedes adjuntar fotos, videos y experiencias multimedia enriquecidas a los Tweets, ayudando a dirigir tráfico a tu sitio web. Más sobre las Tarjetas de Twitter
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cuenta_del_sitio">
<meta name="twitter:creator" content="@cuenta_individual">
<meta name="twitter:url" content="https://ejemplo.com/pagina.html">
<meta name="twitter:title" content="Título del Contenido">
<meta name="twitter:description" content="Descripción del contenido menor a 200 caracteres">
<meta name="twitter:image" content="https://ejemplo.com/imagen.jpg">
<meta name="twitter:image:alt" content="Una descripción textual de la imagen que transmite la naturaleza esencial de una imagen a usuarios con discapacidad visual. Máximo 420 caracteres.">- 📖 Comenzando con las tarjetas — Desarrolladores de Twitter
- 🛠 Prueba tu página con el Validador de Tarjetas de Twitter
Si incrustas tweets en tu sitio web, Twitter puede usar información de tu sitio para personalizar contenido y sugerencias para usuarios de Twitter. Más sobre las opciones de privacidad de Twitter.
<!-- no permitir que Twitter use la información de tu sitio para propósitos de personalización -->
<meta name="twitter:dnt" content="on"><html lang="" itemscope itemtype="https://schema.org/Article">
<head>
<link rel="author" href="">
<link rel="publisher" href="">
<meta itemprop="name" content="Título del Contenido">
<meta itemprop="description" content="Descripción del contenido menor a 200 caracteres">
<meta itemprop="image" content="https://ejemplo.com/imagen.jpg">Nota: Estas etiquetas meta requieren que los atributos itemscope y itemtype se añadan a la etiqueta <html>.
- 📖 Comenzando - schema.org
- 🛠 Prueba tu página con la Prueba de Resultados Enriquecidos
Pinterest te permite evitar que las personas guarden cosas de tu sitio web, según su centro de ayuda. La descripción es opcional.
<meta name="pinterest" content="nopin" description="¡Lo siento, no puedes guardar desde mi sitio web!"><meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- La URL de la versión web de tu artículo -->
<link rel="canonical" href="https://ejemplo.com/articulo.html">
<!-- El estilo a usar para este artículo -->
<meta property="fb:article_style" content="miestilodearticulo"><link rel="alternate" type="application/json+oembed"
href="https://ejemplo.com/servicios/oembed?url=http%3A%2F%2Fejemplo.com%2Ffoo%2F&format=json"
title="Perfil oEmbed: JSON">
<link rel="alternate" type="text/xml+oembed"
href="https://ejemplo.com/servicios/oembed?url=http%3A%2F%2Fejemplo.com%2Ffoo%2F&format=xml"
title="Perfil oEmbed: XML">Los usuarios que comparten páginas web en qq wechat tendrán un mensaje formateado
<meta itemprop="name" content="título compartido">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="contenido compartido"><!-- Seleccionar orden del motor de renderizado -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!-- Bloquea la pantalla en la orientación especificada -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- Mostrar este documento en pantalla completa -->
<meta name="x5-fullscreen" content="true">
<!-- El documento se mostrará en "modo aplicación" (pantalla completa, etc.) -->
<meta name="x5-page-mode" content="app"><!-- Bloquea la pantalla en la orientación especificada -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- Mostrar este documento en pantalla completa -->
<meta name="full-screen" content="yes">
<!-- El navegador UC mostrará imágenes incluso en "modo texto" -->
<meta name="imagemode" content="force">
<!-- El documento se mostrará en "modo aplicación" (pantalla completa, prohibiendo gestos, etc.) -->
<meta name="browsermode" content="application">
<!-- Deshabilitado el "modo nocturno" del navegador UC para este documento -->
<meta name="nightmode" content="disable">
<!-- Simplificar el documento para reducir la transferencia de datos -->
<meta name="layoutmode" content="fitscreen">
<!-- Deshabilitar la función del navegador UC de "escalar fuente cuando hay muchas palabras en este documento" -->
<meta name="wap-font-scale" content="no"><!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="Enlaces de App">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="Enlaces de App">
<meta property="al:android:package" content="org.applinks">
<!-- Respaldo Web -->
<meta property="al:web:url" content="https://applinks.org/documentation">- 📖 Documentación de HTML5 Boilerplate: El HTML
- 📖 Documentación de HTML5 Boilerplate: Extender y personalizar
- Fragmentos de HEAD para Atom - Paquete de Atom para fragmentos de
HEAD - Fragmentos de HEAD para Sublime Text - Paquete de Sublime Text para fragmentos de
HEAD - head-it - Interfaz CLI para fragmentos de
HEAD - vue-head - Manipulación de la información meta de la etiqueta
HEADpara Vue.js
- 🇮🇩 Bahasa
- 🇧🇷 Portugués Brasileño
- 🇨🇳 Chino (Simplificado)
- 🇩🇪 Alemán
- 🇮🇹 Italiano
- 🇯🇵 Japonés
- 🇰🇷 Coreano
- 🇷🇺 Ruso/Русский
- 🇪🇸 Español
- 🇹🇷 Turco/Türkçe
Abre un issue o una solicitud de extracción para sugerir cambios o adiciones.
El repositorio HEAD consiste en dos ramas:
Esta rama consiste en el archivo README.md que se refleja en el sitio web htmlhead.dev. Todos los cambios al contenido de la guía deben hacerse en este archivo.
Por favor, sigue estos pasos para las solicitudes de extracción:
{:.list-style-default}
- Modifica solo una etiqueta, o un conjunto relacionado de etiquetas a la vez
- Usa comillas dobles en los atributos
- No incluyas una barra diagonal al final en elementos de cierre automático — la especificación HTML5 dice que son opcionales
- Considera incluir un enlace a la documentación que respalde tu cambio
Esta rama es responsable del sitio web htmlhead.dev. Usamos Jekyll para desplegar el archivo README.md markdown a GitHub Pages. Todas las modificaciones relacionadas con el sitio web deben hacerse en esta rama.
Puede ser útil revisar la Documentación de Jekyll y entender cómo funciona Jekyll antes de trabajar en esta rama.
Revisa todos los increíbles contribuidores 🤩
Josh Buchea
- GitHub: @joshbuchea
- Mastodon: @[email protected]
Alvaro Araoz
- GitHub: @alvaroadlf
Si este proyecto fue útil para ti o tu organización, considera apoyar mi trabajo directamente:
¡Toda ayuda cuenta, gracias! 🙏
— Josh
