inicio

Introducción a HTML

Se lee en solo 2 min

👋 Introducción

En esta sección vamos a desglosar HTML, el lenguaje esencial que estructura todo el contenido de la web. Veremos qué es exactamente, cómo se diferencia de un lenguaje de programación, cuál es el papel de las etiquetas y los atributos, y cómo el navegador utiliza este lenguaje para “construir” la página que ves.

📄 ¿Qué es HTML?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).

  • Hipertexto: Se refiere al texto que tiene la capacidad de enlazar a otros documentos o recursos a través de hipervínculos. Es la red de conexiones que hace funcionar la web.
  • Lenguaje de Marcado: Utiliza etiquetas (como <p> o <h1>) para definir y describir el contenido y su estructura. Estas etiquetas son instrucciones para el navegador sobre cómo presentar la información.
  • Lenguaje: Un sistema de sintaxis y vocabulario que los navegadores web pueden entender y procesar.

En resumen, HTML es el esqueleto o el plano de una página web, definiendo dónde va cada elemento: encabezados, párrafos, listas, imágenes y enlaces.

💡 HTML No es un Lenguaje de Programación

Es crucial entender la diferencia:

  • HTML (Lenguaje de Marcado): Se enfoca en la estructura y la presentación del contenido. No realiza operaciones lógicas ni cálculos.
    • Analogía: Es el plano de la casa que define los cimientos y las paredes.
  • JavaScript, Python (Lenguajes de Programación): Se utilizan para añadir dinamismo, lógica e interactividad. Realizan cálculos y responden a las acciones del usuario.
    • Analogía: Es la electricidad y la fontanería que hace que la casa funcione.

🏗️ Cómo Trabaja HTML: Etiquetas y Atributos

Los documentos HTML están construidos a partir de elementos, definidos por etiquetas y modificados por atributos.

Las etiquetas son palabras clave encerradas entre corchetes angulares (< y >). La mayoría de los elementos tienen:

  1. Etiqueta de apertura: Marca el inicio del elemento (ej. <p>).
  2. Contenido: La información que se muestra (ej. Este es mi párrafo).
  3. Etiqueta de cierre: Marca el final del elemento (ej. </p>).

Ejemplo de Párrafo:

<p>Este texto se mostrará como un párrafo.</p>

Algunos elementos son vacíos y no necesitan etiqueta de cierre, como la etiqueta de imagen: <img/>.

Los atributos añaden información adicional o modifican el comportamiento de un elemento. Se colocan dentro de la etiqueta de apertura con el formato nombre="valor".