Introducción a HTML
¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje de marcado que usamos para crear páginas web.
No es un lenguaje de programación, sino un lenguaje que estructura el contenido de un sitio: textos, imágenes, enlaces, listas y más.
Con HTML definimos qué es cada elemento de la página, pero no cómo se ve (eso lo hace CSS).
Estructura básica de un documento HTML
Todo documento HTML tiene una estructura mínima obligatoria:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Este es mi primer sitio web con HTML.</p>
</body>
</html>
<!DOCTYPE html>→ Indica que usamos HTML5.<html>→ Elemento raíz que envuelve toda la página.<head>→ Contiene información del sitio (título, meta, enlaces a CSS).<title>→ Título de la página que aparece en la pestaña del navegador.<body>→ Contenido visible de la página (textos, imágenes, enlaces, etc.).<h1>→ Título principal.<p>→ Párrafo de texto.
Etiquetas esenciales de HTML
A continuación se detallan las etiquetas HTML mas utilizadas.
| Etiqueta | Descripción |
<h1>–<h6> | Títulos de diferentes niveles |
<p> | Párrafo de texto |
<a> | Enlace a otra página o recurso |
<img> | Imagen |
<ul> / <ol> | Listas desordenadas / ordenadas |
<li> | Elemento de lista |
<div> | Contenedor genérico en bloque |
<span> | Contenedor en línea para aplicar estilos |
Donde y como probar archivos .html
Es recomendable la instalación de un editor de código (IDE) personalmente recomiendo utilizar Visual Studio Code.
Una vez instalado puede crear un directorio en su sistema operativo y dentro un archivo llamado index.html con el contenido anteriormente brindado.
Puede abrir este archivo con un navegador como Chrome, Firefox, etc. O puede instalar una extensión en Visual Studio Code llamada Live Server, esta extensión permitirá visualizar los cambios que vamos agregando a nuestro archivo .html en el navegador.
Consejos y reglas importantes
Siempre cerrar las etiquetas. La imagen de la izquierda es incorrecta porque no se esta cerrando la etiqueta <p></p>, sin embargo la de la derecha es correcta porque se abre y se cierra.
Usar siempre identacion en el código . El HTML que aparece en la imagen izquierda no tiene una identación clara, es decir no se sabe cuando cierran los tags y es dificil de leer.
En camibio el código HTML que aparece en la imagen derecha es mas legible y tiene una buena identación.
Utilizar etiquetas semanticas, es muy importante su uso para temas de accesibilidad, posicionamiento en motores de búsqueda y organización de la estructura del HTML para que sea legible. No abusar del uso de tags como <div> usar en cambio etiquetas semanticas.
