{"id":1930,"date":"2022-01-14T16:07:23","date_gmt":"2022-01-14T16:07:23","guid":{"rendered":"https:\/\/convierteweb.com\/?p=17899"},"modified":"2023-06-02T03:57:26","modified_gmt":"2023-06-02T03:57:26","slug":"7-etiquetes-html-essencials","status":"publish","type":"post","link":"https:\/\/convierteweb.com\/ca\/7-etiquetas-html-esenciales\/","title":{"rendered":"7 HTML Etiquetes Imprescindible"},"content":{"rendered":"<p>Si est\u00e1s desarrollando un espacio web, es fundamental que conozcas y utilices las 7 etiquetas HTML esenciales para toda p\u00e1gina. No bastar\u00e1 con un <a href=\"https:\/\/affiliates.a2hosting.com\/accounts\/default1\/banners\/78376f61.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">hosting <\/a>eficiente o algunas herramientas de <a href=\"https:\/\/rankmath.com\/?ref=geekobit\" target=\"_blank\" rel=\"noreferrer noopener\">optimizaci\u00f3n <\/a>a medio emplear. Con las etiquetas <strong>a\u00f1adir\u00e1s caracter\u00edsticas particulares a los contenidos de tu p\u00e1gina<\/strong>. A continuaci\u00f3n, te explicaremos lo necesario para que comprendas la importancia de este lenguaje.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es una etiqueta HTML?<\/h2>\n\n\n\n<p>Las etiquetas HTML son estructuras breves de c\u00f3digos que env\u00edan al navegador indicaciones respecto a c\u00f3mo presentar cierto contenido. Estas forman parte del <strong>lenguaje inform\u00e1tico conocido como \u201chipertexto\u201d<\/strong>, a partir del cual se crean com\u00fanmente las plataformas web.<\/p>\n\n\n\n<p>Con ellas es posible incorporar informaci\u00f3n b\u00e1sica en tu sitio virtual y dotarla de caracter\u00edsticas particulares. Podr\u00e1s agregar en tu p\u00e1gina tanto t\u00edtulos o p\u00e1rrafos con alg\u00fan color espec\u00edfico, como enlaces, men\u00fas y dem\u00e1s secciones.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo funcionan las etiquetas?<\/h2>\n\n\n\n<p>Las funciones indicadas por las etiquetas dependen de la informaci\u00f3n incorporada en ellas seg\u00fan ciertos formatos. De esa manera, el navegador lee el c\u00f3digo y act\u00faa conforme a lo que la etiqueta se\u00f1ale. Est\u00e1n compuestas de partes b\u00e1sicas que crean a su vez <strong>elementos con atributos y contenido<\/strong>.<\/p>\n\n\n\n<p>Dicho de otra forma, las etiquetas encierran y determinan a otros segmentos del c\u00f3digo HTML llamados \u201celementos\u201d. En conjunto, conforman l\u00edneas de c\u00f3digo que van estructurando tu sitio web. Estos son los fragmentos que constituyen y engloban una etiqueta:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etiquetas de apertura y de cierre<\/h3>\n\n\n\n<p>Existen dos formas b\u00e1sicas de etiquetas, la que indica d\u00f3nde inicia un elemento y la que se\u00f1ala d\u00f3nde termina. Ambas encierran entre par\u00e9ntesis angulares (&lt;&gt;) alguna letra o palabra que representa la acci\u00f3n que se quiere ejecutar. Por ejemplo, la etiqueta que marca d\u00f3nde inicia un p\u00e1rrafo luce as\u00ed: &lt;P&gt;.<\/p>\n\n\n\n<p>En la etiqueta de cierre se incluye, adem\u00e1s, una barra antes de la letra o palabra. Siguiendo con el mismo ejemplo, una etiqueta que indica d\u00f3nde concluye un p\u00e1rrafo deber\u00eda ser as\u00ed: &lt;\/P&gt;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Atributos<\/h3>\n\n\n\n<p>Son los datos o informaci\u00f3n adicional agregada a un elemento. Est\u00e1n formados por<strong> la palabra que indica el atributo y otra que se\u00f1ala su valor<\/strong>. Van dentro de la etiqueta de apertura, marc\u00e1ndose un espacio entre estos y el nombre de la etiqueta.<\/p>\n\n\n\n<p>Despu\u00e9s del nombre del atributo sigue el s\u00edmbolo de igual (=), y posteriormente el valor del atributo entre comillas. Finalmente, se agrega el signo de \u201cmayor que\u201d para cerrar la etiqueta. Por ejemplo, si quieres poner la letra de un p\u00e1rrafo con cierto color, la etiqueta inicial ser\u00eda: &lt;FONT COLOR=\u201cred\u201d&gt;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contenido del elemento<\/h3>\n\n\n\n<p>Es el texto que variar\u00e1 seg\u00fan lo que indiquen las etiquetas. Va entre la etiqueta de apertura y la etiqueta de cierre. Observa la siguiente l\u00ednea HTML: &lt;FONT COLOR=\u201cred\u201d&gt;Me gusta el helado de fresa&lt;\/FONT&gt;. Esta <strong>constituye un elemento<\/strong>, el texto que hemos incluido es el contenido que configuramos para que aparezca de color rojo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 es importante utilizar etiquetas HTML?<\/h2>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" src=\"https:\/\/convierteweb.com\/wp-content\/uploads\/2022\/01\/7-etiquetas-HTML-esenciales-1200x697.jpg\" alt=\"7 etiquetas HTML esenciales\" data-id=\"17901\" data-full-url=\"https:\/\/convierteweb.com\/wp-content\/uploads\/2022\/01\/7-etiquetas-HTML-esenciales.jpg\" data-link=\"https:\/\/convierteweb.com\/?attachment_id=17901\" class=\"wp-image-17901\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>En el desarrollo de una p\u00e1gina web es de suma importancia el uso de etiquetas HTML para la <a href=\"https:\/\/shareasale.com\/r.cfm?b=1075949&amp;u=2812807&amp;m=74778&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\">optimizaci\u00f3n<\/a>. Estas son algunas de las razones por las que su uso es relevante:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Estructura de tu sitio<\/strong>: De las etiquetas depende en gran medida la estructura de tu web. Con ellas se organiza e identifica el contenido. Es decir, <strong>inciden tanto en el aspecto como en el funcionamiento de tu p\u00e1gina<\/strong>. Imag\u00ednalas como los engranajes que proyectan hacia el usuario la imagen virtual de tu empresa u organizaci\u00f3n.<\/li><li><strong>Herramientas de SEO<\/strong>: Las etiquetas aportan informaci\u00f3n a los motores de b\u00fasqueda que influyen en el posicionamiento de tu web. A trav\u00e9s de ellas, los navegadores pueden<strong> identificar las palabras claves y ubicar tu sitio en los listados de b\u00fasqueda.<\/strong> De m\u00e1s est\u00e1 decir que si consigues un buen posicionamiento ganas visitas y das a conocer tus productos y servicios.<\/li><\/ul>\n\n\n\n<p>Sin embargo, no tienes que preocuparte por realizar esto t\u00fa s\u00f3lo. En <a href=\"http:\/\/geekobit.com\" target=\"_blank\" rel=\"noreferrer noopener\">Geekobit<\/a>, tenemos todo lo necesario para realizarlo por ti.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfCu\u00e1les son las 7 etiquetas HTML esenciales para posicionar tu contenido?<\/h2>\n\n\n\n<p>Son muchas las etiquetas utilizadas en el desarrollo de un espacio web, tantas como caracter\u00edsticas y funciones pueden agreg\u00e1rsele. Sin embargo, existen algunas cuyos elementos clave puedes aprovechar espec\u00edficamente para optimizar el posicionamiento de tu p\u00e1gina. Aqu\u00ed te se\u00f1alaremos y describiremos las que consideramos 7 etiquetas HTML esenciales para posicionar todo contenido.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Etiqueta de T\u00edtulo<\/li><\/ol>\n\n\n\n<p>La etiqueta de t\u00edtulo corresponde a la siguiente estructura: &lt;title&gt; para iniciar y &lt;\/title&gt; para concluir. Con ella le <strong>indicas a los motores de b\u00fasqueda el t\u00edtulo de la p\u00e1gina<\/strong>. A su vez, constituyen una alternativa para resaltar las palabras claves de tus contenidos.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Etiquetas de Encabezados<\/li><\/ol>\n\n\n\n<p>Existen varias etiquetas que puedes utilizar para los encabezados, pero las m\u00e1s comunes son las H1 y H2. Seguir\u00edan la siguiente estructura: &lt;H1&gt; para iniciar, &lt;\/H1&gt; como cierre. Estas son determinantes en la jerarquizaci\u00f3n de las partes de tu contenido, porque lo dividen en secciones.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Etiqueta de Meta descripci\u00f3n<\/li><\/ol>\n\n\n\n<p>Con ella se integra a tu p\u00e1gina un resumen de la informaci\u00f3n que est\u00e1s desarrollando. Deben aparecer despu\u00e9s del t\u00edtulo y lo ideal es que le incluyas las palabras claves. Esta es una manera de incluir una meta descripci\u00f3n en tu web: &lt;head&gt; &lt;meta name =\u201cdescription\u201d content=Ejemplo de resumen&gt; &lt;\/head&gt;.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Etiqueta de Robots<\/li><\/ol>\n\n\n\n<p>Este tipo de etiqueta es necesario para <strong>se\u00f1alar a los motores de b\u00fasqueda la indexaci\u00f3n de tu p\u00e1gina<\/strong>. Tambi\u00e9n le indica al buscador los enlaces tras los que puede ir y los que no debe seguir.<\/p>\n\n\n\n<p>Esta es una de las etiquetas de meta robots indicando que pueden indexar la p\u00e1gina: &lt;meta name =\u201crobots\u201d content =\u201cindex\u201d&gt;. Por otro lado, as\u00ed indicas lo contrario: &lt;meta name =\u201crobots\u201d content =\u201cnoindex, nofollow\u201d&gt;.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\"><li>Etiqueta Open Graph<\/li><\/ol>\n\n\n\n<p>Estas etiquetas son funcionales para <strong>mostrar adecuadamente el contenido de tu p\u00e1gina en redes sociales<\/strong>. Si no las utilizas, la informaci\u00f3n se mostrar\u00e1 con im\u00e1genes y descripciones al azar. El nombre utilizado para esta etiqueta en lenguaje HTML corresponde a su abreviatura <strong>\u201cog\u201d<\/strong>. Se agrega a las etiquetas del contenido que se compartir\u00e1 en redes.<\/p>\n\n\n\n<p>Este es un ejemplo de c\u00f3mo utilizarla: &lt;meta property=\u201cog:title\u201d content=\u201cImagina un t\u00edtulo\u201d\/&gt;.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\"><li>Etiqueta de Texto Alternativo<\/li><\/ol>\n\n\n\n<p>Es una <strong>etiqueta utilizada para describir im\u00e1genes<\/strong>. A trav&eacute;s de ella consigues que los motores de b&uacute;squeda consideren el contenido visual de tu web. Tambi&eacute;n permite que los software de lectura describan la imagen a los usuarios con discapacidad visual. Un ejemplo de c&oacute;mo usarla ser&iacute;a: &lt;img src=&quot;&ldquo;formato&quot; de imagen&rdquo; alt=&quot;&ldquo;Descripci&oacute;n&quot; la&gt;.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"7\"><li>Etiqueta Can\u00f3nica<\/li><\/ol>\n\n\n\n<p>Este tipo de etiqueta te servir\u00e1 especialmente si manejas dos p\u00e1ginas con contenidos parecidos. A trav\u00e9s de ella priorizas la que quieres que resalte en los motores de b\u00fasqueda. Esta es una manera de utilizarla: &lt;link rel=\u201ccanonical\u201d href=\u201cimagina un link\u201d\/&gt;.<\/p>","protected":false},"excerpt":{"rendered":"<p>Si est\u00e1s desarrollando un espacio web, es fundamental que conozcas y utilices las 7 etiquetas HTML esenciales para toda p\u00e1gina. No bastar\u00e1 con un hosting eficiente o algunas herramientas de optimizaci\u00f3n a medio emplear. Con las etiquetas a\u00f1adir\u00e1s caracter\u00edsticas particulares a los contenidos de tu p\u00e1gina. A continuaci\u00f3n, te explicaremos lo necesario para que comprendas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[85,11,84],"tags":[48,49],"class_list":["post-1930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo-posicionamiento","category-consejos","category-posicionamiento-y-publicidad","tag-html","tag-optimizacion-2"],"_links":{"self":[{"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/posts\/1930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":0,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/media\/1932"}],"wp:attachment":[{"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/convierteweb.com\/ca\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}