¿Qué es HTML? El lenguaje de marcado de la Web

Hola, nuevamente vamos a tocar un aspecto básico de la web. En este post les voy a hablar de HTML, el lenguaje de marcado que se usa para crear páginas web. ¿Qué es HTML? ¿Para qué sirve? ¿Cómo se usa? ¿Qué ventajas tiene? ¿Qué etiquetas son las más comunes? Voy a explicar todo con un tono sencillo, para que aprendas y logres usarlo. Veamos.

El origen de HTML: ¿cómo nació el lenguaje de la web?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Fue creado en 1991 por Tim Berners-Lee, un científico británico que trabajaba en el CERN y promotor de la Web Semántica, el centro europeo de investigación nuclear. Berners-Lee quería compartir información con sus colegas de forma fácil y rápida, y para ello inventó el concepto de hipertexto: un texto que contiene enlaces a otros textos o recursos. Así nació la World Wide Web (WWW), la red mundial de información que usamos hoy en día.

Para crear documentos de hipertexto, Berners-Lee diseñó un lenguaje de marcado basado en SGML (Standard Generalized Markup Language), un estándar internacional para definir la estructura y el contenido de los documentos. Así surgió HTML, el lenguaje que permite crear páginas web con texto, imágenes, enlaces, tablas, formularios y otros elementos. HTML se fue desarrollando y mejorando con el tiempo, y hoy en día tenemos la versión HTML5, que es la más moderna y completa.

Las características de HTML: ¿qué lo hace especial?

HTML tiene tres características que lo hacen especial y diferente a otros lenguajes de programación. Veamos cuales son, según mi parecer:

1. HTML es un lenguaje de marcado, no de programación. Esto significa que no tiene lógica ni instrucciones, sino que se limita a describir la estructura y el contenido de los documentos. Para añadir funcionalidad o interactividad a las páginas web se usan otros lenguajes como JavaScript o PHP.
2. HTML es un lenguaje estándar y universal. Esto significa que es compatible con todos los navegadores web y dispositivos, y que sigue unas normas definidas por el W3C (World Wide Web Consortium), la organización que regula la web. Así se garantiza que las páginas web se vean correctamente en cualquier parte del mundo.
3. HTML es un lenguaje sencillo y flexible. Esto significa que es fácil de aprender y usar, y que permite crear páginas web de todo tipo y para todo propósito. Además, se puede combinar con otros lenguajes o tecnologías como CSS (Cascading Style Sheets) o XML (Extensible Markup Language) para mejorar el diseño o el intercambio de datos.

Las ventajas de HTML: ¿por qué es importante aprenderlo?

HTML tiene muchas ventajas que lo hacen importante y útil para cualquier persona interesada en el desarrollo web. Algunas de estas ventajas son:

• HTML es la base de la web. Sin HTML no habría páginas web ni navegadores web. Por eso, aprender HTML es imprescindible para entender cómo funciona la web y poder crear tus propios sitios web o aplicaciones web.
• HTML es fácil de aprender y usar. Como ya hemos dicho, HTML es un lenguaje sencillo y flexible, que no requiere conocimientos previos ni herramientas especiales. Solo necesitas un editor de texto y un navegador web para probar tus documentos.
• HTML es versátil y adaptable. Como ya hemos dicho, HTML permite crear páginas web de todo tipo y para todo propósito. Además, se puede adaptar a las necesidades y preferencias de cada usuario, usando atributos o etiquetas especiales que modifican el comportamiento o la apariencia de los elementos. Por ejemplo, se puede usar el atributo lang para indicar el idioma del documento, o la etiqueta meta para añadir información adicional sobre el autor, el tema o las palabras clave del documento.
• HTML es gratuito y abierto. Como ya hemos dicho, HTML es un lenguaje estándar y universal, que no depende de ninguna empresa o entidad. Por eso, cualquiera puede usarlo y modificarlo sin restricciones ni costes. Además, HTML es un lenguaje abierto y transparente, que se puede ver y analizar en el código fuente de cualquier página web. Así se puede aprender de otros desarrolladores y mejorar las propias habilidades.

Los ejemplos y las etiquetas más comunes de HTML

HTML se usa en la práctica escribiendo código en un editor de texto y guardándolo con la extensión .html. El código se compone de etiquetas o tags, que son palabras o símbolos entre corchetes angulares (< >) que indican el tipo y el contenido de los elementos. Por ejemplo, la etiqueta <p> indica un párrafo, la etiqueta <img> indica una imagen, o la etiqueta <a> indica un enlace.

Las etiquetas pueden tener atributos, que son pares de nombre y valor entre comillas que modifican las características de los elementos. Por ejemplo, la etiqueta <img> puede tener los atributos src (que indica la dirección de la imagen) y alt (que indica el texto alternativo de la imagen). Los atributos se escriben dentro de la etiqueta de apertura, separados por espacios.

Las etiquetas pueden ser de dos tipos: de apertura y cierre (<p>) o vacías (<img>). Las etiquetas de apertura y cierre indican el inicio y el final de un elemento, y deben coincidir en número y orden. Las etiquetas vacías indican un elemento sin contenido, y no necesitan una etiqueta de cierre.

Los elementos pueden ser anidados, es decir, colocados unos dentro de otros para crear una estructura jerárquica. Por ejemplo, se puede colocar un elemento <p> dentro de un elemento <div>, o un elemento <a> dentro de un elemento <p>. El elemento que contiene a otro se llama padre, y el elemento que está contenido se llama hijo.

Un documento HTML tiene una estructura básica que se compone de las siguientes partes:

• La declaración DOCTYPE, que indica la versión de HTML que se usa.
• La etiqueta <html>, que indica el inicio y el final del documento.
• La etiqueta <head>, que contiene información sobre el documento como el título, el estilo o los metadatos.
• La etiqueta <body>, que contiene el contenido visible del documento como el texto, las imágenes o los enlaces.

Aquí tienes un ejemplo de un documento HTML sencillo:

<!DOCTYPE html>
<html>
<head>
  <title>Mi primera página web</title>
</head>
<body>
  <h1>Hola mundo</h1>
  <p>Esta es mi primera página web creada con HTML.</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="Una sonrisa">
  <p>Puedes visitar mi <a href="https://hilmer.vip">blog</a> para aprender más sobre desarrollo web.</p>
</body>
</html>

Estas son las etiquetas más comunes que se usan en HTML:

• La etiqueta <h1>…<h6>, que indica un encabezado o título de diferente nivel.
• La etiqueta <p>, que indica un párrafo de texto.
• La etiqueta <ul>…<li>, que indica una lista no ordenada de elementos.
• La etiqueta <ol>…<li>, que indica una lista ordenada de elementos.
• La etiqueta <table>…<tr>…<td>, que indica una tabla de filas y columnas.
• La etiqueta <form>…<input>, que indica un formulario con campos de entrada.
• La etiqueta <div>, que indica una división o sección del documento.
• La etiqueta <span>, que indica una porción o fragmento del texto.
• La etiqueta <br>, que indica un salto de línea.
• La etiqueta <hr>, que indica una línea horizontal.

Estas son solo algunas de las muchas etiquetas que existen en HTML. Para conocerlas todas y aprender más sobre su uso y sus atributos, te recomiendo consultar la documentación oficial del W3C o sitios web como MDN Web Docs o W3Schools.

Espero que te haya gustado este contenido y que te haya servido para aprender un poco sobre HTML. Si tienes alguna duda o comentario, puedes escribirme un mensaje o dejarme un comentario. Si deseas profundizar sobre este lenguaje, visita la página de MDN Web Docs. ¡Hasta la próxima!