Fundamentos Frontend

Introducción a HTML5: Tus Primeros Pasos en el Desarrollo Web

Descubre el lenguaje que estructura todo internet

En esta lección aprenderás la sintaxis básica y el uso correcto de etiquetas

Ilustración que resume los pilares del HTML5 moderno

¿Qué es una Etiqueta HTML?

HTML se escribe usando **etiquetas**. Una etiqueta es una instrucción para el navegador que le indica **qué tipo de contenido es** y **cómo debe interpretarlo**. Antes de hablar de diseño o estilos, HTML solo se encarga de **estructurar información**. Pensalo como una caja: la etiqueta define la caja y el contenido va dentro.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Forma más simple de una etiqueta HTML -->

<p>Hola mundo</p>

<!-- Desglosemos esta línea paso a paso -->

<!-- <p>  : etiqueta de APERTURA -->
<!-- p    : nombre de la etiqueta (p = párrafo) -->

<!-- Hola mundo : contenido visible para el usuario -->

<!-- </p> : etiqueta de CIERRE -->

<!-- Todo lo que está entre <p> y </p> pertenece a ese párrafo -->

<!-- Forma más simple de una etiqueta HTML -->

<p>Hola mundo</p>

<!-- Desglosemos esta línea paso a paso -->

<!-- <p>  : etiqueta de APERTURA -->
<!-- p    : nombre de la etiqueta (p = párrafo) -->

<!-- Hola mundo : contenido visible para el usuario -->

<!-- </p> : etiqueta de CIERRE -->

<!-- Todo lo que está entre <p> y </p> pertenece a ese párrafo -->

Comentarios en HTML: Explicar sin Afectar el Código

Los **comentarios en HTML** son textos que el navegador **ignora por completo**. No se muestran en pantalla ni afectan el funcionamiento del sitio. Su único propósito es **ayudar a las personas** que leen el código: explicar qué hace algo, dejar notas o guiar a otros desarrolladores (o a tu yo del futuro).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Esto es un comentario en HTML -->

<!-- Los comentarios NO se muestran en la página -->
<p>Este texto sí lo ve el usuario</p>

<!-- Podés usar comentarios para explicar partes del código -->

<!-- Este párrafo muestra un mensaje de bienvenida -->
<p>Bienvenido a mi sitio web</p>

<!-- También sirven para desactivar código temporalmente -->

<!-- <p>Este texto está comentado y no se verá</p> -->

<!-- Esto es un comentario en HTML -->

<!-- Los comentarios NO se muestran en la página -->
<p>Este texto sí lo ve el usuario</p>

<!-- Podés usar comentarios para explicar partes del código -->

<!-- Este párrafo muestra un mensaje de bienvenida -->
<p>Bienvenido a mi sitio web</p>

<!-- También sirven para desactivar código temporalmente -->

<!-- <p>Este texto está comentado y no se verá</p> -->

Sintaxis de Etiquetas: Abiertas vs. Cerradas

En HTML, la mayoría de los elementos funcionan como contenedores que necesitan una etiqueta de apertura y otra de cierre para envolver el contenido (etiquetas cerradas). Sin embargo, existen elementos especiales llamados 'etiquetas abiertas' o autocontenidas (como imágenes o líneas divisorias) que no encierran contenido y se definen en una sola etiqueta.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- La diferencia visual clave está en el signo `/`: en las cerradas va al inicio del cierre (`</p>`) -->

<p>Este es un párrafo con texto en su interior.</p>

<!-- mientras que en las abiertas tradicionales se coloca al final (`<hr/>`) -->

<hr/>

<!-- La diferencia visual clave está en el signo `/`: en las cerradas va al inicio del cierre (`</p>`) -->

<p>Este es un párrafo con texto en su interior.</p>

<!-- mientras que en las abiertas tradicionales se coloca al final (`<hr/>`) -->

<hr/>

Anatomía de los Elementos: Contenido vs. Atributos

La diferencia fundamental no es solo visual, sino funcional. Las etiquetas con cierre existen para delimitar **contenido** (texto u otros elementos anidados). En cambio, las etiquetas vacías (o 'void elements') no guardan nada en su interior; su función y datos se definen exclusivamente a través de **atributos** dentro de la propia etiqueta (como el `src` de una imagen o el `type` de un input).

