{"id":4584,"date":"2025-03-04T08:59:41","date_gmt":"2025-03-04T07:59:41","guid":{"rendered":"https:\/\/sutilweb.eu\/?page_id=4584"},"modified":"2025-03-04T08:59:41","modified_gmt":"2025-03-04T07:59:41","slug":"05-metaetiquetas-basicas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-practico\/05-metaetiquetas-basicas\/","title":{"rendered":"05. Metaetiquetas b\u00e1sicas"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">&lt;meta charset=\u00bbUTF-8\u2033&gt;<\/h2>\n\n\n\n<p><strong>charset<\/strong>&nbsp;es el&nbsp;<strong>juego de caracteres<\/strong>&nbsp;en el cual est\u00e1 modificada una p\u00e1gina. Y&nbsp;<strong>UTF-8<\/strong>&nbsp;es el&nbsp;<strong>juego de caracteres universal est\u00e1ndar<\/strong>&nbsp;en la actualidad. Existen caracteres que no se aceptan por ejm en el idioma ingl\u00e9s. En el idioma ingl\u00e9s, por ejm no existe la \u00f1, esta etiqueta&nbsp;<strong><em>&lt;meta charset=\u00bbUTF-8\u2033&gt;<\/em><\/strong>&nbsp;le comunica al documento es que utilice el juego de caracteres universal, y para el car\u00e1cter y el idioma que se est\u00e9 utilizando, lo codifique de manera correcta en el navegador.<\/p>\n\n\n\n<p>Cada uno de estos caracteres ajenos al ingl\u00e9s tienen una forma de escribirse en forma de car\u00e1cter especial. Si hacemos una b\u00fasqueda en&nbsp;<strong>Google<\/strong>&nbsp;con la consulta&nbsp;<em>caracteres especiales en HTML<\/em>&nbsp;encontraremos algunos enlaces a tablas, entre los que destacan los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/desarrolloweb.com\/articulos\/11.php\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/desarrolloweb.com\/articulos\/11.php<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ascii.cl\/es\/codigos-html.htm\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/ascii.cl\/es\/codigos-html.htm<\/a><\/li>\n<\/ul>\n\n\n\n<p>Cada car\u00e1cter especial ajeno al ingl\u00e9s tiene su codificaci\u00f3n, por ejm la \u00f1 se escribir\u00eda&nbsp;<strong><em>&amp;ntilde;<\/em><\/strong>.&nbsp;&nbsp;<strong>UTF-8<\/strong>&nbsp;evita que tengamos que escribir este tipo de c\u00f3digo a mano.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong>&nbsp;para este curso vamos a utilizar mucho la p\u00e1gina&nbsp;<a href=\"https:\/\/htmlreference.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/htmlreference.io\/<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;meta http-equiv=\u00bbX-UA-Compatible\u00bb content=\u00bbIE-edge\u00bb&gt;<\/h2>\n\n\n\n<p>El atributo&nbsp;<strong><em>http-equiv=\u00bbX-UA-Compatible\u00bb<\/em><\/strong>&nbsp;lo que hace es tratar el contenido del documento para&nbsp;<strong>Internet Explorer<\/strong>&nbsp;igualarlo a la configuraci\u00f3n de&nbsp;<strong>Edge,<\/strong>&nbsp;que es el nuevo navegador de&nbsp;<strong>Microsoft.<\/strong>&nbsp;Esta etiqueta la agrega&nbsp;<strong>Visual Studio Code<\/strong>&nbsp;en los documentos nuevos que vamos creando, ya que dicho programa es de&nbsp;<strong>Microsoft<\/strong>. No se trata de un est\u00e1ndar que haya que incluir por fuerza.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-with, initial-scale=1.0\u2033&gt;<\/h2>\n\n\n\n<p>Se trata de una etiqueta muy importante, es la etiqueta del&nbsp;<strong>viewport.<\/strong>&nbsp;Tiene dos atributos,&nbsp;<strong><em>name<\/em><\/strong>&nbsp;que hace alusi\u00f3n al nombre de la etiqueta, y&nbsp;<strong><em>content<\/em><\/strong>&nbsp;que es el atributo de la misma. El&nbsp;<strong>viewport<\/strong>&nbsp;es la zona visible del navegador donde se dibuja o renderiza el contenido&nbsp;<strong>HTML.<\/strong><\/p>\n\n\n\n<p>El&nbsp;<strong>navegador web<\/strong>&nbsp;est\u00e1 formado por varias secciones, como son la&nbsp;<strong>barra de las pesta\u00f1as<\/strong>, la&nbsp;<strong>barra de direcciones<\/strong>, la&nbsp;<strong>barra de marcadores<\/strong>, la&nbsp;<strong>caja de desarrolladores<\/strong>, pues bien, el \u00e1rea donde se visualiza el contenido es el&nbsp;<strong>viewport,<\/strong>&nbsp;y esta etiqueta es muy importante, y la deben tener todos los documentos&nbsp;<strong>HTML,<\/strong>&nbsp;porque le indica a los dispositivos como se va a adaptar el contenido.<\/p>\n\n\n\n<p>Esta etiqueta tiene varios&nbsp;<strong>atributos,<\/strong>&nbsp;si queremos saber m\u00e1s de ella podemos pinchar en el siguiente enlace.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Viewport_meta_tag\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Viewport_meta_tag<\/a><\/li>\n<\/ul>\n\n\n\n<p>Los dos&nbsp;<strong>atributos<\/strong>&nbsp;m\u00e1s importantes de esta&nbsp;<strong>metaetiqueta<\/strong>&nbsp;son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>width=device-with<\/em><\/strong>: indica que el ancho del documento se va a adaptar al ancho del dispositivo.<\/li>\n\n\n\n<li><strong><em>inital-scale=1.0<\/em><\/strong>: indica que la escala inicial a la que va a empezar el contenido es a la escala 1, es decir, al 100% del contenido.<\/li>\n<\/ul>\n\n\n\n<p>Si escribimos la siguiente sintaxis.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"viewport\" content=\"width=device-with, initial-scale=2.0\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-with, initial-scale=0.5\"&gt;<\/pre>\n\n\n\n<p>El primer ejm mostrar\u00e1 el contenido el 200% m\u00e1s grande de lo normal, es decir, el doble de la proporci\u00f3n. El segundo mostrar\u00e1 el contenido la mitad de la proporci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;title&gt;<\/h2>\n\n\n\n<p>Es el t\u00edtulo del documento&nbsp;<strong>HTML,<\/strong>&nbsp;se ha de tratar de un t\u00edtulo referente a lo que va a encontrar el usuario en la p\u00e1gina que est\u00e1 visitando. Importante que nuestro t\u00edtulo est\u00e9 entre los 55 y los 65 caracteres de longitud.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;meta name=\u00bbdescription\u00bb content=\u00bbdescripci\u00f3n del contenido\u00bb&gt;<\/h2>\n\n\n\n<p>Esta&nbsp;<strong>etiqueta<\/strong>&nbsp;sirve para poner una&nbsp;<strong>descripci\u00f3n de la p\u00e1gina<\/strong>. Esta descripci\u00f3n no debe sobrepasar los 165 caracteres, y sirve para explicar a nuestros usuarios que contenido van a encontrar en nuestro documento.<\/p>\n\n\n\n<p>tanto la etiqueta&nbsp;<strong><em>&lt;title&gt;<\/em><\/strong>&nbsp;como la metaetiqueta&nbsp;<strong><em>description<\/em><\/strong>&nbsp;son muy importantes porque nos van a ayudar mucho en el&nbsp;<strong>SEO<\/strong>&nbsp;(<strong>posicionamiento en buscadores<\/strong>). Es muy importante respetar la longitud de ambas etiquetas, ya que son los caracteres que se van a ver en los buscadores.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: no poner los mismos&nbsp;<strong>t\u00edtulos<\/strong>&nbsp;y mismas&nbsp;<strong>descripciones<\/strong>&nbsp;en todas las p\u00e1ginas, ya que penalizan en el&nbsp;<strong>SEO.<\/strong>&nbsp;Cada documento tiene que tener su propio&nbsp;<strong>t\u00edtulo<\/strong>&nbsp;y su propia&nbsp;<strong>descripci\u00f3n.<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>El contenido de la etiqueta&nbsp;<strong><em>&lt;title&gt;<\/em><\/strong>&nbsp;lo veremos en la&nbsp;<strong>barra de t\u00edtulo<\/strong>&nbsp;de la&nbsp;<strong>pesta\u00f1a<\/strong>&nbsp;del&nbsp;<strong>navegador<\/strong>&nbsp;en el que estamos, la descripci\u00f3n no se ve, pero los&nbsp;<strong>robots SEO<\/strong>&nbsp;s\u00ed que indexan el contenido de esta&nbsp;<strong>metaetiqueta<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;meta charset=\u00bbUTF-8\u2033&gt; charset&nbsp;es el&nbsp;juego de caracteres&nbsp;en el cual est\u00e1 modificada una p\u00e1gina. Y&nbsp;UTF-8&nbsp;es el&nbsp;juego de caracteres universal est\u00e1ndar&nbsp;en la actualidad. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":89,"menu_order":4,"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-4584","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":"&lt;meta charset=\u00bbUTF-8\u2033&gt; charset&nbsp;es el&nbsp;juego de caracteres&nbsp;en el cual est\u00e1 modificada una p\u00e1gina. Y&nbsp;UTF-8&nbsp;es el&nbsp;juego de caracteres universal est\u00e1ndar&nbsp;en la actualidad. [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/4584","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=4584"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/4584\/revisions"}],"predecessor-version":[{"id":4585,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/4584\/revisions\/4585"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/89"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=4584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}