Si estás empezando a navegar en las aguas del desarrollo y programación web, es normal que te plantees la pregunta: ¿Cómo crear una página web en HTML desde cero?

Siempre es una buena idea definir el propósito que cumplirá tu futura página y el contenido que deseas incluir. Es una práctica común en la industria crear una maqueta o boceto, puedes hacerlo a lápiz, usar herramientas digitales para ilustrar como Figma o tan simple como hacer una estructura básica con notas adhesivas en Miro.

Qué es HTML

Antes de avanzar, lo primero que debes saber es que HTML no es un lenguaje de programación, sino un lenguaje de marcado. Explicado en palabras sencillas, es un componente esencial en el desarrollo web porque es el que se encarga de definir el significado y la estructura de todo el contenido web como texto, imágenes o vídeos. Pero, ¿qué significa HTML? Pues, sus siglas vienen de HyperText Markup Language, que en español se traduce como Lenguaje de Marcas de Hipertexto.

HTML emplea una serie de etiquetas que le dicen a un navegador web cómo debe mostrar el contenido de tu página. Independientemente de cuán avanzado sea un navegador, desde Internet Explorer hasta Google Chrome, pasando por Safari, Brave, Mozilla Firefox y Microsoft Edge, absolutamente todos son capaces de interpretar este código.

Características de HTML

La característica más relevante del lenguaje HTML es la forma en la que organiza los datos. Es bastante práctica porque los separa en dos bloques. El primero, <head> o cabecera, es donde se agrupa el contenido descriptivo como los metadatos, el espacio para definir datos como el idioma, sobre qué va tu sitio web o cuáles son las palabras claves, además de hacer referencias a ficheros como JavaScript o archivos CSS.

Cuando hablamos del segundo bloque de contenido de HTML, nos referimos al <body> o cuerpo si lo traducimos al español. Es el espacio que contiene todos los elementos de la web como textos, imágenes, enlaces, vídeos y diferentes atributos.

Creando una web en HTML

Definidas las principales características de este lenguaje, podemos empezar a contarte cómo crear una página web en HTML desde cero.

Lo primero que debes hacer es elegir un editor de texto, que se transformará en tu entorno de desarrollo. Existen diversas opciones gratuitas y de pago. Los editores de HTML textuales son los más recomendados. Entre las opciones más utilizadas se encuentran el Bloc de Notas o Notepad++ para Windows, BBedit o TextEdit para Mac y Visual Studio Code que está disponible para sistemas operativos Windows, Mac y Linux.

Solo debes asegurarte de que tu editor esté configurado para guardar archivos con la extensión ".html".

Estructura básica del código HTML

Ya con el editor de texto seleccionado, ¡es momento de comenzar con el código!

Cada página HTML comienza con una estructura básica que incluye las siguientes etiquetas:

  • <!DOCTYPE html>: Esta es la etiqueta que identifica el lenguaje. También define la versión de HTML que estás utilizando (HTML5 en este caso).
  • <html lang="es">: Esta línea indica el inicio del documento y “lang=”es” indica al navegador que el idioma del sitio será en español.
  • <head>: Utilizar esta etiqueta indica que se abre el bloque de información de la web, conteniendo la metainformación sobre la página.
  • charset: Es una abreviatura de "character set" (conjunto de caracteres). Esta parte de la etiqueta <meta> se refiere a la codificación de caracteres que se utilizará en la página web.
  • UTF-8: UTF-8 significa "Unicode Transformation Format - 8 bits". Unicode es un estándar que incluye una amplia gama de caracteres de diferentes idiomas y símbolos. Por ejemplo, es gracias al UTF-8 que una página web puede mostrar la letra “ñ”, ya que inicialmente, esta no se encuentra en el alfabeto anglosajón.
  • <title>: Este es el espacio para escribir el título de la página. El que vemos en la pestaña del navegador web.
  • <meta name=”description”>: Es la etiqueta encargada de informar a los buscadores sobre qué se trata tu sitio web. Por eso, es importante escribir una buena descripción para mejorar el posicionamiento.