Diagrama de sintaxis HTML comparando la estructura de etiquetas contenedoras frente a etiquetas vacías o autocontenidas — Diferencia estructural en HTML5: los elementos contenedores requieren cierre explícito, mientras que los elementos vacíos son instrucciones únicas.

Atributos de las Etiquetas HTML

Todas las etiquetas aceptan atributos, los cuales definen características específicas que diferencian a un elemento de otro. Estos atributos siempre se declaran dentro de la etiqueta de apertura y consisten en un nombre y un valor encerrado entre comillas.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Ejemplo general de una etiqueta HTML con atributos -->

<!-- href: atributo que indica la URL a la que apunta el enlace -->

<!-- target: atributo que define dónde se abre el enlace -->

<!-- _blank significa que se abre en una nueva pestaña -->

<a
    href="https://www.google.com"
    target="_blank"
>
<!-- Contenido visible del enlace: es el texto clickeable -->
    Visitar Google
</a>

<!-- Ejemplo general de una etiqueta HTML con atributos -->

<!-- href: atributo que indica la URL a la que apunta el enlace -->

<!-- target: atributo que define dónde se abre el enlace -->

<!-- _blank significa que se abre en una nueva pestaña -->

<a
    href="https://www.google.com"
    target="_blank"
>
<!-- Contenido visible del enlace: es el texto clickeable -->
    Visitar Google
</a>

Anidamiento Estricto (LIFO)

El HTML debe estar perfectamente anidado. La regla LIFO (Last In, First Out) dicta que la última etiqueta en abrirse debe ser la primera en cerrarse. Un mal anidamiento puede romper el layout visual o confundir al parser del navegador.

Visualización de anidamiento correcto vs incorrecto — Representación gráfica de la regla de anidamiento para evitar errores de renderizado.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!--❌ ERROR (Las etiquetas se cruzan):-->

<p>
    <strong>Texto importante</p>
</strong>

<!--✅ CORRECTO (Una caja dentro de otra):-->

<p>
    <strong>Texto importante</strong> 

</p>

<!--❌ ERROR (Las etiquetas se cruzan):-->

<p>
    <strong>Texto importante</p>
</strong>

<!--✅ CORRECTO (Una caja dentro de otra):-->

<p>
    <strong>Texto importante</strong> 

</p>

Convenciones de Archivos y el Rol de index.html

Para evitar errores en servidores, los archivos deben nombrarse siempre en minúsculas, sin espacios (usar guiones medios) y sin caracteres especiales como tildes o eñes. El archivo principal debe llamarse obligatoriamente 'index.html', ya que es el documento predeterminado que el navegador carga automáticamente al ingresar al dominio. Al guardar, asegúrate de que la extensión sea '.html' y no se generen dobles extensiones como '.html.txt'.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

public/
├── css/
│   └── styles.css
├── images/
│   └── logo.png
├── pages/
│   ├── about.html
│   └── contact.html
└── index.html

✅ quienes-somos.html
(Correcto: minúsculas y guiones)

❌ Quienes Somos.html
(Incorrecto: espacios y mayúsculas)

❌ camión.html
(Incorrecto: acentos/caracteres especiales)

public/
├── css/
│   └── styles.css
├── images/
│   └── logo.png
├── pages/
│   ├── about.html
│   └── contact.html
└── index.html

✅ quienes-somos.html
(Correcto: minúsculas y guiones)

❌ Quienes Somos.html
(Incorrecto: espacios y mayúsculas)

❌ camión.html
(Incorrecto: acentos/caracteres especiales)

index.html  --> ✅ Le dice al navegador: "Esto es estructura"

styles.css  --> ✅ Le dice al navegador: "Esto es diseño/maquillaje"

index.html.txt  --> ❌ ERROR COMÚN: Windows ocultó la extensión real.
 (El navegador lo mostrará como texto plano)

index.html  --> ✅ Le dice al navegador: "Esto es estructura"

styles.css  --> ✅ Le dice al navegador: "Esto es diseño/maquillaje"

index.html.txt  --> ❌ ERROR COMÚN: Windows ocultó la extensión real.
 (El navegador lo mostrará como texto plano)

Configuración de extensiones de archivo en el sistema operativo — Esquema de asociación de archivos: cómo el sistema operativo y el navegador distinguen tipos de archivo por su extensión.

Index.html: La Convención Universal

