¿Qué es HTML?
HTML (HyperText Markup Language) es el esqueleto de toda página web. Define la estructura: títulos, párrafos, imágenes, enlaces...
Piensa en HTML como los ladrillos de una casa - sin ellos, no hay estructura.
1. Estructura Básica Esencial
<!DOCTYPE html>: Declaración obligatoria al inicio del archivo. Le dice al
navegador que estás usando la versión moderna de HTML (HTML5).
<html>: La etiqueta raíz que envuelve absolutamente todo el documento. El
atributo
lang="es" le indica el idioma de la página a los buscadores.
<head>: La sección del "cerebro" de la página. Contiene información técnica para
el navegador y los buscadores (metadatos, enlaces a hojas de estilo CSS), pero nada de esto se ve
directamente en la pantalla.
<body>: El "cuerpo" de la página. Aquí se coloca todo lo que el usuario final va
a ver, como textos, imágenes, videos, formularios y menús.
2. Configuración Técnica y Pantallas
<meta charset="UTF-8">: Define la codificación de caracteres. Es lo que permite
que tu página muestre correctamente las eñes, los acentos y los emojis sin que aparezcan símbolos raros.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Es la
magia del diseño responsivo. Controla las dimensiones de la pantalla para que la página web se adapte de
forma automática al tamaño de celulares, tablets y computadoras.
3. Metadatos de SEO e Iconos
<meta name="description" ...>: Es el texto resumen que aparece debajo del título
de tu página cuando alguien la busca en Google. Es crucial para atraer clics.
<meta name="keywords" ...>: Una lista de palabras clave relacionadas con tu
página para ayudar a clasificar tu temática.
<link rel="icon" ...>: Define el Favicon. Es la etiqueta
encargada de colocar el logo en la pestaña del navegador.
4. El Misterio de index.html y su Comportamiento por Defecto
¿Qué es index.html?: Es el nombre estándar que se le asigna al archivo de la página de
inicio o página principal de cualquier sitio web.
¿Por qué se muestra por defecto?: Cuando digitas una dirección web (por ejemplo,
www.tusitio.com) sin especificar un archivo al final, el servidor web no sabe qué mostrar.
Por configuración de fábrica y convención histórica, los servidores buscan
automáticamente un archivo llamado exactamente index.html para usarlo como la puerta de
entrada.
¿Cómo se puede cambiar este comportamiento?: Si deseas que la página de inicio tenga
otro nombre (por ejemplo,
inicio.html o home.html), debes configurar las
reglas del servidor donde se aloja tu web.
• En servidores Apache (Archivo .htaccess): Creando o editando un archivo oculto
llamado
.htaccess en la carpeta raíz y añadiendo la línea: DirectoryIndex inicio.html home.html index.html
• En servidores Nginx (Archivo de configuración): Modificando la directiva de
índice dentro del bloque de tu sitio en el archivo de configuración:
index inicio.html home.html index.html;
• En plataformas Modernas (Vercel, Netlify o Firebase): Configurando las rutas o
redirecciones directamente en sus archivos de configuración específicos del proyecto.
5. Editor HTML5 Interactivo en Vivo
✏️ ¡Edita el código de la izquierda y observa cómo cambia la vista previa de la derecha en tiempo real!
✓ Listo para editar
👁️ Vista Previa en el Navegador
📌 Recordatorio sobre el Favicon:
Para ver el icono en la pestaña, asegúrate de guardar una imagen llamada favicon.png en la
misma carpeta donde guardes tu archivo index.html.