HTML: ¿qué es?, su importancia en la Web y una guía para principiantes
capa
Cuando visitamos sitios de noticias, redes sociales, sistemas bancarios, entre otros, nos encontramos con varios elementos en la pantalla que permiten la interacción del usuario. Pero, ¿alguna vez te has preguntado cómo se construyó todo esto?
Uno de los profesionales responsables de construir un sitio web es el desarrollador front-end, quien convierte un diseño creado por el equipo de diseño UX/UI en una aplicación utilizando código, como el Figma. Técnicamente, la construcción de un sitio web se realiza mediante varias tecnologías, y una de ellas es el HTML. En este artículo, conocerás qué es HTML, para qué sirve y cómo utilizarlo.
Al ser una tecnología utilizada para desarrollar sitios web, es común pensar que programamos en HTML. Una observación importante es que HTML no es un lenguaje de programación, sino de marcado. Pero, ¿por qué HTML no es un lenguaje de programación?
Los lenguajes de programación fueron diseñados para crear algoritmos, manipular variables, estructuras de datos, entre otras cosas, mientras que el HTML (HyperText Markup Language, que en español significa Lenguaje de Marcado de Hipertexto) se utiliza para estructurar y formatear el contenido de las páginas web.
Para poder construir un proyecto con esta tecnología, necesitamos un archivo con formato .html, de modo que podamos abrirlo en un navegador, que interpretará el código fuente para mostrar los elementos en la pantalla.
La anatomía de un documento HTML puede interpretarse como un árbol. Tenemos la raíz, que es el elemento <html>, y a partir de ahí podemos declarar nuevos elementos (que son como ramas) que pueden interpretarse como hijos (cuando hay ramificaciones a partir de una rama, anidando elementos) y, por lo tanto, también es posible crear elementos padres. Además, los elementos que comparten la misma rama de origen pueden llamarse hermanos.
La anatomía de un elemento HTML se construye mediante la apertura de la etiqueta, que está encerrada entre corchetes angulares. Por ejemplo, la etiqueta de párrafo <p> va seguida del contenido que se mostrará y, finalmente, se cierra con una etiqueta que es igual a la de apertura, pero con una barra antes del nombre del elemento: </p>. El resultado final es este:
<p>El nombre de mi gato es Bonifácio.</p>Con HTML, puedes crear varios elementos para construir una página web sobre el tema que prefieras: blogs, tiendas virtuales, páginas de noticias, etc. Algunos de los principales elementos que podemos crear son:
Este lenguaje de marcado ofrece una amplia gama de recursos, habiendo mencionado solo algunos de ellos, que pueden utilizarse según las necesidades del proyecto.
HTML fue desarrollado por Tim Berners-Lee en el CERN (Organización Europea para la Investigación Nuclear), con la ayuda del entorno de desarrollo NeXTSTEP, y inicialmente era una colección de herramientas para manejar investigaciones y comunicaciones entre su creador y otras personas.
Con la evolución de Internet, la solución ganó atención mundial. Las primeras versiones eran flexibles, lo que ayudaba a los principiantes en el campo. Con el tiempo, la estructura se volvió más estricta, pero hasta el día de hoy los navegadores pueden interpretar páginas web creadas de la antigua manera gracias a la retrocompatibilidad.
Formalmente, las especificaciones se definieron solo en la década de 1990. Luego, comenzó la evolución de HTML, creándose un grupo de trabajo para HTML que, en 1995, publicó la versión HTML 2.0. A finales de 1997 se lanzó la versión HTML 3.5 y, con ella, el grupo de trabajo del W3C comenzó a enfocarse en el desarrollo de XHTML. Continuaron con el lanzamiento de las versiones HTML 4.01 en 1999, de XHTML en 2000, y finalmente llegamos a 2014, cuando se lanzó HTML5, que se utiliza hasta hoy, junto con sus actualizaciones.
Vimos que se lanzaron varias versiones de HTML hasta llegar a la que usamos hoy, pero, ¿cuál es la diferencia entre HTML y HTML5?
En las versiones más antiguas, la estructuración del contenido se realizaba principalmente mediante elementos genéricos, como <div> y <span>. En HTML5, tenemos etiquetas semánticas que se refieren al propósito del elemento, como <header> para encabezado, <footer> para pie de página, <section> para separar secciones, entre otras.
Además, hoy, con HTML5, tenemos soporte nativo para audio y video, pudiendo incorporarlos directamente en la página. Los formularios también pueden abarcar más tipos de campos en la nueva versión: ahora tenemos disponibles campos de correo electrónico, número, fecha y especificaciones que generan validaciones nativas en los elementos.
Sin embargo, es importante saber que HTML5 no es una versión estática. Todavía se está desarrollando y mejorando hoy en día, con funcionalidades y recursos que se agregan de vez en cuando.
Tanto XML (Lenguaje de Marcado Extensible) como HTML son lenguajes de marcado utilizados en la web, pero, a pesar de esto, tienen propósitos y estructuras diferentes.
XML está diseñado para representar información de forma jerárquica y legible, tanto para humanos como para máquinas, sin preocuparse por la presentación visual ni tener una estructura predefinida, sino con la descripción de la estructura de los datos de manera consistente y portátil. En Latino América, es el formato más utilizado en la emisión de facturas.
Por otro lado, HTML es específico para la creación y presentación de contenido en páginas web, siendo más restrictivo porque tiene elementos y estructuras predefinidas, centrándose en la presentación visual y cómo se deben mostrar los elementos en el navegador. Es comúnmente utilizado en la construcción de sitios web.
Podemos considerar que las principales diferencias son: mientras que XML se utiliza para almacenar y transportar datos, HTML se utiliza para crear páginas web con contenido formateado e interactivo.
Como se mencionó anteriormente, HTML se utiliza para estructurar y formatear el contenido de las páginas web mediante etiquetas, que serán interpretadas por el navegador. Para que esta interpretación sea posible, es importante declarar qué versión de HTML se utilizará.
Esta declaración se realiza mediante <!DOCTYPE html>, asegurando que el navegador interprete correctamente el código. Es importante observar que esto no es una etiqueta HTML, sino una instrucción para el navegador que debe colocarse al principio del documento sin espacios entre ella.
La representación estructurada del contenido HTML de una página web se realiza a través del DOM (Modelo de Objetos del Documento), que es una interfaz de programación que permite el acceso y la manipulación de los elementos. Es el DOM el que estructura los elementos en forma de árbol, donde cada uno de ellos se representa como un nodo organizado jerárquicamente según la estructura del documento.
Podemos analizar un ejemplo de código HTML para mostrar una frase en la pantalla:
<!DOCTYPE html>
<html>
<head>
<title>Aprendiendo HTML</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer proyecto HTML</p>
</body>
</html>La estructura del DOM sería la siguiente:
IMG1
<html>: es el elemento raíz de la página, por lo tanto, jerárquicamente está por encima de todos;<head>: se refiere a la "cabeza" de la página, donde se pueden insertar configuraciones que ayuden en la representación, como el título de la página. Está dentro del elemento <html>, por lo tanto, es un elemento hijo de este;<title>: define el título de la página, que se mostrará en la pestaña del navegador. Es una ramificación de <head>, siendo un elemento hijo;<body>: es el "cuerpo" de la página, donde se insertarán todos los elementos visuales que deben aparecer, como los textos. También está jerárquicamente dentro de <html>, por lo tanto, es hijo de este;<h1>: se refiere al título principal que se mostrará en el cuerpo de la página. Como está dentro de <body>, se considera un hijo de este;<p>: crea un párrafo de texto según el contenido insertado dentro de él. También está dentro de <body>, por lo tanto, es hijo de este y hermano de <h1>.Así, podemos ver que el DOM es una representación en forma de árbol del contenido insertado en HTML y que, al crear un nodo para cada elemento, permite que se acceda a ellos mediante JavaScript.
Las IDEs (Entornos de Desarrollo Integrados, en español) son programas para computadora que tienen herramientas para ayudar en el desarrollo de software. Hay varias disponibles para desarrollar en HTML, siendo las principales:
Si deseas obtener más información sobre estos editores y otros, así como una comparación sobre cuál utilizar, consulta el artículo Sublime, Atom o VSCode: ¿cuál es el mejor editor de código?.
Los principios básicos para crear un sitio en HTML forman parte de la siguiente estructura inicial:
<html>
<head>
<title>Aprendiendo HTML</title>
</head>
<body>
</body>
</html>Siendo:
<html> responsable de definir el inicio y el fin del documento HTML;<head> define la información del documento;<title> es el título de la página;<body> es donde constará todo el contenido visible de la página.Con esto, puedes explorar los elementos proporcionados por HTML para construir tu página:
Los elementos en línea, también conocidos como inline, son elementos que ocupan solo el ancho de su contenido, como las etiquetas:
<a>: es posible definir enlaces con esta etiqueta;<span>: es un contenedor genérico para agrupar textos;<br>: crea un salto de línea;<img loading="lazy">: inserta imágenes en el sitio;<audio>: inserta audios en el sitio.Si deseas obtener más información sobre elementos en línea y ver ejemplos reales, consulta el artículo ¿Qué es HTML y sus etiquetas? Elementos en línea.
Los elementos en bloque, o elementos block level, son elementos que ocupan todo el espacio de su elemento padre. Por ejemplo, las etiquetas:
<header>: define el encabezado de la página;
<main>: define el contenido principal de la página;
<footer>: define el pie de página de la página;
<section>: representa una sección dentro del contenido principal;
<article>: incluye un artículo en la página;
<aside>: hace referencia a otro contenido de la página;
<nav>: crea el menú de navegación;
<div>: es como una división en la página con fines estéticos;
<p>: representa un párrafo;
<h1>: define los títulos de la página y va desde <h1> hasta <h6>;
<hr>: crea una línea horizontal;
<video>: inserta videos en el sitio.
Para aprender más sobre estas etiquetas y conocer ejemplos, lee el artículo ¿Qué es HTML y sus etiquetas? Elementos block-level.
Al mencionar los elementos <div> y <span>, podemos notar que su definición es similar: un contenedor. La diferencia entre ellos es que <div> es un elemento en bloque, por lo que, por defecto, ocupa todo el ancho disponible horizontalmente, mientras que <span> es un elemento en línea, ocupando solo el espacio necesario para su contenido.
Un consejo para saber cuándo usar cada uno de ellos es: <div> se utiliza más para estructurar y organizar secciones de la página, mientras que <span> se utiliza para aplicar estilos o manipular partes más pequeñas de un texto o contenido.
El HTML semántico es un enfoque en el desarrollo web que enfatiza el uso correcto y significativo de los elementos, eligiendo aquellos que mejor describen el contenido que se está presentando.
Por ejemplo, en lugar de usar un <div> genérico para todo el contenido, es preferible usar elementos más específicos, como <header>, <nav>, <main>, <article>, <section>, <footer>, entre otros, de acuerdo con la estructura y la naturaleza del contenido. Esto se utiliza para mejorar el SEO (Search Engine Optimization y la accesibilidad de la página.
Una de las principales características de este enfoque es la importancia de los encabezados, que están representados por los elementos <h1> a <h6>, siendo esenciales para indicar la jerarquía del contenido. Los motores de búsqueda dan importancia a los encabezados, por lo que es un punto de enfoque.
El texto alternativo en imágenes es crucial tanto para la accesibilidad como para el SEO. Al asegurarse de insertar el atributo alt en las etiquetas de imagen, proporcionando un texto descriptivo, esto permite que los lectores de pantalla lean el texto y que los motores de búsqueda consideren ese texto al clasificar las páginas.
Todavía sobre textos en el contexto de semántica, es importante usar enlaces descriptivos en lugar de genéricos. Por ejemplo, en lugar de construir un enlace con "haga clic aquí", escriba un texto que deje claro el destino de ese enlace.
Para mejorar la accesibilidad de su sitio, es posible utilizar WAI-ARIA, un conjunto de atributos y propiedades que proporciona recursos adicionales para describir la función, el estado y el comportamiento de los elementos, como menús, formularios, carruseles y otros, haciéndolos más comprensibles para lectores de pantalla.
Al aplicar estas prácticas, creas páginas amigables para los motores de búsqueda, como Google, y accesibles para todos los usuarios. Esto resulta en:
Es posible insertar imágenes en una página a través de la etiqueta <img loading="lazy">, que por ser un elemento vacío no necesita una etiqueta de cierre. Un ejemplo de uso es:
<img loading="lazy" src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen">Los atributos básicos que deben utilizarse en esta etiqueta son:
src: para referenciar la ruta o URL de la imagen. Puede utilizar tanto una imagen de su computadora como una imagen encontrada en la web, a través de su URL;alt: para insertar un texto alternativo, que se muestra si la imagen no se carga y también para fines de accesibilidad, es decir, si el usuario está utilizando un lector de pantalla, el texto alternativo se leerá para él.Además de estos atributos, podemos definir el ancho (width) y el alto (height) de la imagen directamente en la etiqueta:
<img loading="lazy" src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen" width="300" height="200"">También podemos trabajar con imágenes responsivas a través de las etiquetas <picture>, <source> y el atributo srcset, que puedes conocer accediendo al artículo Imágenes adaptables.
Ya sea para escribir títulos, subtítulos, texto simple o listas, en HTML tenemos elementos específicos para eso.
En cuanto a los títulos, tenemos los encabezados, que se utilizan para estructurar el contenido de la página y proporcionar una jerarquía visualmente clara. El encabezado más importante es <h1>, que generalmente se utiliza para el título principal de la página. <h2> se utiliza para subtítulos de secciones importantes, <h3> para subsecciones, y así sucesivamente hasta <h6>. Por ejemplo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Subsección</h3>Cuando queremos organizar información en forma de ítems, podemos utilizar las listas. Hay tres tipos principales de listas en HTML:
Las listas no ordenadas se crean con la etiqueta <ul> (unordered list), y los ítems de la lista se definen con la etiqueta <li> (list item). Los ítems se marcan con viñetas, por defecto, puntos.
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ul>Las listas ordenadas se crean con la etiqueta <ol> (ordered list). Los ítems de la lista también se definen con la etiqueta <li> y se numeran automáticamente.
<ol>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ol>También tenemos las listas de definición, que se crean con la etiqueta <dl> (definition list). Consisten en términos (definidos con la etiqueta <dt>) seguidos de sus definiciones correspondientes (definidas con la etiqueta <dd>).
<dl>
<dt>Término 1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
</dl>Para escribir textos simples, tenemos los párrafos, que se crean con la etiqueta <p>. Dentro de esta etiqueta, puedes insertar el texto del párrafo. Por ejemplo:
<p>Este es un párrafo de ejemplo que contiene algún texto.</p>Y también puedes estilizar algunas palabras de los textos según sea necesario: ya sea para resaltar, para tachar, para enfatizar. Todo esto a través de marcadores de texto.
Tenemos varias etiquetas que no se utilizan para construir elementos, sino como marcadores de texto. Algunas de ellas son:
<strong>: para destacar el texto, mostrando el texto en negrita:<p>Este es un texto <strong>importante</strong>.</p><em>: para enfatizar el texto, mostrándolo en cursiva:<p>Este es un texto <em>enfatizado</em>.</p><u>: para subrayar el texto:<p>Este es un texto <u>subrayado</u>.</p><s>: para tachar el texto, indicando que ha sido eliminado o es irrelevante:<p>Este es un texto <s>tachado</s>.</p><mark>: para resaltar el texto con un color de fondo específico:<p>Este es un texto <mark>resaltado</mark>.</p><sup> y <sub>: para mostrar el texto como superíndice (encima de la línea base) o subíndice (debajo de la línea base), respectivamente:<p>Este es un texto en formato de fórmula: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>Mencionamos solo algunas de las etiquetas disponibles para marcar o formatear el texto, y es posible combinar varias etiquetas para obtener el efecto deseado. Es importante recordar usar las etiquetas de manera semántica, es decir, elegir las etiquetas adecuadas según el significado del texto.
En HTML, los enlaces se crean utilizando la etiqueta <a>, que significa "ancla". Los enlaces permiten crear un hipervínculo y conectar una página con otra o con un recurso externo, como un documento, una imagen, un video, etc. Un ejemplo de código utilizando esta etiqueta es:
<a href="https://www.ejemplo.com">Texto del enlace</a>Teniendo los siguientes atributos:
href: especifica el destino del enlace. Puede ser una URL completa para un sitio externo o una ruta relativa para un archivo o página dentro de su propio sitio;Texto del enlace: es el texto visible del enlace que está entre las etiquetas <a>.También puedes agregar otros atributos a la etiqueta <a>, como target para abrir el enlace en una nueva ventana o pestaña, o title para proporcionar un consejo de herramienta cuando el usuario pasa el cursor sobre el enlace:
<a href="https://www.ejemplo.com" target="_blank" title="Abrir en una nueva ventana">Abrir sitio</a>El atributo target="_blank" hace que el enlace se abra en una nueva ventana o pestaña del navegador. Además, puedes usar enlaces ancla para crear enlaces internos en una página. Un enlace ancla apunta a un lugar específico en una página, generalmente identificado por un ID. Por ejemplo:
<a href="#seccion1">Ir a la Sección 1</a>
...
<h2 id="seccion1">Sección 1</h2>En el ejemplo anterior, el enlace "Ir a la Sección 1" llevará al usuario a la sección con el ID "seccion1" en la misma página. Recuerda que, para que esto funcione, el valor del id debe coincidir con lo que está en href.
Puedes usar entidades de caracteres para mostrar caracteres especiales y símbolos que no están disponibles directamente en el teclado o que pueden causar conflictos con la sintaxis del código HTML. Las entidades de caracteres comienzan con & y terminan con ;.
Aquí tienes algunos ejemplos de entidades de caracteres comunes:
<: muestra el símbolo < (menor que);>: muestra el símbolo > (mayor que);&: muestra el símbolo & (ampersand);": muestra el símbolo ” (comillas dobles);': muestra el símbolo ’ (comillas simples); : muestra un espacio no rompible;©: muestra el símbolo de derechos de autor ©;®: muestra el símbolo de marca registrada ®;™: muestra el símbolo de marca comercial ™.Un ejemplo de uso es el siguiente, donde aplicamos una entidad de caracteres dentro de la etiqueta de texto:
<p>< > & " ' © ® ™</p>El resultado de este código es: < > & " ' © ® ™.
Además de estas entidades de caracteres, también puedes usar códigos numéricos para caracteres especiales. Los códigos numéricos comienzan con &# y terminan con ;. Por ejemplo:
©: muestra el símbolo de derechos de autor ©;®: muestra el símbolo de marca registrada ®;™: muestra el símbolo de marca comercial ™.Para usarlos, también puedes aplicar estos valores dentro de una etiqueta de párrafo:
<p>© ® ™</p>Y esperar el resultado: © ® ™. Estas entidades de caracteres son útiles cuando necesitas mostrar símbolos especiales o caracteres que no se insertan fácilmente directamente en el código HTML.
A veces escribimos código y queremos documentarlo, crear recordatorios o incluso desactivar temporalmente partes del código sin eliminarlas por completo. Para ello, podemos escribir comentarios que no se mostrarán en el navegador.
Para agregar un comentario, puedes usar la siguiente sintaxis:
<!-- Este es un comentario en HTML -->El texto dentro de <!-- y --> se considera un comentario y no será renderizado por el navegador. Puedes insertar cualquier texto o código
dentro de los comentarios.
Los desarrolladores front-end utilizan varias tecnologías en el desarrollo de un sitio web, pero ya sea usando frameworks y bibliotecas, la base es siempre la misma: HTML, CSS y JavaScript.
El HTML, como vimos en este artículo, es un lenguaje de marcado utilizado para estructurar y organizar el contenido de la página. Pero solo con HTML no es posible estilizar los elementos o construir interacciones complejas. Es como la estructura de un edificio, proporcionando paredes, puertas y ventanas. Pero, ¿cuál es la diferencia entre el lenguaje HTML y el lenguaje CSS?
A diferencia de HTML, CSS (Cascading Style Sheets, en español, hojas de estilo en cascada) es un lenguaje de estilo que define la apariencia y el diseño de los elementos HTML en una página web. Con él, podemos agregar colores, fuentes, márgenes, tamaños, posicionamientos y otros atributos a los elementos. Es como la pintura, la decoración y el diseño interior de un edificio, haciéndolo estéticamente atractivo y agradable.
¡Porque ambos se complementan! De esta manera, podrás construir la estructura de un sitio web y también estilizarlo, creando experiencias encantadoras para los usuarios de tu sitio.
Finalmente, para complementar, tenemos JavaScript, que es un lenguaje de programación. Es responsable de agregar interactividad y comportamiento dinámico a una página web, permitiendo agregar funciones como manipulación de eventos, validación de formularios, cambios de contenido en tiempo real e interacciones con servidores. Es como el sistema eléctrico, las tuberías y los mecanismos que hacen que el edificio sea funcional e interactivo.
Aunque HTML se utiliza generalmente en el área de desarrollo web, también es posible utilizarlo en otras áreas de la programación, como:
Es importante tener en cuenta que HTML se combina frecuentemente con otras tecnologías, como CSS y JavaScript, para crear estas experiencias.
En este artículo conociste HTML, su historia, cómo funciona, qué editor de código puedes usar para construir un proyecto con esta tecnología y cómo usarlo a través de sus etiquetas y elementos. Además, conociste dónde se puede aplicar HTML y la relación entre HTML, CSS y JavaScript.
De esta manera, aprendiste que HTML es un lenguaje de marcado, no de programación, que se utiliza para crear elementos y estructurar páginas web, y que es una tecnología utilizada por desarrolladores front-end, generalmente en conjunto con CSS y JavaScript. Para profundizar más en HTML te recomendamos la Formación : HTML y CSS .
Y si estás interesado en profundizar en front-end, te recomendamos las formaciones Accesibilidad Web y JavaScript para Front-end. De esta manera, podrás crear aplicaciones web completas, desde la construcción de los elementos, la estilización y la interacción dinámica, creando experiencias encantadoras.
Este artículo fue traducido y adaptado por Bruno Souza
Licenciada en Tecnologías Digitales, especialista en Experiencia de Usuario y estudiante de posgrado en Enseñanza y Rendimiento en Educación a Distancia con experiencia en soporte técnico de TI y tecnologías front-end. Durante la licenciatura, fue vicepresidenta del consejo académico y asistente de LIBRAS(Lengua Brasileña de Señas). Actualmente es instructora en Alura. En su tiempo libre le gusta ver animes y producciones de Marvel, escuchar kpop y post-hardcore, jugar Valorant y Genshin Impact y practicar cocina.
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Puedes realizar el pago de tus planes en moneda local en los siguientes países:
| País | | | | | | | |
|---|---|---|---|---|---|---|---|
| Plan Semestral |
487.37
BOB |
68314.51
CLP |
305385.67
COP |
65.90
USD |
265.11
PEN |
1424.44
MXN |
2977.87
UYU |
| Plan Anual |
738.82
BOB |
103560.24
CLP |
462944.29
COP |
99.90
USD |
401.89
PEN |
2159.35
MXN |
4514.26
UYU |
Acceso a todos
los cursos
Estudia las 24 horas,
dónde y cuándo quieras
Nuevos cursos
cada semana