Los servidores web están configurados por defecto para buscar un archivo llamado `index.html` cuando se solicita un directorio. Es la 'Home Page' automática. Sin él, el usuario vería un error 404 o un listado de archivos expuestos.

ESTRUCTURA TÍPICA DE UN PROYECTO WEB
El servidor busca AUTOMÁTICAMENTE index.html

public/
├── css/
│   └── styles.css
├── images/
│   └── logo.png
├── pages/
│   ├── about.html
│   └── contact.html
└── index.html

Si el usuario entra a misitio.com el servidor sirve index.html por defecto

ESTRUCTURA TÍPICA DE UN PROYECTO WEB
El servidor busca AUTOMÁTICAMENTE index.html

public/
├── css/
│   └── styles.css
├── images/
│   └── logo.png
├── pages/
│   ├── about.html
│   └── contact.html
└── index.html

Si el usuario entra a misitio.com el servidor sirve index.html por defecto

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

DOCTYPE: Activando el Modo Estándar

La primera línea '<!DOCTYPE html>' no es una etiqueta HTML, es una instrucción para el navegador. Le dice: 'Usa el motor de renderizado moderno de HTML5'. Sin esto, los navegadores entran en 'Quirks Mode' (modo compatibilidad) y tu diseño se romperá.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!DOCTYPE html>

<html lang="es">

</html>

<!DOCTYPE html>

<html lang="es">

</html>

Arquitectura Jerárquica y Estructura del Documento HTML

El estándar HTML se fundamenta en una estructura de árbol estricta que comienza con un elemento raíz obligatorio. La etiqueta `<html>` actúa como el contenedor global, indicando al User Agent (navegador) que debe interpretar el flujo de datos bajo la especificación HTML; es imperativo cerrar esta etiqueta correctamente, de lo contrario, el contenido podría no cargarse o renderizarse de forma errónea. Dentro de este nodo raíz, el documento se bifurca en dos ámbitos funcionales mutuamente excluyentes `<head>`y `<body>`.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Elemento raíz obligatorio del documento HTML -->
<html>

  <!-- Sección HEAD: contiene metadatos y configuraciones, no contenido visible -->
  <head>

      <!-- Define la codificación de caracteres (permite usar tildes, ñ, símbolos, etc.) -->
      <meta charset="UTF-8">

      <!-- Título del documento que aparece en la pestaña del navegador -->
      <title>Título del Documento</title>

  </head>

  <!-- Sección BODY: todo lo que ve e interactúa el usuario -->
  <body>

      <!-- Encabezado principal del contenido (solo debería haber uno por página) -->
      <h1>Encabezado Principal</h1>

      <!-- Párrafo de texto: contenido visible y legible para el usuario -->
      <p>
          Contenido perceptible por el usuario.
      </p>

  </body>

<!-- Cierre del elemento raíz HTML -->
</html>

<!-- Elemento raíz obligatorio del documento HTML -->
<html>

  <!-- Sección HEAD: contiene metadatos y configuraciones, no contenido visible -->
  <head>

      <!-- Define la codificación de caracteres (permite usar tildes, ñ, símbolos, etc.) -->
      <meta charset="UTF-8">

      <!-- Título del documento que aparece en la pestaña del navegador -->
      <title>Título del Documento</title>

  </head>

  <!-- Sección BODY: todo lo que ve e interactúa el usuario -->
  <body>

      <!-- Encabezado principal del contenido (solo debería haber uno por página) -->
      <h1>Encabezado Principal</h1>

      <!-- Párrafo de texto: contenido visible y legible para el usuario -->
      <p>
          Contenido perceptible por el usuario.
      </p>

  </body>

<!-- Cierre del elemento raíz HTML -->
</html>

Arquitectura Jerárquica y Estructura del Documento HTML

El Ámbito de Metadatos (`<head>`) : Se define como la 'parte privada' del documento. No renderiza contenido visual en el viewport, sino que establece un canal de comunicación técnica entre el sitio y el navegador. Aquí se alojan configuraciones críticas como la codificación de caracteres, directivas SEO mediante etiquetas `<meta>`, y el título de la pestaña mediante `<title>`. 2. **El Ámbito de Contenido (`<body>`)**: Encapsula la estructura perceptible. Todo elemento que deba ser visualizado e interactuable por el usuario final debe anidarse estrictamente dentro de este bloque.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<html>
  <head>
      <meta charset="UTF-8">
      <title>Título del Documento</title>
  </head>
  <body>
      <h1>Encabezado Principal</h1>
      <p>
          Contenido perceptible por el usuario.
      </p>
  </body>
