▷ HTML: Qué es y para qué sirve

Si has oído hablar de HTML pero no tienes ni idea de qué es o para qué se utiliza, estás en el lugar correcto. HTML (Lenguaje de Marcado de Hipertexto) es el código que usamos para crear y estructurar el contenido de las páginas web. En esta guía básica, aprenderás los conceptos esenciales de HTML para comenzar a entender cómo funcionan las páginas web.

¿Qué es HTML?

HTML es el lenguaje con el que se define el contenido de las páginas web. Corresponde a las siglas en inglés de Lenguaje de Marcado de Hipertexto, básicamente son un conjunto de etiquetas que el navegador interpreta y se emplean para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, tablas, vídeos, etc.

El lenguaje HTML sirve para describir la estructura básica de una página y organizar la forma en que se mostrará su contenido, además de que HTML permite incluir enlaces hacia otras páginas o documentos.

Hay que mencionar que el HTML no es un lenguaje de programación, ya que no cuenta con funciones aritméticas, variables o estructuras de control propias de estos lenguajes, por lo que el HTML únicamente sirve para crear páginas web estáticas. Sin embargo, este lenguaje es muy útil ya que combinado con otros lenguajes de programación obtenemos páginas web dinámicas como las que conocemos hoy en día.

Por ejemplo, con HTML podemos:

Crear párrafos.
Insertar imágenes.
Crear listas y tablas.
Añadir enlaces a otras páginas.

Un ejemplo simple:

<p>Mi gato es muy gruñón.</p>

En este ejemplo, <p> es una etiqueta que indica el inicio de un párrafo, y </p> marca el final del mismo.

Historia del HTML

El HTML nace en 1980 cuando el científico Tim Berners-Lee propuso un nuevo sistema de hipertexto para compartir documentos. Surge ante la necesidad de encontrar documentos que te aporten información relacionada con el tema que necesitas y que, además, puedas acceder a ellos desde cualquier parte del mundo.

Es por ello por lo que un grupo de expertos con Berners-Lee de cabecilla deciden crear un nuevo proyecto: el World Wide Web (WWW). Una de las bases de este proyecto es el lenguaje HTML, que como ya hemos mencionado permitirá que cada uno de los documentos que están en internet tengan un formato unificado y que le dé una estructura.

La forma de hacerlo es a través de etiquetas con un orden determinado. Recordemos que este lenguaje sólo podrá ser procesado por un navegador como los que usamos a diario, como el que posiblemente estés empleando ahora para leer este artículo. Los más conocidos son Safari, Chrome, Firefox y Opera, entre otros.

Anatomía de un elemento HTML

Un elemento HTML se compone de varias partes importantes:

Etiqueta de apertura: Es el nombre del elemento (como <p> para un párrafo), encerrado entre corchetes angulares < >.
Contenido: El texto o los datos que aparecerán en la página (por ejemplo, «Mi gato es muy gruñón»).
Etiqueta de cierre: Indica el final del elemento y se parece a la etiqueta de apertura, pero con una barra / (por ejemplo, </p>).
Atributos (opcional): Los atributos proporcionan información adicional sobre el elemento. Se colocan dentro de la etiqueta de apertura, como class o id.

Ejemplo con un atributo:

<p class="important">Este es un párrafo importante.</p>

En este caso, class="important" es un atributo que puede utilizarse para aplicar estilos específicos a este párrafo.

Estructura básica de una página HTML

Un documento HTML completo tiene una estructura básica que todo navegador puede entender. Aquí te mostramos cómo se organiza:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Bienvenido a mi sitio web!</h1>
    <p>Este es un párrafo de ejemplo.</p>
  </body>
</html>

Elementos principales:

<!DOCTYPE html>: Define el tipo de documento y es obligatorio en HTML5.
<html>: El elemento raíz que encierra todo el contenido de la página.
<head>: Contiene información no visible para los usuarios, como el título de la página y metaetiquetas.
<meta charset="UTF-8">: Especifica la codificación de caracteres (UTF-8 es la más común).
<title>: El título que aparecerá en la pestaña del navegador.
<body>: Encierra todo el contenido visible para el usuario.

Etiquetas HTML Comunes

Encabezados

HTML tiene seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante).

<h1>Este es el título principal</h1>
<h2>Este es un subtítulo</h2>

Párrafos

Se utilizan para agrupar bloques de texto <p>:

<p>Este es un párrafo de texto.</p>

Listas

Listas desordenadas usan la etiqueta <ul> y cada elemento se define con <li>:

<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ul>

Listas ordenadas usan <ol> para numerar los elementos:

<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Imágenes

Las imágenes se insertan con la etiqueta <img>, que es un elemento vacío (no necesita etiqueta de cierre).

<img src="mi-imagen.jpg" alt="Descripción de la imagen">

Vínculos o enlaces

Los enlaces se crean con la etiqueta <a>, que convierte un texto en un hipervínculo:

