FUNDAMENTOS FRONTEND

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

Descubre el lenguaje que estructura todo internet

Domina la base de la web con HTML5. Aprende sintaxis, estructura, etiquetas semánticas y anidamiento correcto para crear desarrollos sólidos, accesibles y profesionales.

1

¿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.

<!-- 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 -->
2

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).

<!-- 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> -->
3

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.

<!-- 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/>
4

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.
5

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.

<!-- 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>
6

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.
7

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.

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)
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas
9

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
Publicidad
html-css-online-course-responsive-web-design-from-scratch
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 especial
Ver próximas fechas
10

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á.

<!DOCTYPE html>

<html lang="es">

</html>
11

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>.

<!-- 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>
12

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.

<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>
13

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.
14

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.

<h1>iPhone 15 Pro</h1>

<h2>Especificaciones</h2>

<h3>Cámara</h3>

<h3>Procesador</h3>

<h2>Opiniones de Clientes</h2>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
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 especial
Ver próximas fechas
15

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.

Gráfico visual de comportamiento Block vs Inline
Diferencia de flujo visual: los elementos de bloque ocupan todo el ancho, mientras que los de línea fluyen lateralmente.
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas
17

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.

<!-- 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>
18

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'.

<!-- 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>
19

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.

<!-- 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>
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas

Lección actual

Ilustración que resume los pilares del HTML5 moderno
Ilustración que resume los pilares del HTML5 moderno

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

Domina la base de la web con HTML5. Aprende sintaxis, estructura, etiquetas semánticas y anidamiento correcto para crear desarrollos sólidos, accesibles y profesionales.

Lección actual

Lección siguiente

Guía de enlaces HTML
Representación visual de la sintaxis básica y el funcionamiento de la etiqueta ancla en HTML.

Arquitectura de Enlaces: El Sistema Nervioso de la Web

Domina la navegación web con HTML. Aprende a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, anclas internas y a estructurar la arquitectura de tu sitio.

Comenzar Lección
¿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.