</html>

<html>
  <head>
      <meta charset="UTF-8">
      <title>Título del Documento</title>
  </head>
  <body>
      <h1>Encabezado Principal</h1>
      <p>
          Contenido perceptible por el usuario.
      </p>
  </body>
</html>

Arquitectura del Documento: Head vs Body

El DOM se bifurca en dos grandes ramas funcionales. El '<head>' actúa como el cerebro (inteligencia, metadatos, SEO, carga de recursos) y permanece invisible en el lienzo. El '<body>' es el cuerpo visible (interfaz de usuario) y representa estrictamente todo lo que se renderiza dentro del viewport del navegador.

Diagrama del DOM Tree separando Head y Body — División estructural del DOM: el 'Head' invisible para configuraciones y el 'Body' visible para la interfaz de usuario.

Encabezados: Estructura de Contenido

Los buscadores usan los encabezados ('h1' al 'h6') para entender tu contenido. No los uses por estética. Mantén una jerarquía lógica: un único 'h1' (título principal) y múltiples 'h2' para secciones. Saltarse niveles (de h2 a h4) penaliza la accesibilidad.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<h1>iPhone 15 Pro</h1>

<h2>Especificaciones</h2>

<h3>Cámara</h3>

<h3>Procesador</h3>

<h2>Opiniones de Clientes</h2>

<h1>iPhone 15 Pro</h1>

<h2>Especificaciones</h2>

<h3>Cámara</h3>

<h3>Procesador</h3>

<h2>Opiniones de Clientes</h2>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

Block vs Inline

La diferencia fundamental radica en cómo ocupan el espacio. Los elementos de **Bloque** (como `div` o `p`) son estructurales: ocupan el 100% del ancho disponible y fuerzan un salto de línea, colocándose uno debajo del otro. Los elementos **En Línea** (como `span` o `a`) fluyen con el contenido: solo ocupan el ancho de su texto y permiten que otros elementos se sitúen a su lado en el mismo renglón.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<div>Soy un bloque (Header)</div>
<div>Soy otro bloque (Footer)</div>
<span>Usuario:</span> <strong>Admin</strong>

<div>Soy un bloque (Header)</div>
<div>Soy otro bloque (Footer)</div>
<span>Usuario:</span> <strong>Admin</strong>

Cabecera y Navegación: Header y Nav

El bloque superior se define con '<header>', ideal para el logotipo y el título principal. Dentro de él (o adyacente), utilizamos la etiqueta '<nav>', reservada exclusivamente para los bloques principales de enlaces de navegación, ayudando a los motores de búsqueda y lectores de pantalla a identificar el menú del sitio.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Cabecera del sitio: suele contener logo, título y navegación principal -->
<header>

    <!-- Imagen del logotipo del sitio -->
    <!-- El atributo alt es obligatorio para accesibilidad y SEO -->
    <img src="logo.png" alt="Logo" />

    <!-- Título principal del sitio o de la sección -->
    <h1>Mi Sitio Web</h1>

    <!-- Bloque de navegación principal del sitio -->
    <!-- <nav> debe usarse solo para enlaces de navegación importantes -->
    <nav>

        <!-- Enlace a la sección de inicio -->
        <a href="#">Inicio</a>

        <!-- Enlace a la sección de servicios -->
        <a href="#">Servicios</a>

        <!-- Enlace a la sección de contacto -->
        <a href="#">Contacto</a>

    </nav>

</header>

<!-- Cabecera del sitio: suele contener logo, título y navegación principal -->
<header>

    <!-- Imagen del logotipo del sitio -->
    <!-- El atributo alt es obligatorio para accesibilidad y SEO -->
    <img src="logo.png" alt="Logo" />

    <!-- Título principal del sitio o de la sección -->
    <h1>Mi Sitio Web</h1>

    <!-- Bloque de navegación principal del sitio -->
    <!-- <nav> debe usarse solo para enlaces de navegación importantes -->
    <nav>

        <!-- Enlace a la sección de inicio -->
        <a href="#">Inicio</a>

        <!-- Enlace a la sección de servicios -->
        <a href="#">Servicios</a>

        <!-- Enlace a la sección de contacto -->
        <a href="#">Contacto</a>

    </nav>

