{"id":29005,"date":"2021-08-14T13:25:31","date_gmt":"2021-08-14T13:25:31","guid":{"rendered":"https:\/\/www.conectasoftware.com\/glossary\/html\/"},"modified":"2023-07-04T22:28:45","modified_gmt":"2023-07-04T22:28:45","slug":"html","status":"publish","type":"glossary","link":"https:\/\/www.conectasoftware.com\/magazine\/glosario\/html\/","title":{"rendered":"HTML<span class=\"dashicons \" data-icon=\"\" style=\"color:#000;display:inline;vertical-align:baseline;\"><\/span>"},"content":{"rendered":"<p>HTML, o lenguaje de marcado de hipertexto, es el c\u00f3digo que ejecuta Internet. Es un lenguaje de marcado. Esto significa que usa etiquetas para definir elementos, como marcar texto en negrita o mostrar im\u00e1genes con c\u00f3digo.<\/p>\n<p>\u00bfQu\u00e9 es HTML5? Es la quinta versi\u00f3n del lenguaje de marcado HTML (HyperText Markup Language, versi\u00f3n 5).<\/p>\n<h2>Sir Tim Berners-Lee y HTML<\/h2>\n<p>HTML es el lenguaje unificador de la World Wide Web. Al igual que la web en s\u00ed, el HyperText Markup Language fue una creaci\u00f3n de Sir Tim Berners-Lee. En 1991 escribi\u00f3 un documento llamado \u00abEtiquetas HTML\u00bb en el que propuso menos de dos docenas de elementos que podr\u00edan usarse para escribir p\u00e1ginas web.<\/p>\n<blockquote><p>Para que algo como la Web exista y se expanda, tiene que basarse en est\u00e1ndares p\u00fablicos y gratuitos. La red no debe tener due\u00f1o.<\/p>\n<p style=\"text-align: right;\">Sir Tim Berners-Lee<\/p>\n<\/blockquote>\n<h2>La W3C y la WHATWG<\/h2>\n<p>W3C, el Consorcio de la World Wide Web, public\u00f3 las iteraciones posteriores del est\u00e1ndar HTML en <a href=\"http:\/\/www.w3.org\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3.org<\/a>, hasta llegar a la versi\u00f3n 4.0 (nunca hubo una versi\u00f3n 1.0).<\/p>\n<p>La siguiente evoluci\u00f3n fue a XHTML, donde la X significa extensible. Esto requer\u00eda que los autores siguieran las reglas de XML, un lenguaje de marcado m\u00e1s estricto en el que el W3C basaba la mayor\u00eda de sus tecnolog\u00edas.<\/p>\n<p>La publicaci\u00f3n de XHTML 1.0 coincidi\u00f3 con el aumento del soporte del navegador para CSS.<\/p>\n<p>Despu\u00e9s se form\u00f3 el grupo \u201cWeb Hypertext Application Technology Working Group\u201d, o WHATWG.<\/p>\n<h3>Principios de dise\u00f1o<\/h3>\n<p>El WHATWG redact\u00f3 una serie de principios de dise\u00f1o para guiar el desarrollo de HTML5.<\/p>\n<p>Uno de los principios clave es \u00abapoyar el contenido existente\u00bb.<\/p>\n<p>Eso significa que no hay a\u00f1o cero para HTML5. Las webs que se crean actualmente en cualquier versi\u00f3n de HTML, ya est\u00e1n utilizando HTML5.<\/p>\n<p>Otros principios de dise\u00f1o son<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>No reinventes la rueda<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Degradado elegante<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Pavimenta los senderos (Si no est\u00e1 roto, no lo arregles)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Evoluci\u00f3n y no revoluci\u00f3n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Resolver problemas reales<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Prioridad de circunscripciones (En caso de conflicto, considere usuarios sobre autores sobre implementadores sobre especificadores sobre pureza te\u00f3rica.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>La seguridad ser\u00e1 tenida en cuenta<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Separaci\u00f3n de contenido y presentaci\u00f3n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Consistencia del DOM (Document Object Model)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Funcionamiento bien definido<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Evitar la complejidad innecesaria<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Control de errores<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Soporte a los lenguajes mundiales<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Independencia del medio<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Accesibilidad<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Los est\u00e1ndares web han avanzado tanto que ahora es posible construir casi cualquier cosa usando HTML, CSS y JavaScript. Mientras que para publicar texto o im\u00e1genes, HTML y CSS son suficientes, para audio o video, antes se requeria un plugin tipo Flash o Silverlight. Con HTML5, estos plugin ya no son necesarios. Los elementos multimedia enriquecidos en HTML5 son nativos del navegador.<\/p>\n<p>Acceso a las webs principales de la W3C, la WHATWG y del equipo de Chromium:<\/p>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/html.spec.whatwg.org\/multipage\/<\/a><\/p>\n<p><a href=\"https:\/\/w3c.github.io\/html\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/w3c.github.io\/<\/a><\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developers.google.com\/web<\/a><\/p>\n<h2>Editores HTML y WYSIWYG<\/h2>\n<p>Podemos escribir HTML en un simple Bloc de notas, guardarlo como un archivo .html y soltar el archivo en un navegador para ver c\u00f3mo se ve.<\/p>\n<p>Los editores HTML tienen caracter\u00edsticas que facilitan este trabajo, como por ejemplo resaltado de sintaxis, autocompletado y detecci\u00f3n de errores. Estos editores tambi\u00e9n suelen funcionar JavaScript, PHP y CSS.<\/p>\n<p>WordPress cuenta con una interfaz visual y editor de texto enriquecido llamado <a href=\"https:\/\/www.tiny.cloud\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyMCE<\/a> WYSIWYG (acr\u00f3nimo de What You See Is What You Get).<\/p>\n<p>Hay varios editores HTML con funcionalidades avanzadas, como<\/p>\n<p><a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Notepad++<\/a><\/p>\n<p><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a><\/p>\n<p><a href=\"http:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brackets<\/a><\/p>\n<h2>HTML y SEO<\/h2>\n<p>SEO es la optimizaci\u00f3n del sitio web para mejorar su posicionamiento en los resultados de b\u00fasqueda de Google.<\/p>\n<p>Para ello se pueden optimizar por un lado, ciertas etiquetas del c\u00f3digo HTML de la p\u00e1gina. Estos son los t\u00edtulos, encabezados, im\u00e1genes y enlaces.<\/p>\n<p>Por otro, esta la propia redacci\u00f3n de un <a href=\"https:\/\/www.conectasoftware.com\/magazine\/marketing-digital\/que-es-el-contenido-de-calidad\/\">contenido de valor<\/a> basado en palabras clave previamente definidas.<\/p>\n<p>Elementos de c\u00f3digo HTML destacados para SEO:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Metadatos (meta description y meta keywords)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>T\u00edtulo (&lt;title&gt;&lt;\/title) de la p\u00e1gina<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Encabezados h1 y h2 (podemos establecer encabezados seg\u00fan su importancia, desde H1 hasta H6)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Im\u00e1genes (tanto en el nombre del fichero como en el texto alternativo)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>T\u00edtulo de los enlaces<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>El cuerpo del texto<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Conviene contar con herramientas y plugins para SEO. En WordPress por ejemplo, <a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/componentes-basicos-de-una-web-disenada-en-wordpress\/\">Yoast<\/a> es un plugin que permite optimizar la pagina teniendo en cuenta los factores principales de SEO. Pero no es suficiente con tener herramientas o conocer HTML. Lo primero es una estrategia solida de marketing digital.<\/p>\n<blockquote><p>El l\u00edmite de las m\u00e1quinas no es su potencia, sino nuestra imaginaci\u00f3n.<\/p>\n<p style=\"text-align: right;\">Sir Tim Berners-Lee<\/p>\n<\/blockquote>\n<p>Lecturas relacionadas:<\/p>\n<p><a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/adaptacion-dispositivos-moviles-los-disenos-responsive\/\">Adaptaci\u00f3n a dispositivos m\u00f3viles \u2013 Los dise\u00f1os responsive<\/a><\/p>\n<p><a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/25-anos-de-diseno-web-tendencias-y-soluciones\/\">25 a\u00f1os de dise\u00f1o web. Tendencias y soluciones<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML, o lenguaje de marcado de hipertexto, es el c\u00f3digo que ejecuta Internet. Es un lenguaje de marcado. Esto significa que usa etiquetas para definir elementos, como marcar texto en negrita o mostrar im\u00e1genes con c\u00f3digo. \u00bfQu\u00e9 es HTML5? Es la quinta versi\u00f3n del lenguaje de marcado HTML (HyperText Markup Language, versi\u00f3n 5). Sir Tim [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15842,"menu_order":0,"template":"","meta":{"content-type":"","footnotes":""},"glossary-categories":[93,94],"glossary-tags":[],"glossary-languages":[],"class_list":{"0":"post-29005","1":"glossary","2":"type-glossary","3":"status-publish","4":"has-post-thumbnail","6":"glossary-categories-marketing","7":"glossary-categories-seo"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/glossary"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29005\/revisions"}],"predecessor-version":[{"id":37718,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29005\/revisions\/37718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/15842"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=29005"}],"wp:term":[{"taxonomy":"glossary-categories","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-categories?post=29005"},{"taxonomy":"glossary-tags","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-tags?post=29005"},{"taxonomy":"glossary-languages","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-languages?post=29005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}