Qué es HTML y cómo estructura una página
Autor: Redacción Domeny.ForSale Publicado
En breve: HTML es un lenguaje de marcado que describe la estructura y el significado del contenido de una página web. Indica al navegador qué partes son encabezados, párrafos, enlaces, imágenes o formularios. No es un lenguaje de programación: para definir el aspecto de la página se utiliza principalmente CSS, y para añadir comportamientos e interacciones se suele recurrir a JavaScript.
¿Para qué sirve HTML en una página web?
La sigla HTML procede del inglés HyperText Markup Language, es decir, lenguaje de marcado de hipertexto. «Hipertexto» significa texto conectado mediante enlaces con otros documentos o fragmentos de contenido. Las «etiquetas» son marcas escritas en el código que asignan una función concreta a cada parte del documento.
Cuando abres una página, el navegador lee el HTML y construye a partir de él la estructura del documento. Después muestra el contenido en pantalla, teniendo también en cuenta los estilos y el funcionamiento de los scripts, si se han incluido. Normalmente, el usuario ve el resultado de este proceso, no el código en sí.
Por ejemplo, la página de una cafetería puede incluir el nombre del local como encabezado principal, una descripción como párrafo, la carta como lista y un enlace para reservar. HTML define qué son esos elementos, pero no tiene por qué determinar su color ni cuánto espacio ocupan en pantalla.
Etiquetas, elementos y atributos: ¿cómo leer HTML?
Una etiqueta es una marca escrita entre signos de menor y mayor que, como <p>. Muchos elementos tienen una etiqueta de apertura y otra de cierre: en <p>Horario de apertura</p>, las etiquetas rodean el contenido del párrafo. El conjunto de etiquetas y contenido constituye un elemento HTML.
No todos los elementos rodean texto. El elemento img, que sirve para insertar una imagen, no tiene etiqueta de cierre. La información necesaria, como la dirección del archivo, se proporciona mediante sus atributos.
Un atributo es información adicional que se incluye en la etiqueta de apertura. El atributo href define el destino de un enlace, src indica la fuente de una imagen y lang permite declarar el idioma del documento o de una parte de él. El atributo alt de una imagen proporciona un texto alternativo; su contenido depende de la función de la imagen y, cuando esta es puramente decorativa, suele dejarse vacío.
Para empezar, conviene conocer algunos elementos:
h1–h6: encabezados de distintos niveles;p: párrafo de texto;a: enlace, cuando tiene el atributohref;ulyli: lista no ordenada y sus elementos;img: imagen;button: botón.
Los elementos pueden incluirse dentro de otros, pero hay reglas que deben respetarse. Una lista contiene elementos de lista, y un enlace puede formar parte de un párrafo. Los navegadores intentan corregir el código incorrecto, por lo que el hecho de que una página se muestre bien no demuestra que su HTML sea válido.
¿En qué se diferencia HTML de CSS y JavaScript?
Estas tres tecnologías suelen trabajar juntas, pero cumplen funciones distintas. CSS, u hojas de estilo en cascada, describe la presentación del documento. JavaScript es un lenguaje de programación que permite, entre otras cosas, responder a las acciones del usuario y modificar el contenido de la página.
| Tecnología | Función principal | Ejemplo en un formulario |
|---|---|---|
| HTML | Estructura y significado | Campo de correo electrónico, etiqueta y botón |
| CSS | Aspecto y disposición | Colores, espaciado y anchura de los campos |
| JavaScript | Lógica y comportamiento | Actualización de un mensaje sin recargar la página |
HTML no sirve para escribir algoritmos, bucles ni cálculos propios, por lo que no se considera un lenguaje de programación. Sin embargo, eso no significa que una página sin JavaScript no pueda ser interactiva. Los enlaces funcionan por sí solos, y el navegador puede gestionar el envío de un formulario o la comprobación básica de un campo obligatorio gracias a las funciones de HTML.
Una página de presentación sencilla puede crearse solo con HTML. CSS permite perfeccionar su aspecto, y JavaScript solo será necesario cuando el comportamiento previsto vaya más allá de las posibilidades del propio documento y del navegador.
¿Por qué importa más el significado de los elementos que su aspecto?
El HTML semántico consiste en elegir los elementos según su significado. Un encabezado debe ser un encabezado en el código, no solo un texto agrandado mediante estilos. Del mismo modo, para ir a otra página se utiliza un enlace, mientras que para ejecutar una acción suele utilizarse un botón.
Esta distinción ayuda a las tecnologías de asistencia, como los lectores de pantalla, a presentar correctamente el contenido. Una persona que utilice una de estas herramientas puede, por ejemplo, desplazarse entre encabezados. Si el autor se limita a aumentar el tamaño de párrafos normales, esa navegación no reflejará la organización visible de la página.
Un botón creado con el elemento adecuado también incorpora compatibilidad con el teclado. Reproducir esa misma función en un fragmento de texto cualquiera requiere trabajo adicional. Un HTML correcto es una base para la accesibilidad, aunque por sí solo no garantiza que todo el sitio sea accesible.
¿Cómo empezar a aprender HTML en la práctica?
Para las primeras pruebas bastan un editor de texto y un navegador. Un documento HTML suele contener una declaración del tipo de documento, el elemento principal html, una sección head con metadatos y una sección body con el contenido de la página. Los metadatos describen el documento: incluyen, entre otras cosas, la codificación de caracteres y el título que aparece en la pestaña del navegador.
El ejercicio más sencillo consiste en crear una página local con una breve presentación:
- Crea un archivo de texto en el editor y guárdalo como
index.html, asegurándote de que no se le añada la extensión.txt. - Construye la estructura básica del documento y añade un encabezado, un párrafo y una lista de servicios en la sección
body. - Abre el archivo en el navegador. Después de cada cambio, guárdalo y recarga la página.
- Utiliza la opción «Inspeccionar» o «Inspeccionar elemento» para ver cómo interpreta el navegador la estructura.
No necesitas publicar el archivo local ni comprar un dominio para él. Empieza por organizar el contenido sin colores ni adornos: así te resultará más fácil comprobar si entiendes la función de los elementos antes de pasar a los estilos.
Consulta también: ¿Qué es 2FA?
Lee también
