¿Qué es HTML? Elementos, estructura y etiquetas más comunes


Todo lo que debes saber sobre el lenguaje de marcado que se utiliza para crear páginas web. Sus orígenes y evolución, las ventajas y sus falencias, y las bases de su funcionamiento. 


¿Qué es HTML?


HTML es un lenguaje de marcado que se utiliza para crear páginas web.


También se lo conoce como “lenguaje de etiquetas de hipertexto” o de “marcas de hipertexto”.


Se trata de un código empleado para estructurar y desplegar los contenidos, como párrafos, imágenes, tablas con datos, viñetas, etcétera.


Es decir, sirve para construir los bloques de una webpage.


El HTML es el componente más básico de una página web, tal como explica la Fundación Mozilla. Probablemente, es el lenguaje de codificación más conocido y es el estándar en desarrollo web.


La forma más sencilla para comprender qué es HTML es el siguiente ejemplo. Para que una palabra aparezca en negrita se la encierra con la etiqueta </b>. Por caso, para ver la palabra perro en negrita en una página, se escribe así: <b>perro</b>





¿Qué significa HTML?


HTML significa “lenguaje de marcas de hipertexto”.


Proviene del inglés. Las siglas HTML corresponden a “Hypertext Markup Lenguage”.


¿Cuál es la importancia de aprender HTML?


Aprender HTML es indispensable para crear páginas web.


Si bien existen herramientas para crear sitios sin escribir código, por ejemplo el conocido sistema de WordPress, esas soluciones también usan HTML “detrás de escena”.


Por eso, para verdaderamente tener control en desarrollo web, los conocimientos en HTML son esenciales.


Tal como indicaremos más adelante en este repaso, el lenguaje HTML habitualmente se combina con lenguajes de programación como JavaScript y CSS, que expanden sus funciones.


Origen y evolución de HTML


El origen del HTML se remonta al año 1991, cuando Tim Berners-Lee, considerado como uno de los “padres de Internet”, publicó por primera vez un documento al que denominó “Etiquetas HTML”.


El especialista había comenzado a trabajar en ese código unos años antes, en 1989, cuando trabajaba en el CERN, el Centro Europeo para la Investigación Nuclear.


Con el paso mencionado, Berners-Lee inauguró la World Wide Web.


En el documento, describió un total de 22 tags con el diseño básico del lenguaje HTML. Muchas de las premisas que empleó por entonces siguen usándose en la actualidad.


Un dato curioso: a mediados de 2021, un comprador pagó casi 5.500 millones de dólares por el código fuente original de la World Wide Web, en formato de NFT (un token no fungible).


“Fue pertido revisar el código. Es increíble ver las cosas que esas pocas líneas, con la ayuda de un gran grupo de colaboradores en todo el planeta, han logrado para convertirse en lo que es la Web hoy en día”, dijo Berners-Lee antes de la subasta.


Lo cierto es que desde 1991 existieron diferentes versiones de HTML, con ampliaciones, mejoras y nuevas funciones. La más reciente es HTML5.


Versiones de HTML a lo largo de los años:


HTML 2.0: Apareció en el año 1995, siendo el primer estándar oficial luego del primer documento publicado por Berners-Lee.


HTML 3.2: Se publicó en 1997 y fue la primera con el aval del W3C, el Consorcio Internacional de la World Wide Web.


HTML 4.01: Surgió en 1999.


HTML 5: Publicada en 2004, es la versión más reciente de HTML y se mantiene como el estándar oficial. Añade nuevas etiquetas y suma la posibilidad de incluir audio y video en forma nativa.





Diferencia entre HTML y HTML5


HTML es el lenguaje de marcado en su conjunto, mientras que HTML5 es la más reciente actualización.


Naturalmente, HTML y HTML5 están relacionados. Pero en ocasiones se usa ambos términos como sinónimo, cuando son técnicamente diferentes.


