El HTML es un lenguaje que se emplea en la creación de páginas web, que define la estructura y cómo se plasma el contenido de dicha página. Esto implica el texto, los encabezados, las imágenes, los vídeos, etc.
Teniendo en cuenta que el mundo ahora gira en torno a internet y que en este, las páginas web (junto con las redes sociales) son las reinas, conocer cómo funciona el lenguaje HTML es un plus.
O mejor dicho, saber cómo funciona el "HyperText Markup Language", lenguaje de marcado de hipertexto según su traducción del inglés. Además, es sencillo de aprender, y un primer paso para poder entrar en el mundo de la programación e, incluso, si lo que quieres es hacer tu propia web. Vamos a hacer una cosa: lee cómo hacer una web con HTML y luego decide si es lo tuyo o no. 😉
Qué es una página web en HTML
Una web en HTML es una página que está creada con este lenguaje. No se trata de un lenguaje de programación como tal, que serían por ejemplo Python o Java; en este caso lo que se define con HTML es la estructura, de ahí que se le llame lenguaje de marcado.
HTML como lenguaje de marcado
Se llama de marcado porque pone marcas; también llamadas etiquetas, que indican qué parte de la estructura conforma cada parte del contenido. Por ejemplo, el HTML define como título un título, como foto una foto, como párrafo un párrafo. Dicho de otra manera: esas marcas o etiquetas dicen cómo se debe mostrar el contenido de tu página.
Uso de etiquetas para estructurar contenido
Para entenderlo un poco mejor, vamos a ver cuáles son algunas de las etiquetas básicas que se usan en HTML. Una vez que las veas, seguro que te haces una idea mental más clara de cómo funciona:
- <html> es la que indica que el contenido está en lenguaje HTML.
- <head> contiene datos sobre la página web.
- <body> se refiere al contenido que se va a mostrar, texto, imágenes, etc.
- <h1> es el título de la página.
- <p> indica que comienza un párrafo de texto.
- <a> es una etiqueta que sirve para los enlaces en el texto, ya sean dentro de la web o a otra web externa.
HTML5 es la última versión de HTML y es importante en el desarrollo web moderno en el sentido de que es la que se usa actualmente, la más innovadora y más actual. ¿Y qué tiene de innovadora esta versión? Pues bien, según la Escuela británica de artes creativas y tecnología 1, “HTML5 permite crear sitios web altamente eficientes, tanto para los algoritmos de buscadores, gracias a las etiquetas, como para los usuarios”. También facilita la inclusión de contenido interactivo, mejora la experiencia de usuario y la experiencia móvil.
Conceptos básicos para comenzar
Vale, ya sabemos qué es el lenguaje HTML y algunas de sus etiquetas básicas, pero ¿dónde se colocan esas etiquetas? Existen algunas herramientas necesarias para poder implementar y utilizar el HTML, y algunas de más importantes son, por un lado un editor de texto y, por otro, el navegador web.
Editores de texto para HTML
Un editor de texto para HTML es tan sencillo como tener un soporte para poder escribir tu texto HTML. Puedes ir desde lo más básico hasta algo un poco más especializado. De hecho, cualquier editor de texto podría servir, aunque también hay algunos específicos que facilitan el trabajo.
Por ejemplo, puedes usar el bloc de notas en Windows, TextEdit en Mac o Gedit para Linux para plasmar la base de tu sitio web; editores que ya tendrás preinstalados en tu ordenador, y que, sin necesidad de instalar nada, te permiten escribir tu texto sin formato.
Luego, podemos irnos a algo más avanzado, editores de texto que, por sus funciones, están recomendados para HTML. Estos sí los tendrás que instalar en la mayoría de los casos pero, la mayoría también, tienen versión gratuita si no quieres gastar dinero para empezar.
Además, este tipo de editores te facilitarán el trabajo, pues entre sus características encontrarás, por ejemplo, que te avisarán si has olvidado cerrar una etiqueta (/>). Como un editor de texto que te marca las faltas de ortografía, pero en HTML. ¡Vamos a ver algunas de las opciones más recomendadas!
Visual Studio Code
- Es gratis.
- Tiene autocompletado.
- Muchas de sus funciones se pueden personalizar.
- Como explica Hostinger 1, te permite depurar tu código desde el propio editor.
Sublime Text
- Tiene una versión gratis pero deberás pagar para usar todas sus funciones.
- Es compatible con Windows, OS X y Linux.
- Es compatible con Python.
- El programa se actualiza constantemente.
Atom
- Es gratis.
- De código abierto.
- Funciona en todos los sistemas operativos.
- Lo puedes personalizar.
- Tiene "autocompletado inteligente" para escribir más rápido.
Navegador web para previsualizar el trabajo
El navegador interpreta el código y plasma la información tal y como habías previsto en HTML. Podemos decir que es como un traductor de HTML, que lo interpreta y lo plasma de forma visual. ¿Cómo se consigue esto? Pues guardando nuestro código.
Aunque seas principiante en HTML, conoces y usas los navegadores más populares, ¡seguro! Estos son: Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, etc.
Estructura básica de una página HTML
Vistos estos elementos básicos, vamos a mostrar ahora cómo sería la estructura básica de una página web. Primero, con una imagen de cómo se vería el código; luego, con la explicación paso a paso de cada elemento. 👇
- <!DOCTYPE html> para indicar al navegador que se está usando la última versión de HTML, la cinco.
- <html> es el inicio del documento.
- <head> da información sobre la página
- <title>Mi primera página web</title> es el título de la página web.
- </head> marca el final de head.
- <body> indica que comienza el contenido que se ve.
- <h1>¡Hola, mundo!</h1> es el título.
- <p> Esta es mi primera página creada con HTML.</p> Indica el comienzo y el final de un párrafo.
- </body> marca el final del body.
- </html> marca el final del documento.
Pasos para crear una página web en HTML
A continuación, vamos a ver cómo es el paso a paso para crear una página web con HTML. Lo mejor es que vayas siguiendo punto por punto para ir practicando.📝
💬 Te interesa: a lo largo de este recorrido, también puedes ir añadiendo comentarios en HTML con explicaciones, si lo consideras oportuno, sobre el desarrollo de tu trabajo.
1️⃣ Abre tu editor de texto y escribe la estructura básica tal y como hemos visto más arriba.
2️⃣ Agrega texto a tu página.
Para ello, usa las etiquetas de <h1> a <h6> para poner los títulos y la etiqueta <p> para generar los párrafos, tal y como se ve en el ejemplo:
- ✅ Ejemplo básico:
3️⃣ Cambia el color y formato del texto.
Puedes dar formato al texto HTML utilizando atributos como style, tanto para el color como para poner la letra en cursiva, negrita, etc.
- ✅ Ejemplo básico:
4️⃣ Agrega los enlaces.
Para agregar enlaces tendrás que usar la etiqueta <a> para enlazar a otras páginas.
- ✅ Ejemplo básico:
5️⃣ Incluye las imágenes.
Para incluir imágnes en HTML deberás usar la etiqueta <img> junto con los atributos src y alt.
- ✅ Ejemplo básico:
6️⃣ Inserta contenido multimedia, tanto de vídeo como de audio.
- ✅Ejemplo básico de video:
- ✅ Ejemplo básico de audio:
📈 Además de este tipo de contenido, también puede interesarte aprender a insertar tablas en HTML para presentar la información. Pero recuerda, ¡no sirven para dar estructura a tu página!
7️⃣ Confirma que todas las etiquetas estén cerradas.
Ya hemos visto que hay editores que lo notifican, como si fuese un corrector, pero tan importante es la etiqueta de apertura como la de cierre, que tiene / para notificar el fin de un párrafo, un texto, un título, un documento, etc. Por lo tanto, cerrar las etiquetas es fundamental para la estructura y buen funcionamiento de la página web, y también para evitar cualquier tipo de errores.
8️⃣ Guarda tu archivo HTML.
Una vez que hemos verificado que las etiquetas están cerradas, hay que guardar el archivo y visualizarlo en el navegador (que hemos visto más arriba).
- Cómo guardar el archivo con extensión .html: en el editor que estés usando, selecciona la opción de guardar cómo, escribe el nombre del archivo, por ejemplo "miprimerapaginaweb" y añade la extensión .html. Si es necesario, marca la opción "todos los archivos" y luego dale a "Guardar".
- Cómo abrir el archivo en un navegador para visualizarlo: por último, tendrás que visualizar tu archivo en el navegador para ver el resultado final. Para ello, debes darle dos veces con el ratón al archivo, entonces se abrirá en el navegador que tengas preseleccionado en tu ordenador; o bien, hacer clic derecho, abrir con y seleccionar el navegador que prefieras.
Como has visto, para hacer una página web con HTML hay que tener unas nociones técnicas básicas y, siguiendo este paso a paso, ya has visto lo esencial para principiantes. Ir probando, ver tutoriales o recibir clases de HTML pueden ser una excelente opción para aprender y continuar avanzando. ¡Esto es solo el principio!
Bibliografía
- Saavedra, J. A. (2023, marzo 22). ¿Qué es HTML5 y para qué sirve? Ebac. https://ebac.mx/blog/que-es-html5
- Gustavo, B. (2019, mayo 1). Los mejores editores HTML del 2025. Tutoriales Hostinger. https://www.hostinger.com/mx/tutoriales/mejores-editores-html
¿Te gustó este artículo? ¡Evalúalo!
Cargando...