En un archivo HTML, todos estos elementos se verían así:

Ejemplo de código HTML en la sección <head>

Agregar contenido

Ahora que tienes la estructura básica, puedes empezar a agregar contenido. Es momento de trabajar en la etiqueta <body>, a partir de aquí, lo que escribas será visible dentro de tu página web.

  • <h1>: Esta etiqueta se utiliza para definir el título de nivel uno, el más importante para el posicionamiento orgánico de tu página web.
  • <p>: Para empezar un nuevo párrafo necesitas usar esta etiqueta. A su vez, </p> marcará el cierre de un texto.
  • <h2>, <h3>: En este caso, encontrarás encabezados desde el 2 hasta 6 y determinarán la relevancia de los subtítulos de tu página web. Mientras más alto el número, más baja su jerarquía.

Con el código que hemos hecho ahora, tanto para el <head> como para el <body>, ya tendríamos nuestra web a un nivel muy básico. Para añadirle color al texto, darle estilos diferentes o pintar imágenes, puedes utilizar etiquetas como:

  • <img>: Para añadir una imagen en la página web.
  • <ul>: Si quieres hacer listas sin ningún tipo de orden especifico, ¡esta es tu etiqueta! Para cada elemento de la lista tendrás que usar la etiqueta <li>
  • <style>: Se emplea para introducir código CSS.
  • <blockquote>: Si quieres escribir una cita larga que incluye varios párrafos, necesitarás esta etiqueta.
Ejemplo de código HTML en la sección <body>

En tu navegador, el archivo se cargaría así:

Ejemplo de cómo se ve en el navegador el contenido HTML

Si quieres empezar a personalizar más tu contenido, puedes empezar a utilizar más etiquetas. Por ejemplo, para agregarle color al H1, el código se vería así:

  • <span style=”color:blue“></span>: con esta puedes especificar un color, en este caso, azul.
Ejemplo de código para cambiar el color de un h1 en el archivo HTML

Esta etiqueta se reflejaría así:

Ejemplo de cómo se ve el cambio de color en el navegador

Ten en cuenta que, en caso de decidir añadir detalles (como lo es el color) a otras secciones de tu código desde un archivo CSS, una buena práctica es personalizar el HTML desde el archivo de estilos. Así evitarás confusiones a largo plazo.

Ahora bien, a nuestra página le hace falta un enlace al que podemos darle clic. Para agregar una URL tenemos las siguientes etiquetas:

  • <a>: Es la etiqueta para añadir un enlace a un texto.
  • “_blank”: Se refiere que al hacer clic, la página debe abrirse en una pestaña nueva.
Cómo agregar un enlace al código HTML

Guarda y visualiza tu página creada con HTML

Una vez que hayas agregado contenido, guarda tu archivo con la extensión ".html". Luego, ábrelo en tu navegador web para ver cómo se ve tu página. Recuerda que cada vez que realices cambios en tu código, debes guardar el archivo y refrescar la página en el navegador para ver los resultados.

‍Con todo el código HTML que has escrito, tu sitio web empezaría a tomar forma:

Cómo se ve un enlace inicial de una página creada en HTML

Explora estilos con CSS

HTML se encarga de la estructura y el contenido de tu página, pero para darle estilo, puedes utilizar CSS (Cascading Style Sheets). Con CSS, puedes controlar colores, fuentes, márgenes, ¡y más!

Para vincular un archivo CSS a tu documento HTML, debes ir a la sección <head>. Esto permitirá que el lenguaje de estilos se aplique.

Cómo enlazar un archivo CSS en un archivo HTML

En un archivo de texto con el nombre “estilos.css” puedes introducir comando para modificar directamente cómo se ve tu página.

Cómo el CSS modifica el estilo del HTML

El resultado sería así, ¿ves los cambios en los detalles? Esta es la magia del frontend.