Usar los términos indiferentemente sería caer en el mismo error de llamar, por mencionar un ejemplo, iPhone a secas al teléfono más reciente de Apple.


Las principales diferencias entre HTML y HTML5:


Origen: HTML nació en 1991; la actualización HTML5 se lanzó en el año 2014.Actualización: Muchas de las etiquetas del HTML permanecen sin cambios, pero en HTML5 muchas se simplificaron.Contenido: Las versiones previas a HTML5 permitían crear sitios estáticos que precisaban expandirse con Javascript, CSS o Flash, entre otros. La versión más reciente es más dinámica y suma elementos multimedia.Soporte: El principal cambio que trajo HMTL5 es el soporte nativo de audio y video, permitiendo crear juegos, reproductores o animaciones. También es posible incluir gráficos vectoriales.Seguridad: Al no depender plenamente de lenguajes externos, los sitios web creados con HTML5 son más seguros al estar menos abiertos ante posibles ataques.Velocidad: Otra de las mejoras es el dinamismo y fluidez; eso también permite que los sitios corran con más soltura en dispositivos móviles y otros equipos, incluyendo relojes inteligentes o televisores.


A la espera de la actualización HTML6, la versión más reciente se actualiza en forma continua, pues se trata de un estándar vivo y en constante evolución.  


Mientras tanto, la compatibilidad con la mayoría de los navegadores web se garantiza al crear sitios web en HTML5.


¿Cómo funciona HTML?


HTML sirve para ordenar el contenido de una página web. Su funcionamiento no incluye el diseño.


¿Cómo funciona? Mira.


HTML usa marcas de hipertexto que son conocidas como tags o etiquetas, que sirven para catalogar el contenido y mostrarlo en un navegador web.


Los elementos (en texto) se distinguen en un documento encerrándolos o rodeándolos con los tags. Más arriba vimos el ejemplo “</b>perro</b>” para que la palabra se vea en negrita. 


Luego compartiremos la estructura básica de un documento HTML además de ejemplos de etiquetas.


Otro detalle del funcionamiento HTML: en los documentos no se distinguen entre mayúsculas y minúsculas. Se puede escribir de uno u otro modo, incluso mezclándolos.


Por ejemplo, es indistinto <body>, <Body> o <BODY>.  


Ventajas y desventajas de HTML


HTML es un lenguaje informático que tiene ventajas y algunos puntos más débiles.


Las ventajas del HTML


Aprendizaje relativamente sencillo: La curva de aprendizaje es poco vertiginosa, siendo un lenguaje limpio y claro.


Es accesible: Se trata de un lenguaje de acceso gratuito y de código abierto.


Amplio soporte: Es ampliamente utilizado; se ejecuta en forma nativa en todos los navegadores actuales.


Gran comunidad: Al ser muy utilizado, existe una amplia comunidad de especialistas y usuarios en caso de precisas apoyo.   


Es flexible: Se trata de un lenguaje que se integra fácilmente con sistemas de programación backend.  


Las desventajas del HTML


Funcionamiento independiente: Al crear páginas con HTML, hay que crearlas en forma inpidual, aunque sus elementos sean los mismos.


Es un “punto de partida”: Para que las páginas se aparten verdaderamente del carácter estático, es preciso utilizar otros lenguajes de programación, como JavaScript.


El asunto de la compatibilidad: Como señalamos, HTML5 es estándar y es soportado por la mayoría de los navegadores. Sin embargo, cuando se lanzan nuevas versiones, en ocasiones ocurre que los browsers más antiguos no pueden mostrar las nuevas etiquetas.  





Estructura básica de un documento HTML


Los documentos HTML terminan con la extensión .html o htm, legible para los navegadores web.  


Deben comenzar con <!doctype>, que informa al browser el tipo de documento. Por ejemplo, en HTML5 es <!DOCTYPE html>.


Las páginas HTML tienen:


Elementos HTML


Etiquetas HTML


Además de atributos