</header>

El Cuerpo: Main, Section y Aside

La etiqueta '<main>' es única por página y envuelve el contenido central. Para organizar la información usamos '<section>' (temas relacionados con título propio). La etiqueta '<aside>' se utiliza para contenido tangencial o complementario, como barras laterales de publicidad o 'posts relacionados'.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Contenedor principal del contenido de la página -->
<!-- Solo debe existir un <main> por documento HTML -->
<main>

    <!-- Section agrupa contenido relacionado que tiene un tema propio -->
    <!-- Generalmente incluye un encabezado (h2, h3, etc.) -->
    <section>

        <!-- Título de la sección -->
        <h2>Últimas Noticias</h2>

        <!-- Párrafo con el contenido principal de la sección -->
        <p>Detalle del artículo principal...</p>

    </section>

    <!-- Aside contiene información complementaria o secundaria -->
    <!-- No es esencial para entender el contenido principal -->
    <aside>

        <!-- Título del bloque lateral -->
        <h3>Publicidad</h3>

        <!-- Contenido adicional, anuncios o elementos relacionados -->
        <p>Oferta especial solo por hoy.</p>

    </aside>

</main>

<!-- Contenedor principal del contenido de la página -->
<!-- Solo debe existir un <main> por documento HTML -->
<main>

    <!-- Section agrupa contenido relacionado que tiene un tema propio -->
    <!-- Generalmente incluye un encabezado (h2, h3, etc.) -->
    <section>

        <!-- Título de la sección -->
        <h2>Últimas Noticias</h2>

        <!-- Párrafo con el contenido principal de la sección -->
        <p>Detalle del artículo principal...</p>

    </section>

    <!-- Aside contiene información complementaria o secundaria -->
    <!-- No es esencial para entender el contenido principal -->
    <aside>

        <!-- Título del bloque lateral -->
        <h3>Publicidad</h3>

        <!-- Contenido adicional, anuncios o elementos relacionados -->
        <p>Oferta especial solo por hoy.</p>

    </aside>

</main>

El Cierre: Footer

La etiqueta '<footer>' representa el pie de página. Semánticamente, indica el fin del documento o sección. Es el lugar estándar para colocar información de derechos de autor (copyright), datos de contacto, enlaces a redes sociales y mapas del sitio.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Pie de página del sitio o de una sección -->
<!-- Indica el cierre semántico del contenido -->
<footer>

    <!-- Información legal o de derechos de autor -->
    <!-- &copy; es una entidad HTML que representa el símbolo © -->
    <p>&copy; 2024 Todos los derechos reservados.</p>

    <!-- Address se utiliza para información de contacto -->
    <!-- No es una dirección física obligatoriamente -->
    <address>
        Contacto: hola@misitio.com
    </address>

    <!-- Contenedor sin semántica específica para agrupar enlaces -->
    <!-- Se usa <div> cuando no existe una etiqueta semántica adecuada -->
    <div class="social">

        <!-- Enlace a la red social Instagram -->
        <a href="#">Instagram</a>

        <!-- Enlace a la red social Twitter (X) -->
        <a href="#">Twitter</a>

    </div>

</footer>

<!-- Pie de página del sitio o de una sección -->
<!-- Indica el cierre semántico del contenido -->
<footer>

    <!-- Información legal o de derechos de autor -->
    <!-- &copy; es una entidad HTML que representa el símbolo © -->
    <p>&copy; 2024 Todos los derechos reservados.</p>

    <!-- Address se utiliza para información de contacto -->
    <!-- No es una dirección física obligatoriamente -->
    <address>
        Contacto: hola@misitio.com
    </address>

    <!-- Contenedor sin semántica específica para agrupar enlaces -->
    <!-- Se usa <div> cuando no existe una etiqueta semántica adecuada -->
    <div class="social">

        <!-- Enlace a la red social Instagram -->
        <a href="#">Instagram</a>

        <!-- Enlace a la red social Twitter (X) -->
        <a href="#">Twitter</a>

    </div>

</footer>

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
       <section>
            <h1>Artículo Principal</h1>
            <p>...</p>
            <p>...</p>
            <p>...</p>
        </section>
        <aside>
        </aside>
    </main>
    <footer>...</footer>