Cómo empieza a tomar forma el frontend con CSS

¿Cómo puede mi página HTML estar disponible online?

Adquiere un dominio

Para que tu página web esté disponible en Internet, necesitas un dominio propio. Un dominio es la dirección web que las personas usarán para acceder a tu sitio. Para conseguirlo deberás:

  • Elegir un nombre de dominio: Piensa en un nombre que sea relevante para tu sitio web y fácil de recordar. Asegúrate de que sea único y este disponible, es una buena idea usarlo para construir tu marca personal.
  • Busca registradores de dominios: Hay muchas compañías, como GoDaddy, Namecheap y Google Domains.
  • Verifica la disponibilidad: Ingresa el nombre de dominio en la barra de búsqueda del registrador de tu elección y verifica si está disponible. Si el nombre que elegiste ya está registrado, es posible que debas considerar alternativas o extensiones de dominio diferentes (además de “.com”, existen opciones como “.net”, “.io” o “.dev”).
  • Añade al carrito y compra: Una vez que hayas encontrado un dominio disponible, agrégalo a tu carrito de compras y sigue las instrucciones. En este paso, podrás escoger si quieres renovar tu dominio de forma manual o automática, algo que normalmente se hace anualmente.
  • Configura la configuración de DNS: Después de adquirir el dominio, deberás configurar la información de DNS (Sistema de Nombres de Dominio) para que apunte a los servidores de alojamiento web donde se encuentra tu página HTML. Esto se hace a través del panel de control de tu registrador de dominios. Consulta la documentación de tu registrador o su soporte técnico para obtener instrucciones detalladas sobre cómo hacerlo.

Consigue alojamiento web

Para que tu página web esté online, necesitas un servicio de alojamiento web donde puedas cargar los archivos HTML y otros recursos (como imágenes) que forman parte de tu sitio. Puedes optar por servicios de alojamiento compartido o VPS (Servidor Virtual Privado) según tus necesidades y presupuesto. Algunos proveedores populares de alojamiento web incluyen Hostinger, Bluehost, SiteGround y HostGator.

Una vez que hayas adquirido un servicio de alojamiento web, recibirás información sobre cómo acceder a tu cuenta y cargar archivos en tu servidor web.

Sube tu página web

Ahora que tienes tu dominio y tu servicio de alojamiento web, puedes subir tu página web HTML al servidor. Utiliza un cliente FTP (Protocolo de Transferencia de Archivos) o el panel de control proporcionado por tu proveedor de alojamiento para cargar tus archivos.

Comprueba que tu página esté online

Después de subir tus archivos, espera a que los servidores de DNS propaguen la información, lo que puede llevar algunas horas o incluso un día. Una vez que se complete la propagación, podrás acceder a tu página web ingresando tu dominio en un navegador web.

¡Felicidades! Ahora tu página web creada con HTML está disponible para que el mundo la vea.

Incluso si decides crear tu página web con una opción low-code, como WordPress o Webflow, estos conocimientos pueden ayudarte a personalizar con mucho más detalle tu página web. Además, te serán útiles para algo mucho más importante: entender el por qué y el para qué de estos servicios y cómo funcionan desde dentro.

Aprende mucho más sobre desarrollo web

Crear una página web en HTML es solo el primer paso. A medida que adquieras más conocimientos y experiencia, podrás explorar temas avanzados, mejorando la apariencia con CSS y añadir funcionalidades con JavaScript a tu sitio web.

Si este artículo te ha interesado y quieres aprender más a fondo como crear una página web en HTML, trabajar estilos CSS, y tener todos los conocimientos necesarios para hacerlo, te recomendamos el Bootcamp de Programación Web. Es un curso intensivo con un enfoque eminentemente práctico, en el que te iniciarás como desarrollador o desarrolladora Full Stack en 16 semanas, ¡uno de los perfiles tecnológicos con más demanda laboral en el mercado!