{"id":208,"date":"2024-05-21T09:48:33","date_gmt":"2024-05-21T07:48:33","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=208"},"modified":"2024-05-21T09:48:33","modified_gmt":"2024-05-21T07:48:33","slug":"41-el-elemento-head","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/41-el-elemento-head\/","title":{"rendered":"41. El elemento head"},"content":{"rendered":"\n<p>El elemento <strong><em>&lt;head&gt;<\/em><\/strong> es un contenedor de los siguientes elementos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;title><\/li>\n\n\n\n<li>&lt;style><\/li>\n\n\n\n<li>&lt;meta><\/li>\n\n\n\n<li>&lt;link><\/li>\n\n\n\n<li>&lt;script><\/li>\n\n\n\n<li>&lt;base><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;head&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;head&gt;<\/em><\/strong> es un contenedor de <strong>metadatos<\/strong> (datos sobre datos) y se coloca entre la etiqueta <strong><em>&lt;html&gt;<\/em><\/strong> y la etiqueta <strong><em>&lt;body&gt;<\/em><\/strong>.&nbsp;Los <strong>metadatos HTML<\/strong> son datos sobre el documento HTML. Los <strong>metadatos<\/strong> no se muestran.&nbsp;Los <strong>metadatos<\/strong> suelen definir el t\u00edtulo del documento, el conjunto de caracteres, los estilos, los scripts y otra <strong>metainformaci\u00f3n<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;title&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;title&gt;<\/em><\/strong> define el t\u00edtulo del documento. El t\u00edtulo debe ser solo de texto y se muestra en la barra de t\u00edtulo del navegador o en la pesta\u00f1a de la p\u00e1gina.<\/p>\n\n\n\n<p>\u00a1El elemento <strong><em>&lt;title&gt;<\/em><\/strong> es obligatorio en los documentos HTML!<\/p>\n\n\n\n<p>\u00a1El contenido del t\u00edtulo de una p\u00e1gina es muy importante para la <strong>optimizaci\u00f3n de motores de b\u00fasqueda<\/strong> (<strong>SEO<\/strong>)! Los algoritmos de los <strong>motores de b\u00fasqueda<\/strong> utilizan el t\u00edtulo de la p\u00e1gina para decidir el orden al enumerar las p\u00e1ginas en los resultados de b\u00fasqueda.<\/p>\n\n\n\n<p>El elemento <strong><em>&lt;title&gt;<\/em><\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>define un t\u00edtulo en la barra de herramientas del navegador<\/li>\n\n\n\n<li>proporciona un t\u00edtulo para la p\u00e1gina cuando se agrega a favoritos<\/li>\n\n\n\n<li>muestra un t\u00edtulo para la p\u00e1gina en los resultados del motor de b\u00fasqueda<\/li>\n<\/ul>\n\n\n\n<p>Por lo tanto, trata de hacer que el t\u00edtulo sea lo m\u00e1s preciso y significativo posible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;style&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;style&gt;<\/em><\/strong> se usa para definir la informaci\u00f3n de estilo para una sola p\u00e1gina HTML.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;style&gt;\n&nbsp; body {background-color: powderblue;}\n&nbsp; h1 {color: red;}\n&nbsp; p {color: blue;}\n&lt;\/style&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;link&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;link&gt;<\/em><\/strong> define la relaci\u00f3n entre el documento actual y un recurso externo.&nbsp;La etiqueta <strong><em>&lt;link&gt;<\/em><\/strong> se usa con mayor frecuencia para vincular a hojas de estilo externas.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"mystyle.css\"&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;meta&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;meta&gt;<\/em><\/strong> generalmente se usa para especificar el conjunto de caracteres, la descripci\u00f3n de la p\u00e1gina, las palabras clave, el autor del documento y la configuraci\u00f3n de la ventana gr\u00e1fica.<\/p>\n\n\n\n<p>Los <strong>metadatos<\/strong> no se mostrar\u00e1n en la p\u00e1gina, pero los utilizan los <strong>navegadores<\/strong> (c\u00f3mo mostrar contenido o recargar la p\u00e1gina), los <strong>motores de b\u00fasqueda<\/strong> (palabras clave) y otros servicios web.<\/p>\n\n\n\n<p><strong>Ejms<\/strong><\/p>\n\n\n\n<p>Definir el set de caracteres usados<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta charset=\"UTF-8\"&gt;<\/pre>\n\n\n\n<p>Definir las palabras clave para motores de b\u00fasqueda<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"keywords\" content=\"HTML, CSS, JavaScript\"&gt;<\/pre>\n\n\n\n<p>Definir una descripci\u00f3n de nuestra p\u00e1gina web<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"description\" content=\"Free Web tutorials\"&gt;<\/pre>\n\n\n\n<p>Definir el autor de una p\u00e1gina web<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"author\" content=\"John Doe\"&gt;<\/pre>\n\n\n\n<p>Refrescar el documento cada 30 segundos<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta http-equiv=\"refresh\" content=\"30\"&gt;<\/pre>\n\n\n\n<p>Configuraci\u00f3n de la ventana gr\u00e1fica para que su sitio web se vea bien en todos los dispositivos:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"description\" content=\"Free Web tutorials\"&gt;\n&lt;meta name=\"keywords\" content=\"HTML, CSS, JavaScript\"&gt;\n&lt;meta name=\"author\" content=\"John Doe\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;All meta information goes inside the head section.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n de la ventana gr\u00e1fica<\/h2>\n\n\n\n<p>La ventana gr\u00e1fica es el \u00e1rea visible del usuario de una p\u00e1gina web. Var\u00eda seg\u00fan el dispositivo: ser\u00e1 m\u00e1s peque\u00f1o en un tel\u00e9fono m\u00f3vil que en la pantalla de una computadora.<\/p>\n\n\n\n<p>Debes incluir el siguiente elemento <strong><em>&lt;meta&gt;<\/em><\/strong> en todas tus p\u00e1ginas web.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\n\n\n\n<p>Esto le da al navegador instrucciones sobre c\u00f3mo controlar las dimensiones y la escala de la p\u00e1gina.&nbsp;La parte <strong><em>width=device-width<\/em><\/strong> establece el ancho de la p\u00e1gina para seguir el ancho de pantalla del dispositivo (que variar\u00e1 seg\u00fan el dispositivo).&nbsp;La parte <strong><em>initial-scale=1.0<\/em><\/strong> establece el nivel de zoom inicial cuando el navegador carga la p\u00e1gina por primera vez.&nbsp;Este es un ejemplo de una p\u00e1gina web sin la metaetiqueta de ventana gr\u00e1fica y la misma p\u00e1gina web con la metaetiqueta de ventana gr\u00e1fica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;script&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;script&gt;<\/em><\/strong> se usa para definir <strong>JavaScripts<\/strong> del lado del cliente.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Page Title&lt;\/title&gt;\n&lt;script&gt;\nfunction myFunction() {\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\n}\n&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;My Web Page&lt;\/h1&gt;\n&lt;p id=\"demo\"&gt;A Paragraph&lt;\/p&gt;\n&lt;button type=\"button\" onclick=\"myFunction()\"&gt;Try it&lt;\/button&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El elemento &lt;base&gt;<\/h2>\n\n\n\n<p>El elemento <strong><em>&lt;base&gt;<\/em><\/strong> especifica la URL base y\/o el destino para todas las URL relativas en una p\u00e1gina.&nbsp;La etiqueta <strong><em>&lt;base&gt;<\/em><\/strong> debe tener presente un atributo <strong><em>href<\/em> <\/strong>o <strong><em>target<\/em><\/strong>, o ambos.&nbsp;\u00a1Solo puede haber un \u00fanico elemento <strong><em>&lt;base&gt;<\/em><\/strong> en un documento.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;base href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;The base element&lt;\/h1&gt;\n\n&lt;p&gt;&lt;img src=\"images\/stickman.gif\" width=\"24\" height=\"39\" alt=\"Stickman\"&gt;\n - Notice that we have only specified a relative address for the image. \nSince we have specified a base URL in the head section, \nthe browser will look for the image at\n \"https:\/\/www.w3schools.com\/images\/stickman.gif\".&lt;\/p&gt;\n\n&lt;p&gt;&lt;a href=\"tags\/tag_base.asp\"&gt;HTML base tag&lt;\/a&gt;\n - Notice that the link opens in a new window, even if\n it has no target=\"_blank\" attribute. This is because\n the target attribute of the base element is set to \"_blank\".&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Etiqueta<\/th><th>Descripci\u00f3n<\/th><\/tr><tr><td><strong><em>&lt;head&gt;<\/em><\/strong><\/td><td>Define la informaci\u00f3n acerca del documento.<\/td><\/tr><tr><td><strong><em>&lt;title&gt;<\/em><\/strong><\/td><td>Define el t\u00edtulo de un documento.<\/td><\/tr><tr><td><strong><em>&lt;base&gt;<\/em><\/strong><\/td><td>Define una direcci\u00f3n predeterminada o un destino predeterminado para todos los enlaces en una p\u00e1gina.<\/td><\/tr><tr><td><strong><em>&lt;link&gt;<\/em><\/strong><\/td><td>Define la relaci\u00f3n entre un documento y un recurso externo.<\/td><\/tr><tr><td><strong><em>&lt;meta&gt;<\/em><\/strong><\/td><td>Define metadatos sobre un documento HTML.<\/td><\/tr><tr><td><strong><em>&lt;script&gt;<\/em><\/strong><\/td><td>Define script de lado de cliente.<\/td><\/tr><tr><td><strong><em>&lt;style&gt;<\/em><\/strong><\/td><td>Define la informaci\u00f3n de estilo para un documento.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>El elemento &lt;head&gt; es un contenedor de los siguientes elementos: El elemento &lt;head&gt; El elemento &lt;head&gt; es un contenedor de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-208","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"El elemento &lt;head&gt; es un contenedor de los siguientes elementos: El elemento &lt;head&gt; El elemento &lt;head&gt; es un contenedor de [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/208\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/208\/revisions\/210"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}