</body>

<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
       <section>
            <h1>Artículo Principal</h1>
            <p>...</p>
            <p>...</p>
            <p>...</p>
        </section>
        <aside>
        </aside>
    </main>
    <footer>...</footer>
</body>

Layout semántico moderno — Estructura de un layout moderno utilizando etiquetas semánticas (header, main, footer) en lugar de divs genéricos.

¿Qué pasa exactamente si olvido poner `<!DOCTYPE html>`?

El navegador entrará en 'Quirks Mode' (Modo de peculiaridades). Intentará emular errores de navegadores antiguos (como IE5) para asegurar compatibilidad, lo que romperá tu maquetación CSS y el modelo de caja estándar.

¿Es obligatorio cerrar las etiquetas vacías como `<img />` en HTML5?

En HTML5 puro no es obligatorio, `<img src='...'>` es válido. Sin embargo, cerrarlas (`<img ... />`) es la mejor práctica profesional para mantener consistencia con JSX (React) y evitar errores en parsers XML.

¿Por qué el archivo principal debe llamarse `index.html`?

Es la configuración estándar de casi todos los servidores web (Apache, Nginx). Cuando solicitas una carpeta (ej: `misitio.com/blog/`), el servidor busca y entrega automáticamente el `index.html` de ese directorio.

¿Cuántas etiquetas `<h1>` debo tener por página para el SEO?

La recomendación de oro del SEO es **un único `<h1>` por página** que describa el tema principal. Tener múltiples `<h1>` diluye la relevancia semántica y confunde a los bots sobre cuál es el contenido central.

¿Cuál es la diferencia real entre `<div>` y `<section>`?

`<div>` es un contenedor genérico sin significado semántico (solo para estilos). `<section>` indica un bloque temático de contenido que idealmente debería tener un encabezado propio. Usar `<section>` ayuda al esquema del documento.

¿Qué es el DOM (Document Object Model)?

Es la representación en forma de árbol que el navegador construye en memoria al leer tu HTML. Cada etiqueta se convierte en un 'nodo' (objeto) que puede ser manipulado por JavaScript.

¿Por qué mis imágenes tienen un pequeño espacio debajo extraña?

Porque las imágenes son elementos `inline` (en línea) por defecto, y se alinean con la línea base del texto, dejando espacio para letras descendentes (como la 'g' o 'y'). Solución: `display: block;` en CSS.

¿Para qué sirve el atributo `lang="es"` en la etiqueta `<html>`?

Es vital para la accesibilidad (lectores de pantalla sabrán qué acento usar) y para el SEO (Google sabrá en qué idioma indexar tu sitio y si ofrecer traducción automática).

¿Es malo usar mayúsculas en los nombres de archivos HTML?

Sí, es una mala práctica crítica. Los servidores Linux (la mayoría de la web) distinguen mayúsculas de minúsculas (Case Sensitive). `Contacto.html` y `contacto.html` serían páginas distintas, rompiendo enlaces fácilmente.

¿Qué significa que el HTML sea 'semántico'?

Significa usar las etiquetas por su significado y propósito (ej: `<nav>` para menús, `<p>` para párrafos), no por cómo se ven. Esto permite que máquinas (bots, screen readers) entiendan la estructura de la información.

¿Dónde debo colocar la etiqueta `<script>`, en el head o al final del body?

Tradicionalmente al final del `<body>` para no bloquear el renderizado visual. Modernamente, se usa en el `<head>` con el atributo `defer`, lo que descarga el script en paralelo y lo ejecuta al final.

¿Por qué es importante el atributo `alt` en las imágenes?

Cumple tres funciones: accesibilidad para ciegos (lectores de pantalla), visualización si la imagen falla al cargar, y SEO (Google Images indexa el contenido de la imagen a través de este texto).

¿Qué hace exactamente `<meta charset="UTF-8">`?

Indica al navegador cómo interpretar los bytes del archivo. Sin esto, caracteres especiales como tildes, ñ o emojis podrían mostrarse como símbolos extraños (garabatos).

¿Puedo poner un `<div>` dentro de un `<span>`?

No, es inválido. Un elemento en línea (`<span>`) no puede contener un elemento de bloque (`<div>`). Al revés (un `<span>` dentro de un `<div>`) es perfectamente correcto.

