¿De qué se trata el HTML? Explicación de los fundamentos del Lenguaje de marcado de hipertexto.
El lenguaje de marcado de hipertexto –HTML- es un lenguaje informático que está presente en casi todas las páginas web y aplicaciones en línea. Un hipertexto es un texto que se usa para enlazar con otros textos, mientras que un lenguaje de marcado es una serie de marcas que indican a los servidores web la estructura y el estilo de un documento.
En esta nota, explicaremos los fundamentos de HTML, incluyendo su funcionamiento, sus ventajas y desventajas, y su relación con CSS y JavaScript.
Las etiquetas y elementos HTML más usados
Hoy en día, hay 142 etiquetas HTML que nos permiten crear diferentes elementos. Aunque los navegadores modernos ya no soportan algunas de estas etiquetas, aprender los diferentes elementos disponibles continúa siendo una gran ventaja.
Elementos de bloque
Un elemento de bloque ocupa todo el ancho de la página. Siempre comienza una nueva línea en el documento. Por ejemplo, un elemento de encabezado estará en una línea separada de un elemento de párrafo.
Todas las páginas HTML usan estas tres etiquetas:
- <html> Es el elemento raíz que define todo el documento HTML.
- <head> Contiene información meta como el título y el conjunto de caracteres de la página.
- <body> Engloba todo el contenido que aparece en la página.
<html>
<head>
<!– INFORMACION META–>
</head>
<body>
<!– CONTENIDO DE LA PAGINA –>
</body>
</html>
Otras etiquetas de bloque reconocidas son:
- Etiquetas de encabezado: Estas van desde <h1> a <h6>, donde h1 es el tamaño más grande, disminuyendo a medida que se avanza hasta el h6.
- Etiquetas de párrafo: Todas se encierran utilizando la etiqueta <p>.
- Etiquetas de listas: Tienen distintas variaciones. Usa la etiqueta <ol> para las listas ordenadas y <ul> para las no ordenadas. Luego, encierra los elementos individuales de la lista con la etiqueta <li>.
También puedes leer: “HTML: Crea una página web desde cero”
Elementos en línea
Un elemento en línea da formato al contenido interno de los elementos de bloque incorporando, por ejemplo, enlaces y texto enfatizado. Los elementos en línea se usan, más que nada, para dar formato al texto sin romper el flujo del contenido.
Por ejemplo, una etiqueta <strong> muestra un elemento en negrita, mientras que la etiqueta <em> lo muestra en cursiva. Los hipervínculos también son elementos en línea que usan una etiqueta <a> y un atributo href para indicar el destino del enlace:
<a href=”https://ejemplo.com/”>Haz click aquí</a>
¿Cómo es el funcionamiento de HTML?
El HTML no está considerado como un lenguaje de programación, ya que no puede crear funcionalidades dinámicas. En su lugar, con HTML, los usuarios web tienen la posibilidad de crear y estructurar secciones, párrafos y enlaces mediante elementos, etiquetas y atributos.
Cuáles son los usos más comunes de HTML:
- Desarrollo web: Los desarrolladores usan el código HTML para diseñar la forma en que un navegador muestra los elementos de la página web, como el texto, los hipervínculos y los archivos multimedia.
- Navegación por Internet: Los visitantes pueden navegar de manera sencilla y seguir enlaces entre páginas y sitios web relacionados, ya que el HTML se usa especialmente para incrustar hipervínculos.
- Documentación web: HTML permite organizar y dar formato a los documentos, de manera similar a Microsoft Word.
HTML fue un invento desarrollado por Tim Berners-Lee, un físico del instituto de investigación CERN en Suiza. Tuvo la visión y la gran idea de desarrollar un sistema de hipertexto basado en Internet y publicó la primera versión de HTML en 1991. Desde aquel momento, cada nueva versión del lenguaje HTML presenta nuevas etiquetas y atributos para el marcado.
Evolución de HTML: ¿Qué diferencia Hay entre el HTML del HTML5?
La primera versión de HTML incluía 18 etiquetas. Desde aquel tiempo, cada nueva versión trajo nuevas etiquetas y atributos añadidos al marcado. La actualización más relevante del lenguaje hasta este momento, fue la introducción de HTML5 en el año 2014.
La diferencia sustancial entre HTML y HTML5 es que este último admite nuevos tipos de controles de formulario. HTML5 también introdujo varias etiquetas semánticas que describen visiblemente el contenido, como <article>, <header> y <footer>.
Pro y contras de HTML
Como sucede con cualquier otro lenguaje informático, HTML ostenta sus puntos fuertes y sus debilidades.
Principales Ventajas:
- Para principiantes: HTML tiene un marcado limpio y consistente, así como una curva de aprendizaje poco pronunciada.
- Soporte: El lenguaje es sumamente usado, con gran cantidad de recursos y una enorme comunidad de apoyo.
- Accesible: Es de código abierto y absolutamente gratuito. HTML se ejecuta de forma nativa en todos los navegadores web.
- Flexible: HTML es fácilmente integrable con lenguajes backend como PHP y Node.js.
También puedes leer: “5 herramientas para optimización tu sitio web”
Desventajas:
- Estático: Este lenguaje se usa fundamentalmente para páginas web estáticas. Para una funcionalidad dinámica, es recomendable utilizar JavaScript o un lenguaje de back-end como PHP.
- Página HTML independiente: Los usuarios tienen que crear páginas web individuales para HTML, aunque los elementos sean los mismos.
- Compatibilidad con los navegadores: Algunos navegadores demoran en adoptar nuevas funciones. A veces, los navegadores más antiguos no reproducen las nuevas etiquetas.
¿Cómo se interrelacionan HTML, CSS y JavaScript?
El HTML se usa para añadir elementos de texto y crear la estructura del contenido. No obstante, no es suficiente para construir un sitio web profesional y totalmente responsivo. Por eso, HTML necesita la ayuda de las Hojas de Estilo en Cascada –CSS- y de JavaScript para crear la mayor parte del contenido del sitio web.
El CSS es responsable de estilos como el fondo, los colores, el diseño, el espaciado y las animaciones. Por su parte, JavaScript añade funcionalidades dinámicas como sliders, pop-ups y galerías de fotos. Estos tres lenguajes son los cimientos del desarrollo front-end.