<a href="https://www.test.com">
Ver mas</a>

HTML Semántico

El HTML semántico se refiere al uso de etiquetas que no solo organizan la estructura de la página, sino que también tienen un significado específico sobre el tipo de contenido que encierran. Esto mejora la accesibilidad y el SEO de una página.

Algunas etiquetas semánticas importantes son:

<header>: Define el encabezado de una página o sección.
<nav>: Representa un conjunto de enlaces de navegación.
<article>: Contenido independiente que puede ser distribuido (como un artículo de blog).
<section>: Agrupa contenido relacionado bajo un mismo tema.
<footer>: Contiene información del pie de página, como enlaces de contacto o derechos de autor.

El uso de etiquetas semánticas ayuda a que los motores de búsqueda y las herramientas de accesibilidad (como los lectores de pantalla) comprendan mejor el contenido y su propósito.

Ejemplo de HTML semántico:

<article>
  <header>
    <h1>Artículo sobre HTML Semántico</h1>
    <p>Publicado el 26 de septiembre de 2024</p>
  </header>
  <p>Este artículo explica cómo usar etiquetas HTML semánticas para mejorar la estructura y accesibilidad de una página web.</p>
  <footer>
    <p>Autora: Carla Planes</p>
  </footer>
</article>

*Ejemplo de Artículo sobre HTML Semántico*

Elementos Vacíos

Algunos elementos de HTML no tienen contenido y se denominan elementos vacíos. Ya mencionamos uno, la etiqueta <img>. Otros ejemplos incluyen:

<br>: Inserta un salto de línea.
<hr>: Inserta una línea horizontal para separar contenido.

Estos elementos no necesitan una etiqueta de cierre porque no envuelven contenido.

Formulario HTML

Los formularios son una parte crucial de la interacción entre usuarios y sitios web. La etiqueta <form> permite crear formularios que los usuarios pueden rellenar y enviar.

Componentes de un formulario:

Etiqueta <input>: Define campos de entrada.
- Tipos comunes: text, email, password, checkbox, radio, submit.
Etiqueta <label>: Asocia un texto descriptivo con un campo de formulario.
Etiqueta <button>: Crea botones de envío o acciones.

Ejemplo de formulario simple:

<form action="/enviar" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Enviar</button>
</form>

HTML y CSS: Una Combinación Indispensable

HTML define la estructura de una página, pero para hacerla visualmente atractiva, necesitamos CSS (Cascading Style Sheets). CSS permite controlar el diseño: colores, fuentes, márgenes, espaciado, y más. Así, HTML y CSS trabajan juntos para crear páginas web completas y estéticas.

Ejemplo de combinación de HTML y CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
      }
      h1 {
        color: #333;
      }
    </style>
    <title>Mi página con estilo</title>
  </head>
  <body>
    <h1>Hola, mundo!</h1>
    <p>Esta es una página con estilo gracias a CSS.</p>
  </body>
</html>

Errores Comunes al Escribir HTML

Olvidar cerrar etiquetas: Todas las etiquetas deben tener su correspondiente cierre, excepto las que son elementos vacíos como <img>.
No anidar correctamente los elementos: Asegúrate de que los elementos estén correctamente abiertos y cerrados en el orden correcto.
No utilizar etiquetas semánticas: Usa etiquetas significativas como <header>, <footer>, y <article> para mejorar la accesibilidad y SEO.

Recursos para aprender HTML

Existen numerosos recursos en línea para aprender HTML, tanto gratuitos como de pago. Algunos de los más populares son:

Mozilla Developer Network (MDN): Ofrece una amplia variedad de tutoriales y guías para aprender HTML, CSS, JavaScript y otros aspectos de la creación de páginas web.
W3Schools: Una de las fuentes más respetadas y utilizadas para aprender HTML y otros lenguajes web.
Codecademy: Esta plataforma de aprendizaje interactivo ofrece un curso gratuito de HTML y CSS para principiantes.

Al final, HTML es la columna vertebral de la web y un conocimiento indispensable para cualquier persona que quiera dedicarse a la creación de páginas web, ya sea de manera profesional o como hobby.

La práctica constante es esencial para dominar HTML, así que te animamos a que vayas probando y experimentando con las etiquetas y las estructuras que hemos presentado en este artículo. No tengas miedo a cometer errores, incluso los programadores más experimentados los cometen y son una de las mejores formas de aprender.

Conclusión

Ahora que conoces los conceptos básicos de HTML, puedes empezar a crear tu primera página web. HTML es el pilar fundamental de la web, y aprenderlo te dará una base sólida para explorar otros lenguajes y tecnologías web como CSS y JavaScript.

La práctica es clave, así que no dudes en experimentar y probar nuevos elementos. Si quieres aportar algo o tienes cualquier duda, por favor, ¡no dudes en dejarnos un comentario! 😉

Blog

.com

Conceptos básicos de HTML: Guía para principiantes