¿Qué ventaja tiene usar `<main>`?

Permite a los usuarios con lectores de pantalla saltar directamente al contenido principal, ignorando menús y sidebars repetitivos. Solo debe haber un `<main>` visible por página.

¿Qué es la carga diferida o 'Lazy Loading' nativa?

Es el atributo `loading="lazy"` en imágenes e iframes. Le dice al navegador que no descargue el recurso hasta que el usuario haga scroll y esté cerca de verlo, ahorrando datos y acelerando la carga inicial.

¿Para qué sirve el atributo `rel="noopener"` en enlaces externos?

Es una medida de seguridad crítica al usar `target="_blank"`. Evita que la página nueva tenga acceso al objeto `window` de tu página original, previniendo ataques de phishing o redirecciones maliciosas.

¿Debo usar `<b>` y `<i>` o `<strong>` y `<em>`?

Usa `<strong>` y `<em>`. `<b>` e `<i>` son puramente visuales (bold/italic). `<strong>` indica importancia semántica y `<em>` énfasis, lo cual cambia la entonación en lectores de pantalla.

¿Qué son los atributos `data-*`?

Son atributos personalizados que permiten guardar información extra en el HTML para ser leída posteriormente por JavaScript (ej: `<div data-id="123" data-role="admin">`).

¿Por qué el viewport es esencial para móviles?

Sin `<meta name="viewport" ...>`, los móviles renderizan la web como si tuvieran 980px de ancho y luego hacen zoom-out, haciendo que todo se vea minúsculo. El viewport ajusta el ancho lógico al del dispositivo.

¿Cuál es la diferencia entre `<link>` y `<a>`?

`<a>` (anchor) es para hipervínculos que el usuario puede clicar. `<link>` es para relacionar el documento HTML con recursos externos (CSS, favicons, fuentes) y va en el `<head>`.

¿Qué pasa si salto niveles de encabezado (de `h2` a `h4`)?

Rompes la estructura lógica del documento. Es considerado un error de accesibilidad (WCAG) porque dificulta la navegación para personas que usan tecnologías de asistencia para esquematizar la página.

¿Es `<br>` una buena forma de hacer espacio vertical?

No. `<br>` es para saltos de línea significativos (como en poemas o direcciones). Para espaciado visual entre elementos, siempre se debe usar CSS (`margin` o `padding`).

¿Para qué sirve la etiqueta `<head>` si no se ve?

Contiene los metadatos. Es el cerebro de la página: define el título de la pestaña, carga estilos, scripts, analíticas y da instrucciones a los buscadores y redes sociales (Open Graph).

¿Qué es un favicon?

Es el pequeño icono que aparece en la pestaña del navegador. Se define en el head con `<link rel="icon" href="...">`.

¿Por qué usar `<button>` en lugar de un `<div>` con click?

`<button>` ya viene con accesibilidad de teclado (Enter/Espacio activa el click) y foco integrados. Un `<div>` requiere añadir manualmente roles ARIA y listeners de teclado, lo cual es ineficiente.

¿Qué es la validación W3C?

Es el proceso de verificar que tu código cumple con los estándares oficiales. Un código válido asegura que el sitio se vea consistente en diferentes navegadores y dispositivos futuros.

¿Cómo funcionan las rutas relativas (`./imagen.jpg`)?

Buscan el archivo basándose en la ubicación actual del HTML. `./` es el directorio actual, `../` sube un nivel. Son preferibles a las rutas absolutas para que el sitio funcione tanto en local como en producción.

¿Para qué sirve la etiqueta `<time>`?

Permite definir fechas y horas en un formato legible por máquinas (ISO 8601), ayudando a los buscadores a indexar eventos o fechas de publicación correctamente.

¿Qué diferencia hay entre `<article>` y `<section>`?

`<article>` es contenido independiente y redistribuible (como un post de blog o una noticia). `<section>` es una agrupación temática de contenido que es parte de un todo mayor.

¿Por qué no debo usar espacios en los nombres de archivo?

Los navegadores codifican los espacios como `%20` en la URL, lo que las hace ilegibles, difíciles de compartir y propensas a errores al migrar de servidores Windows a Linux.

¿Qué hace el atributo `required` en los inputs?

Activa la validación nativa del navegador. Impide que el formulario se envíe si el campo está vacío y muestra un mensaje de error automático al usuario sin necesidad de JS.