Las páginas HTML usan estas tres etiquetas principales y en base a ellas se estructuran sus elementos.


<html>: es el elemento raíz que define todo el documento.


<head>: incluye información como el título y los caracteres de la página.


<body>: encierra el contenido que aparece en la página HTML.


¿Cuáles son los elementos de HTML?


Un elemento HTML se compone con una etiqueta de inicio y una etiqueta de finalización; el contenido se inserta entre ambos tags.


Los elementos HTML se piden en las siguientes variantes, principalmente.


Elementos de bloque: Ocupan todo el ancho de la página y comienzan con una nueva línea en el documento.  


Elementos en línea: Sirve para dar formato al contenido incluido entre los elementos de bloque. Por ejemplo, agrega estilos para el texto o enlaces.


Elementos vacíos: No tienen contenido, sin una etiqueta de cierre. Por ejemplo, con <br> se define un salto de línea. En HTML5 no es necesario que se cierren los elementos vacíos; aunque el cierre aporta legibilidad y más compatibilidad.


¿Qué es una etiqueta en HTML?


Las etiquetas HTML permiten crear diferentes elementos.


En la práctica, indican al navegador dónde empieza y termina un elemento.


Las etiquetas además interactúan con los atributos, que describen las características de un elemento.


En la actualidad existen más de 140 tags HTML. A continuación, algunos de los ejemplos más conocidos.


10 ejemplos de etiquetas HTML


<html>: delimita y engloba toda la página web.


<title>: para colocar el título que se muestra en la ventana del navegador.


<b>: negrita.


<i>: cursiva.


<a>: para hipervínculos (se añade href para indicar el destino).


<h1> a <h6>: para encabezados.


<p>: para los párrafos.


<ol>: para listas ordenadas.


<ul>: para listas no ordenadas.


<li>: para los elementos inpiduales de una lista.


<hr>: para colocar una línea horizontal de separación.


¿Es HTML un lenguaje de programación?


HTML no es un lenguaje de programación, sino un lenguaje de marcado, tal como hemos señalado a lo largo de este repaso.


Sirve para definir la estructura del contenido y que los elementos de una página web se muestren y comporten de un modo determinado.


¿Por qué HTML no es un lenguaje de programación? Simple. Porque no puede crear funcionalidades dinámicas.


JavaScript y CSS, entre muchos otros, sí son lenguajes de programación.


¿Cómo se relacionan HTML, CSS y JavaScript?


HTML, CSS y JavaScript son los pilares del desarrollo front-end o “del lado del cliente”. Es decir, la creación de los elementos de las páginas con los que interactúan los usuarios en forma directa.


HTML5 agregó la opción de incluir animaciones y audio en forma nativa, sin necesidad de usar necesariamente lenguajes de programación separados, y otras herramientas.


Sin embargo, para crear sitios web dinámicos y responsivos es necesario usar lenguajes como JavaScript y CSS.


CSS (siglas de “Hojas de Estilo en Cascada” permite determinar estilos como el diseño, los colores, el espaciado, el fondo y las animaciones.


Por su parte, JavaScript (el lenguaje de programación más popular en desarrollo web) agrega funciones dinámicas como pop-ups, sliders y galerías de imágenes.


¿Dónde aprender HTML?


HTML es el principal lenguaje de marcas para crear páginas web.


Tratándose de un estándar, es un must en desarrollo web y también para crear aplicaciones.


Si bien es un lenguaje accesible y con una curva de aprendizaje que podemos definir como placentera, para exprimir al máximo los conocimientos se recomienda la generación de vínculos en la comunidad de programadores, además de la asistencia a cursos de HTML y programación web.


El mayor potencial (es decir, la creación de sitios web profesionales) se consigue con el uso complementario de lenguajes de programación, como CSS y JavaScript.


A la hora de escoger un centro de enseñanza de programación, privilegia siempre aquellos que, como Coderhouse, ofrecen tutorías personalizadas y seguimiento de proyectos prácticos.