HTML es la base de prácticamente todas las páginas web. Antes de aprender CSS o JavaScript, conviene entender cómo se estructura un documento web y qué función cumple cada parte.
Importante: HTML no es un lenguaje de programación. Es un lenguaje de marcado. Su función principal es describir la estructura y el significado del contenido de una página web.
¿Qué significa HTML?
HTML significa HyperText Markup Language, es decir, Lenguaje de Marcado de Hipertexto.
Podemos separar el nombre en dos ideas:
- HyperText: contenido conectado mediante enlaces.
- Markup Language: lenguaje que utiliza marcas o etiquetas para describir la estructura de un documento.
¿Por qué HTML no es un lenguaje de programación?
Un lenguaje de programación permite expresar lógica, realizar cálculos, tomar decisiones y ejecutar algoritmos.
Por ejemplo, en Python podemos escribir:
edad = 20
if edad >= 18:
print("Mayor de edad")
En ese código existe una condición y el programa decide qué hacer.
HTML no funciona así. Un documento HTML describe contenido:
<h1>Club Programador</h1> <p>Aprendiendo desarrollo web</p>
HTML no ejecuta un algoritmo ni toma decisiones. Le indica al navegador qué contenido existe y qué significado tiene.
Entonces, ¿para qué sirve HTML?
HTML sirve para definir la estructura de una página web.
Con HTML podemos indicar que un contenido es:
- un título;
- un párrafo;
- un enlace;
- una imagen;
- una lista;
- una tabla;
- un formulario;
- una sección;
- un encabezado;
- un pie de página.
HTML, CSS y JavaScript
Una forma sencilla de entender el desarrollo web es pensar en tres capas:
HTML -> estructura CSS -> presentacion JavaScript -> comportamiento
O, visto desde una página web:
Pagina web | |-- HTML: que contenido existe |-- CSS: como se ve |-- JavaScript: como se comporta
HTML define la estructura. CSS se encarga del aspecto visual. JavaScript aporta lógica e interacción.
Más adelante, cuando lleguemos a JavaScript, esta diferencia será fundamental.
¿Qué hace el navegador con HTML?
Cuando abrimos una página, el navegador recibe un documento HTML, lo interpreta y construye una representación interna del contenido.
A partir de esa estructura, el navegador puede mostrar títulos, textos, imágenes, botones, formularios y otros elementos.
Luego CSS puede modificar su presentación y JavaScript puede interactuar con esos elementos.
¿Qué es una etiqueta HTML?
HTML utiliza etiquetas para marcar el contenido.
<p>Este es un parrafo</p>
En este ejemplo:
<p>es la etiqueta de apertura;Este es un parrafoes el contenido;</p>es la etiqueta de cierre.
El conjunto completo se denomina normalmente elemento HTML.
Etiquetas de apertura y cierre
Muchas etiquetas tienen apertura y cierre:
<h1>Titulo principal</h1> <p>Un parrafo</p> <a href="https://clubprogramador.com/">Club Programador</a>
Sin embargo, existen elementos que no contienen texto interno de la misma manera, como una imagen:
<img src="imagen.jpg" alt="Descripcion de la imagen">
¿Qué son los atributos?
Los atributos agregan información adicional a un elemento.
<a href="https://clubprogramador.com/">Visitar Club Programador</a>
En este caso:
aindica que el elemento es un enlace;hrefes un atributo;- su valor indica a dónde debe dirigirse el enlace.
Elementos anidados
Los elementos HTML pueden contener otros elementos.
<div> <h2>Programacion</h2> <p>Contenido de la seccion</p> </div>
En este ejemplo, el título y el párrafo están contenidos dentro de un div.
Estructura básica de un documento HTML
Un documento HTML moderno suele comenzar con una estructura como esta:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi primera pagina</title> </head> <body> <h1>Hola mundo</h1> <p>Mi primera pagina web</p> </body> </html>
<!DOCTYPE html>
La primera línea:
<!DOCTYPE html>
indica al navegador que estamos utilizando HTML moderno.
No es una etiqueta de contenido. Es una declaración que ayuda al navegador a interpretar correctamente el documento.
La etiqueta <html>
<html lang="es">
Es el elemento raíz del documento.
El atributo lang="es" informa que el idioma principal del contenido es español.
La sección <head>
<head> contiene información sobre el documento que normalmente no aparece como contenido principal de la página.
Por ejemplo:
- codificación de caracteres;
- título de la pestaña;
- metadatos;
- referencias a archivos CSS;
- otros recursos utilizados por el navegador.
Codificación UTF-8
<meta charset="UTF-8">
Esta línea permite representar correctamente caracteres como:
á é í ó ú ñ ¿ ¡
Viewport y dispositivos móviles
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta configuración ayuda a que la página se adapte correctamente al ancho de dispositivos móviles.
La etiqueta <title>
<title>Club Programador</title>
Define el título que normalmente vemos en la pestaña del navegador.
La sección <body>
Dentro de <body> colocamos el contenido visible de la página.
<body> <h1>Curso de HTML</h1> <p>Aprendiendo desarrollo web.</p> </body>
Títulos
HTML dispone de seis niveles de encabezado:
<h1>Titulo principal</h1> <h2>Titulo de seccion</h2> <h3>Subseccion</h3> <h4>Nivel 4</h4> <h5>Nivel 5</h5> <h6>Nivel 6</h6>
h1 representa el encabezado principal y los demás niveles permiten organizar jerárquicamente el contenido.
Párrafos
<p>Este es un parrafo.</p>
La etiqueta p representa un párrafo de texto.
Enlaces
<a href="https://clubprogramador.com/">Club Programador</a>
La etiqueta a permite crear enlaces.
Imágenes
<img src="python.jpg" alt="Logo de Python">
El atributo src indica la ubicación de la imagen.
El atributo alt describe su contenido y es importante para accesibilidad y para situaciones en las que la imagen no puede cargarse.
Listas
Lista desordenada
<ul> <li>Python</li> <li>HTML</li> <li>JavaScript</li> </ul>
Lista ordenada
<ol> <li>Aprender HTML</li> <li>Aprender CSS</li> <li>Aprender JavaScript</li> </ol>
Comentarios en HTML
Podemos dejar anotaciones que no se muestran en la página:
<!-- Este comentario no aparece en el navegador -->
id y class
Dos atributos muy importantes son id y class.
<h1 id="titulo-principal">Club Programador</h1> <p class="destacado">Primer parrafo</p> <p class="destacado">Segundo parrafo</p>
Como idea inicial:
ididentifica un elemento concreto;classpermite agrupar varios elementos.
Van a resultar especialmente importantes cuando trabajemos con CSS y JavaScript.
HTML semántico
HTML moderno incluye etiquetas cuyo nombre describe la función del contenido.
<header> <h1>Club Programador</h1> </header> <main> <article> <h2>Introduccion a HTML</h2> <p>Contenido del articulo</p> </article> </main> <footer> <p>Club Programador</p> </footer>
Algunos elementos semánticos frecuentes son:
header;nav;main;section;article;aside;footer.
¿Por qué es importante la semántica?
No se trata solamente de que la página se vea bien.
Una estructura semántica ayuda a:
- organizar mejor el documento;
- hacer el código más comprensible;
- mejorar la accesibilidad;
- facilitar la interpretación por navegadores y herramientas;
- dar una estructura más clara a los motores de búsqueda.
Cómo crear nuestra primera página HTML
No necesitamos instalar un entorno complejo.
Podemos crear un archivo llamado:
index.html
y escribir:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi primera pagina</title> </head> <body> <h1>Hola, mundo</h1> <p>Estoy aprendiendo HTML en Club Programador.</p> <a href="https://clubprogramador.com/"> Visitar Club Programador </a> </body> </html>
Guardamos el archivo y lo abrimos con un navegador.
El navegador interpreta el HTML y muestra el documento.
HTML no define cómo se ve todo
Un error habitual al comenzar es intentar utilizar HTML para resolver toda la presentación visual.
La responsabilidad principal de HTML es la estructura y el significado.
Más adelante utilizaremos CSS para definir colores, tamaños, espacios, columnas, posiciones y diseño adaptable.
HTML tampoco define la lógica de la página
HTML puede crear un botón:
<button>Guardar</button>
Pero HTML por sí solo no contiene la lógica necesaria para decidir qué debe ocurrir al presionarlo.
Cuando avancemos hacia JavaScript veremos cómo detectar ese clic y ejecutar código.
Errores comunes al comenzar con HTML
- pensar que HTML es un lenguaje de programación;
- olvidar cerrar etiquetas que requieren cierre;
- anidar incorrectamente los elementos;
- olvidar las comillas en los atributos;
- confundir
idconclass; - usar etiquetas únicamente por su apariencia y no por su significado;
- olvidar el atributo
alten imágenes; - poner toda la página dentro de elementos genéricos sin pensar en la semántica.
Qué aprendimos
En esta primera introducción vimos que:
- HTML significa HyperText Markup Language;
- HTML no es un lenguaje de programación;
- es un lenguaje de marcado;
- su función es estructurar y describir contenido;
- utiliza etiquetas, elementos y atributos;
- un documento se divide principalmente en
headybody; - HTML trabaja junto con CSS y JavaScript;
- la semántica es una parte importante de una página moderna.
Próximo paso
En la siguiente guía profundizamos en las etiquetas HTML esenciales para trabajar con textos, enlaces, imágenes, listas y tablas:
Etiquetas HTML esenciales: textos, enlaces, imágenes, listas y tablas →
¿Te sirvió esta guía? ☕
Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.
🇦🇷 Apoyar desde Argentina
☕ Invitame un café con Mercado Pago
🌎 Apoyar desde otro país
Descubre más desde Club Programador
Suscríbete y recibe las últimas entradas en tu correo electrónico.
Un comentario en “Introducción a HTML: qué es, cómo funciona y estructura básica de una página web”