¿Puedo tener múltiples etiquetas `<body>`?

No, absolutamente no. Solo puede haber un elemento `<body>` por documento HTML. Tener más de uno es un error de sintaxis grave que resultará en un DOM impredecible.

¿Para qué sirve el atributo `title` en una etiqueta?

Muestra un 'tooltip' nativo (pequeño cartel amarillo) cuando el usuario pasa el mouse por encima. Es útil para aclaraciones, pero no debe contener información crítica ya que no funciona en táctiles.

¿Qué es un elemento de bloque (Block Element)?

Un elemento que, por defecto, ocupa todo el ancho disponible de su padre y fuerza un salto de línea antes y después de sí mismo (ej: `div`, `p`, `h1`, `ul`).

¿Qué es un elemento de línea (Inline Element)?

Un elemento que solo ocupa el ancho necesario para su contenido y no rompe el flujo del texto (ej: `span`, `a`, `strong`). Los márgenes verticales (top/bottom) no les afectan igual.

¿Por qué se recomienda SVG sobre PNG para iconos?

SVG es código vectorial. Escala infinitamente sin pixelarse, pesa muy poco (texto plano) y se puede cambiar su color mediante CSS (`fill`), lo que lo hace ideal para iconos responsivos.

¿Para qué sirve la etiqueta `<figure>` y `<figcaption>`?

Para asociar semánticamente un contenido multimedia (imagen, gráfico, código) con su leyenda o descripción. Vincula la imagen y el texto para los motores de búsqueda.

¿Cómo comento código en HTML?

Usando la sintaxis ``. Todo lo que esté dentro será ignorado por el navegador al renderizar, pero será visible si alguien inspecciona el código fuente.

¿Qué impacto tiene el orden de los elementos en el HTML?

El orden en el código (DOM order) determina el orden de lectura para los lectores de pantalla y el orden de tabulación (Tab Index). CSS puede cambiar lo visual, pero no el orden lógico.

¿Qué es el atributo `placeholder`?

Es el texto gris de ayuda que aparece dentro de un input vacío. Desaparece al escribir. No debe usarse como reemplazo de la etiqueta `<label>`, ya que desaparece y afecta la accesibilidad.

¿Es necesario especificar `type="text"` en un input?

No estrictamente, ya que `text` es el valor por defecto si no se especifica el atributo `type`. Sin embargo, es buena práctica ser explícito.

¿Qué hace el atributo `autocomplete`?

Permite al navegador sugerir autocompletado basado en datos previos del usuario (como emails o nombres). `autocomplete="off"` desactiva estas sugerencias (útil para datos sensibles o captchas).

¿Para qué sirve `<aside>`?

Define contenido que está relacionado tangencialmente con el contenido principal, como barras laterales, publicidad, cajas de 'biografía del autor' o listas de enlaces relacionados.

¿Por qué usar `<label>` vinculada a un input?

Es fundamental para la usabilidad. Permite que al hacer clic en el texto de la etiqueta (ej: 'Nombre'), el foco vaya automáticamente al campo de entrada. Se vincula con `for="id_del_input"`.

¿Qué diferencia hay entre `<ul>` y `<ol>`?

`<ul>` (Unordered List) usa viñetas/puntos y se usa cuando el orden no importa. `<ol>` (Ordered List) numera los elementos (1, 2, 3...) y se usa para pasos, rankings o instrucciones secuenciales.

¿Para qué se usa la etiqueta `<address>`?

Semánticamente indica la información de contacto del autor del artículo o del sitio web. No se debe usar para cualquier dirección postal genérica, sino para la del contexto actual.

¿Qué son los 'Iframes'?

Permiten incrustar otra página web completa dentro de la tuya (como un mapa de Google o un video de YouTube). Deben usarse con cuidado por temas de seguridad y rendimiento.

¿Por qué es importante la indentación en HTML?

No afecta al navegador (que ignora los espacios extra), pero es vital para la legibilidad humana, permitiendo visualizar la jerarquía y el anidamiento (padre/hijo) rápidamente para evitar errores de cierre.

¿HTML es un lenguaje de programación?

Técnicamente no. Es un **lenguaje de marcado** (Markup Language). No tiene lógica, bucles, variables ni funciones. Su propósito es estructurar y dar significado al contenido, no ejecutar acciones.