HTML
¿Qué es HTML?
HTML (HyperText Markup Language, «lenguaje de marcado de hipertexto») es el lenguaje con el que se estructura el contenido de todas las páginas web. Define qué es cada cosa dentro de un documento —esto es un título, esto un párrafo, esto una imagen, esto un enlace— mediante etiquetas escritas entre ángulos, como <h1> o <p>, que el navegador interpreta para mostrar la página.
Conviene deshacer un malentendido muy extendido: HTML no es un lenguaje de programación. No tiene lógica, condiciones ni cálculos; es un lenguaje de marcado: etiqueta y organiza contenido. Programar, en sentido estricto, es cosa de JavaScript — el HTML describe.
La web entera se apoya en un trío con un reparto de papeles muy claro: HTML estructura el contenido, CSS lo presenta (colores, tipografías, disposición) y JavaScript le da comportamiento (interacción, dinamismo). Los tres juntos forman el front-end de cualquier web, y son la materia con la que se levanta cualquier proyecto de diseño y desarrollo web.
¿Para qué sirve HTML?
Sirve para construir la estructura de cualquier página web: todo lo que ves en internet —este mismo texto incluido— es HTML por debajo. Puedes comprobarlo ahora mismo: abre el código fuente de cualquier web (Ctrl+U en el navegador) y lo que aparece es su HTML.
Su alcance va más allá de las webs. Los correos de email marketing se maquetan en HTML, y la estructura semántica de las etiquetas (encabezados jerarquizados, párrafos, listas) es exactamente lo que permite a Google y a los modelos de IA entender qué dice una página y extraer sus contenidos para citarlos. Un HTML bien estructurado ya no es un detalle técnico: es la condición para que tu contenido sea legible por las máquinas que deciden si mostrarlo.
Ahora bien: el HTML estructura, y solo eso. Para el diseño y las acciones dinámicas necesitas apoyarte en CSS y JavaScript, como veremos más abajo.
Ventajas de HTML
El lenguaje HTML es esencial, como ya te hemos comentado, por ello vamos a repasar ahora algunas de sus ventajas:
- Es el lenguaje web por excelencia.
- Es de fácil uso y entendimiento: las personas que tienen poco conocimiento en lenguaje aprenderán de manera cómoda y agradable.
- El HTML es idóneo para el aprendizaje por su marcado limpio y consistente.
- Este lenguaje de marcado de hipertexto es de código abierto, lo que significa que es gratis y se ejecuta en todos los navegadores.
- Se integra muy bien con lenguajes backend del tipo PHP y Node.js.
- Sus archivos son pequeños.
- Describe hipertextos.
- Su código es visible.
- Posee una comunidad de apoyo y soporte extendido, pues es un recurso muy utilizado por infinidad de usuarios.
Desventajas de HTML
El lenguaje HTML tiene algunas características que pueden no ser suficientes para los programadores, puesto que ningún lenguaje de programación es perfecto y HTML no es la excepción. Algunas desventajas pueden ser las siguientes:
- El HTML es estático, o lo que es lo mismo, es un lenguaje pensado para páginas web estáticas o no dinámicas. Así mismo, por ser estático, no permite el manejo de base de datos.
- El HTML no tiene semántica ni estándares comunes: su uso de etiquetas contiene nombres diferentes.
- El lenguaje HTML es independiente, es decir, un programador o desarrollador debe crear páginas web de forma individual para el HTML, así sea la misma síntesis.
- Al ser el HTML un lenguaje de interpretación, las páginas pueden verse levemente diferentes en función de cada navegador, es decir, se someten a la interpretación que cada navegador ejecute.
- Aunque esto no es generalizado, puede pasar que se presente incompatibilidad con ciertos navegadores. Un ejemplo de ello podría ser que algún navegador antiguo no reconozca etiquetas nuevas del HTML.
- Registra y almacena muchas etiquetas que pueden dificultar su procesamiento y corrección.
- Puede llegar a ser desordenado a causa de muchas líneas de código y etiquetas que se convierten en basura y pueden acarrear una mala estructuración.
- Si bien existe una gran comunidad que atiende y entiende el HTML, suele suceder que las soluciones brindadas a un problema específico en HTML no sean las correctas, por lo que el problema puede multiplicarse.
¿Cuáles son las etiquetas y elementos de HTML más usados?
Para el lenguaje de programación HTML existen hoy en día más de un centenar de etiquetas con las cuales se pueden crear infinidad de elementos. Dentro de todo ese compendio de etiquetas, las más utilizadas, o que pueden definirse como las principales, son los elementos de bloque y los elementos en línea, entre otras. Definimos a continuación las más usadas:
Elementos de bloque: son los que ocupan el ancho de la página. Sirven para iniciar una nueva línea en el documento, de tal forma que un elemento de encabezado, por ejemplo, se ubicará en una línea separada de un elemento de un párrafo. Las páginas HTML usan estas etiquetas:
- Etiqueta es el componente raíz del documento HTML.
- Etiqueta tiene datos meta, por ejemplo, el título y los caracteres de la web.
- Etiqueta engloba todo el contenido de la página, por ejemplo, el código se vería así:
<html>
<head>
<!-- DATOS META-->
</head>
<body>
<!-- CONTENIDO DE LA PÁGINA -->
</body>
</html>
Otras etiquetas de bloque muy usadas son: las de encabezado, conocidas como <h1> a <h6>, así como las etiquetas de párrafo, donde se encierra cada párrafo con la etiqueta <p>. ¡Entre otros!
Elementos en línea: este se encarga de dar formato al contenido de los elementos de bloque. Este le da un aspecto a los enlaces y a los textos. Es decir, una etiqueta <strong> mostrará un elemento en negrita, mientras que <em> la interpretará como cursiva. Y si deseas hipervínculos, la etiqueta correspondiente es <a> y atributo href. Ejemplo:
<a href="https://hola.com/">Haz clic aquí</a>
¿Cuál es la diferencia entre HTML y HTML5?
El HTML fue la primera versión de este lenguaje de marcado y se erigió con 18 etiquetas. Pero este ha ido evolucionando y su última actualización es el conocido HTML5. Y si te preguntas: ¿cuál es la diferencia entre HTML y HTML5? Su diferencia es sencilla. El HTML5 es una versión que trae consigo nuevas etiquetas y nuevos controles y API´S, lo que conlleva mejoras significativas de su versión anterior, el HTML4.
¿En qué se diferencia HTML, CSS y Java Script?
La diferencia esencial del HTML con respecto a los lenguajes CSS y Java Script es que el primero se encarga de estructurar contenido, pero es estático, por lo que para ofrecer una página de calidad y responsive necesitas trabajar además con CSS y Java Script.
El CSS ofrece estilos como, por ejemplo, diseño y animaciones, así como espaciado. Por su parte, el Java Script otorga dinamismo a la web con elementos como sliders, pop-ups y galerías de imágenes, siendo estos tres lenguajes un front-end en toda regla.
