{"id":1018,"date":"2014-10-26T23:18:35","date_gmt":"2014-10-27T04:18:35","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1018"},"modified":"2024-11-01T11:47:11","modified_gmt":"2024-11-01T16:47:11","slug":"que-es-html","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/que-es-html\/","title":{"rendered":"\u00bfQu\u00e9 es HTML?"},"content":{"rendered":"<p>Cuando iniciamos en el sector de la producci\u00f3n de contenidos web es necesario conocer cu\u00e1l es el fondo de la tecnolog\u00eda, comprender qu\u00e9 es lo que est\u00e1 pasando detr\u00e1s de cada p\u00e1gina o aplicaci\u00f3n web. De la claridad en los conceptos podr\u00e1 depender la toma de decisiones.<\/p>\n<p>En este art\u00edculo pretendo hacer un acercamiento al concepto de lenguaje de marcado de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/hipertexto\/\" rel=\"noopener\" target=\"_blank\">hipertexto<\/a> (HTML, <em>HyperText Markup Language<\/em>) que sirve como soporte para el dise\u00f1o, la publicaci\u00f3n y la distribuci\u00f3n de la mayor\u00eda de contenidos que est\u00e1n disponibles en la Web.<\/p>\n<p>Por cierto, esta entrada fue escrita inicialmente como una actividad evaluativa para uno de mis cursos en la Maestr\u00eda en Direcci\u00f3n y Producci\u00f3n de e-Learning, pero la he actualizado (09-2019) para mis estudiantes de la Universidad de Antioquia. De ah\u00ed que procure por un lenguaje sencillo, directo y breve.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>\u00bfQu\u00e9 hay detr\u00e1s de HTML?<\/h2>\n<p>En palabras sencillas, HTML es un lenguaje que permite crear documentos (p\u00e1ginas) web.<\/p>\n<p>Esta es la base de cualquier p\u00e1gina web, pues los navegadores (como Google Chrome, Safari y Firefox) solamente comprenden este lenguaje (adem\u00e1s de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a> y JavaScript) al momento de visualizar los elementos multimedia que est\u00e1n inmersos en el documento.<\/p>\n<p>Para comprender mejor lo anterior, imagine que debe escribir un cuento para una audiencia infantil hispano-hablante. Es posible que algunos de los ni\u00f1os comprendan palabras en ingl\u00e9s, franc\u00e9s o alem\u00e1n. Sin embargo, para garantizar que la mayor\u00eda de ellos logren la comprensi\u00f3n del cuento, lo recomendable es escribir el texto en espa\u00f1ol. Algo similar sucede en los <em>browsers<\/em>.<\/p>\n<p>A veces el lenguaje HTML puede estar mal escrito y el navegador lo interpreta bien, pero esto es solo suerte. Lo ideal es que <strong>las p\u00e1ginas web est\u00e9n correctamente escritas<\/strong>. As\u00ed como en espa\u00f1ol hay reglas gramaticales, en el HTML hay est\u00e1ndares que se deben respetar para evitar malas interpretaciones, pero m\u00e1s adelante ahondaremos en el tema. Por ahora, lo que interesa saber es que la Web -en su mayor\u00eda- habla en HTML, CSS y JS.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/09\/meme-chrome-html.jpg\" alt=\"Chrome HTML, CSS y JS\" style=\"width:80%; height:auto; margin:30px auto; display:block\" \/><\/p>\n<p>Otro punto importante es saber que los sistemas de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/indexacion-web\/\" rel=\"noopener\" target=\"_blank\">indexaci\u00f3n<\/a> y recuperaci\u00f3n de contenidos, como Google, requieren del HTML para identificar cada elemento de la p\u00e1gina y poder mejorar la experiencia de b\u00fasqueda de los usuarios. Es decir, Google necesita que cada documento web que indexa (lee y almacena) est\u00e9 construido correctamente en HTML para saber qu\u00e9, d\u00f3nde y c\u00f3mo clasificar cada recurso digital.<\/p>\n<p>En palabras sencillas, cada vez que Google llega a una p\u00e1gina web empieza a preguntar qu\u00e9 es cada uno de los recursos que est\u00e1n all\u00ed presentes. Y lo que hay que decirle, desde el HTML, es:<\/p>\n<blockquote><p>\u00abVea Google, este es mi t\u00edtulo principal, es decir, este es el tema principal de esta p\u00e1gina. Por aqu\u00ed est\u00e1n los subt\u00edtulos, que van desglosando la exposici\u00f3n. Estas son dos im\u00e1genes y los textos peque\u00f1os son los pie de imagen. Por aqu\u00ed est\u00e1n unos datos estructurados que se presentan como tablas. Esta es una lista sin orden. Y este es mi sistema de navegaci\u00f3n o enlaces\u00bb.<\/p><\/blockquote>\n<p>Este conversaci\u00f3n con Google se hace a trav\u00e9s de HTML.<\/p>\n<p>Pero para comprender mejor el t\u00e9rmino, ampliemos la definici\u00f3n:<\/p>\n<h2>\u00bfQu\u00e9 significa HTML?<\/h2>\n<p>HTML es la sigla de <em>HyperText Markup Language<\/em>. Esto, traducido al espa\u00f1ol, es: Lenguaje de Marcado de Hipertexto. Un poco complejo \u00bfverdad? Sin embargo, el tema no debe ser tan dif\u00edcil para comunicadores y dise\u00f1adores, pues desde hace muchos a\u00f1os estamos marcando y conectando (hipertexto) documentos.<\/p>\n<p>Sigamos fragmentando los conceptos para comprender mejor:<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Lenguaje<\/h2>\n<p>Por <strong>Lenguaje<\/strong> vamos a entender un conjunto de elementos que, ubicados en un contexto, ofrecen un significado espec\u00edfico. Por ejemplo, el lenguaje espa\u00f1ol est\u00e1 construido por un conjunto de letras y palabras que, sean solas o en grupos, dan significado a un mensaje o una intenci\u00f3n.<\/p>\n<p>Lo mismo sucede en HTML: el lenguaje est\u00e1 conformado por un conjunto de t\u00e9rminos que dan significado a los elementos que componen una p\u00e1gina web. A cada uno de estos t\u00e9rminos los llamaremos <strong>etiquetas<\/strong>.<\/p>\n<p>Las etiquetas, como se ha mencionado, dan significado a los elementos que componen una p\u00e1gina web: textos, im\u00e1genes, formularios, <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">enlaces<\/a>, videos, entre otros. Todo lo que imagine en una p\u00e1gina web tiene su respectiva etiqueta HTML.<\/p>\n<p>M\u00e1s adelante conoceremos en detalle el conjunto de etiquetas.<\/p>\n<h2>Marcado<\/h2>\n<p>Hablamos de marcado cuando hacemos referencia a la t\u00e9cnica de identificar cada elemento de un documento (ubicados en un contexto editorial). Se realiza un marcado cuando se reconocen t\u00edtulos, p\u00e1rrafos, listas de elementos, pies de imagen, entre otros.<\/p>\n<p>En contexto hist\u00f3rico, el marcado se utiliza desde la maquetaci\u00f3n e impresi\u00f3n en serie de los documentos. El autor deb\u00eda indicar claramente qu\u00e9 texto era un t\u00edtulo, cu\u00e1l un subt\u00edtulo y cu\u00e1l un p\u00e1rrafo. Este marcado facilitaba el proceso de maquetaci\u00f3n, dise\u00f1o y ajuste de impresi\u00f3n, pues el dise\u00f1ador editorial conoc\u00eda r\u00e1pidamente qu\u00e9 apariencia dar a cada elemento.<\/p>\n<p>En otras palabras, en un principio el marcado de un documento facilitaba la aplicaci\u00f3n de los estilos gr\u00e1ficos del documento. Hoy, en un contexto digital, adem\u00e1s de facilitar esta tarea, permite dar significado y orden a los documentos. Podr\u00edamos decir entonces que HTML es un lenguaje multi-prop\u00f3sito.<\/p>\n<p>Algunos elementos web que reciben etiquetas de marcado HTML son:<\/p>\n<ul>\n<li>Encabezado<\/li>\n<li>P\u00e1rrafo de texto<\/li>\n<li>Imagen<\/li>\n<li>Pie de imagen<\/li>\n<li>Tabla (con sus respectivas filas y columnas)<\/li>\n<li>Listas ordenadas y sin ordenar<\/li>\n<li>Texto destacado<\/li>\n<li>Texto \u00e9nfasis<\/li>\n<li>Enlaces (v\u00ednculos)<\/li>\n<li>Recurso multimedia<\/li>\n<li>Formulario<\/li>\n<\/ul>\n<p>Miremos un hiperdocumento (p\u00e1gina) web con su marcado sem\u00e1ntico:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2014\/marcado-html.jpg\" style=\"width:100%; height:auto; margin: 0 auto\" \/><\/p>\n<h2>Hipertexto<\/h2>\n<p>Por \u00faltimo, entendemos <strong>hipertexto<\/strong> como una t\u00e9cnica de construcci\u00f3n de contenidos que permite crear discursos no lineales, es decir, la propuesta de lectura de la p\u00e1gina 1 a la 4, pasando por la 2 y 3, desaparece. El hipertexto permite al lector tomar diferentes rutas de lectura utilizando palabras claves (enlaces).<\/p>\n<p>Identificamos el hipertexto cuando un documento hace referencia a otro, cuando una persona cita a otra. Un ejemplo son los trabajos cient\u00edficos: es probable que Einstein, cuando trabaj\u00f3 en su teor\u00eda de la relatividad, haya citado a Newton:<\/p>\n<blockquote><p>\u201cComo dec\u00eda Newton (1702), en su ensayo sobre la teor\u00eda de la gravedad, las fuerzas naturales est\u00e1n definidas por  (\u2026)\u201d<\/p><\/blockquote>\n<p>Quiz\u00e1s usted est\u00e9 diciendo: \u201cPero esto es una referencia bibliogr\u00e1fica\u201d. A lo que debo decir: \u201cS\u00ed, las referencias bibliogr\u00e1ficas son hipertexto\u201d. \u00bfPor qu\u00e9? Porque permite conectar un texto de Einsten con uno de Newton, continuando con el ejemplo.<\/p>\n<p>En este escenario \u00bfQu\u00e9 pasa con el lector? F\u00e1cil, \u00e9l puede elegir si continuar con la lectura de Einsten o realizar una pausa y consultar algunos textos de Newton. La lectura comienza a ganar \u201ctama\u00f1o\u201d mientras m\u00e1s curiosidad (y enlaces) presente cada documento. Al final, una lectura de 100 p\u00e1ginas puede convertirse en m\u00e1s de 500.<\/p>\n<p>La Web, como la conocemos hoy, funciona as\u00ed: a trav\u00e9s de enlaces (v\u00ednculos) las p\u00e1ginas se van conectando, formando rutas de lectura (navegaci\u00f3n) tan profundas como el cerebro humano.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n<h2>En conclusi\u00f3n<\/h2>\n<p>El HTML es un conjunto de etiquetas que permiten identificar y dar significado a cada elemento de una p\u00e1gina web, la cual \u2013a trav\u00e9s del mismo lenguaje- puede comunicarse con otras p\u00e1ginas y recursos digitales disponibles en la Web.<\/p>\n<p>Tambi\u00e9n puedes leer: <a href=\"https:\/\/e-lexia.com\/blog\/origen-del-html\/\" title=\"Origen del HTML\">Origen del HTML<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando iniciamos en el sector de la producci\u00f3n de contenidos web es necesario conocer cu\u00e1l es el fondo de la tecnolog\u00eda, comprender qu\u00e9 es lo que est\u00e1 pasando detr\u00e1s de cada p\u00e1gina o aplicaci\u00f3n web. De la claridad en los conceptos podr\u00e1 depender la toma de decisiones. En este art\u00edculo&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[65,66],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-habilidades-tic","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1593"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}