Fundamentos de la Programación Web

/ Tecnología / Por
Fundamentos de la Programación Web

Definición de HTML y/o XHTML

  • HTML (HyperText Markup Language): lenguaje de marcado estándar utilizado para estructurar y presentar el contenido en la web. Permite definir títulos, párrafos, imágenes, enlaces, tablas y otros elementos.
  • XHTML (eXtensible HyperText Markup Language): versión más estricta de HTML, basada en XML. Obliga a seguir reglas de sintaxis rigurosas, como cerrar todas las etiquetas y respetar la jerarquía de anidamiento.

Estándares de HTML y/o XHTML

Los estándares garantizan que las páginas web funcionen correctamente en todos los navegadores y dispositivos. Estos lineamientos son definidos por el W3C (World Wide Web Consortium), organización responsable de establecer normas internacionales para el desarrollo web.

Navegadores

Son programas que interpretan el código HTML, CSS y JavaScript para mostrar páginas web al usuario. Ejemplos: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge y Opera.

Servidores web

Software que almacena, procesa y entrega páginas web a los navegadores a través de Internet. Algunos de los más utilizados son Apache, Nginx y Microsoft IIS.

Editores web

Herramientas utilizadas para escribir y editar páginas web. Pueden clasificarse en:

  • Editores de texto: como Visual Studio Code, Sublime Text o Notepad++.
  • Editores visuales (WYSIWYG): como Dreamweaver, que permiten diseñar páginas de forma gráfica.

Comunicación entre el servidor y el navegador

Se realiza mediante el protocolo HTTP o HTTPS:

  1. El navegador envía una solicitud al servidor.
  2. El servidor procesa la petición y responde con la página o recurso solicitado.
  3. El navegador interpreta la respuesta y la muestra al usuario.

Orígenes de la Web

La World Wide Web fue creada en 1989 por Tim Berners-Lee en el CERN como un sistema para compartir información científica a través de hipertexto y enlaces.

Web 2.0

Evolución de la web en la que los usuarios no solo consumen información, sino que también participan activamente. Se caracteriza por la interacción, la colaboración y los contenidos generados por los usuarios. Ejemplos: blogs, redes sociales y wikis.

Web 3.0

Conocida como la web semántica, busca que los datos sean comprendidos y procesados por máquinas. Incluye tecnologías como inteligencia artificial, blockchain y sistemas descentralizados.

La W3C y los estándares

El W3C (World Wide Web Consortium) es el organismo encargado de crear y mantener estándares que permiten la interoperabilidad entre navegadores, plataformas y dispositivos. Entre sus aportes se encuentran los lineamientos de HTML, CSS, XML y accesibilidad web.

Lenguajes de Etiquetas

  • SGML (Standard Generalized Markup Language): lenguaje madre del que derivan HTML y XML.
  • XML (eXtensible Markup Language): lenguaje flexible para almacenar e intercambiar datos estructurados.
  • HTML: lenguaje de marcado para la estructura del contenido web.
  • XHTML: versión más estricta de HTML compatible con XML.
  • HTML5: versión más reciente y extendida de HTML, que incluye nuevas etiquetas semánticas, soporte nativo para audio y video, gráficos mediante Canvas y SVG, y APIs modernas.

Otros Lenguajes Relacionados al Desarrollo Web

  • CSS / CSS3: hojas de estilo en cascada que definen la presentación de una página web (colores, tipografía, diseño y animaciones).
  • JavaScript: lenguaje de programación interpretado que aporta interactividad y dinamismo en las páginas.
  • Ajax (Asynchronous JavaScript and XML): técnica que permite la comunicación con el servidor en segundo plano sin necesidad de recargar la página completa.

Tecnologías y Lenguajes del Lado del Servidor

Son los que se ejecutan en el servidor para generar contenido dinámico antes de enviarlo al navegador. Algunos ejemplos son:

  • PHP
  • Python (Django, Flask)
  • Java (JSP, Spring)
  • Node.js
  • Ruby on Rails
  • .NET (C#)
  • Bases de datos: MySQL, PostgreSQL, MongoDB

Navegadores

Aplicaciones cliente que interpretan HTML, CSS y JavaScript, ejecutan APIs del navegador y presentan el contenido al usuario. Administran sesiones, almacenamiento local, historial, seguridad (aislamiento de procesos, mismo origen, sandboxing), redes (HTTP/HTTPS), caché y extensiones. Ejemplos: Chrome, Firefox, Safari, Edge, Opera.

Motores de renderizado

Componentes internos del navegador que transforman código y recursos en píxeles en pantalla. Suelen trabajar así:

  1. Parseo: HTML → DOM, CSS → CSSOM.
  2. Construcción del árbol de renderizado (DOM + CSSOM).
  3. Cálculo de estilos y layout (flujo, cajas, posiciones).
  4. Pintado y composición (layers).
    Motores principales: Blink (Chrome/Edge/Opera), WebKit (Safari), Gecko (Firefox).
    Motores JavaScript (se integran con el motor de renderizado): V8 (Chrome/Edge), SpiderMonkey (Firefox), JavaScriptCore/Nitro (Safari).

Herramientas de desarrollo

Software WYSIWYG

Editores “What You See Is What You Get” que permiten diseñar visualmente y generan el código. Ejemplos: Adobe Dreamweaver, Pinegrow, editores visuales de constructores como Webflow.
Ventajas: curva rápida, prototipado veloz, utilidades de grid/flex visuales.
Desventajas: código a veces verboso, dependencia de la herramienta, menor control fino.
Uso recomendado: prototipos, maquetación inicial, equipos no técnicos. Para producción, conviene revisar y optimizar el HTML/CSS generado.

Inspección de código desde el navegador

Los navegadores incluyen DevTools para auditar y depurar:

  • Elements/Inspector: examinar y editar DOM/CSS en vivo.
  • Console: logs, errores y ejecución de JS.
  • Network: solicitudes, cabeceras, caché, tiempos, CORS.
  • Sources/Debugger: breakpoints, call stacks, paso a paso.
  • Performance: perfiles de CPU/render para detectar bloqueos y reflows.
  • Memory: fugas y uso de heap.
  • Application: Storage (localStorage, IndexedDB), Service Workers, manifest.
  • Lighthouse: auditorías de rendimiento, accesibilidad, SEO y PWA.
    Apertura típica: F12 o Ctrl+Shift+I (Cmd+Opt+I en macOS).

Servidores web

Software que recibe solicitudes HTTP/HTTPS y entrega respuestas (archivos estáticos o contenido generado). Funciones: servir archivos, enrutamiento, compresión (gzip/br), caché, TLS/SSL, virtual hosts, logging, control de acceso, reverse proxy a aplicaciones.
Ejemplos: Apache HTTP Server (módulos, .htaccess), Nginx (event-driven, proxy/load balancer), Caddy (TLS automático), Microsoft IIS.
Aplicaciones dinámicas suelen ejecutarse detrás de un servidor (p. ej., Nginx → app Node/Express, PHP-FPM, Python/WSGI). Soporte de HTTP/1.1, HTTP/2 y HTTP/3 (QUIC) según servidor y configuración.

Tipos de páginas web

Estáticas

HTML/CSS/JS pre-generados. El servidor solo entrega archivos.
Ventajas: muy rápidas, seguras, baratas, fáciles de cachear y CDN.
Limitaciones: el contenido no cambia en el servidor por solicitud; la “dinámica” viene del lado del cliente o de APIs.
Casos: landing pages, documentación, blogs con generadores estáticos (JAMstack: SSG + APIs + CDN).

Dinámicas

El servidor genera HTML en tiempo real según la solicitud (parámetros, sesión, BD).
Ventajas: contenido personalizado, paneles, CRUD, comercio electrónico.
Coste: mayor complejidad, estado, seguridad, escalado.
Modalidades modernas: SSR (render en servidor), CSR (SPA en el cliente), SSG (estático prebuild), ISR/revalidación, híbridos.

Puntos básicos en la elaboración de una página web

  1. Objetivo y audiencia: propósito, métricas, accesibilidad necesaria.
  2. Arquitectura de información: mapa del sitio, navegación, taxonomías.
  3. Contenido y semántica: HTML semántico, microdatos/JSON-LD si aplica.
  4. Diseño responsivo: mobile-first, grid/flex, breakpoints.
  5. Accesibilidad (a11y): WCAG, contraste, foco visible, ARIA, navegación por teclado.
  6. Rendimiento: carga diferida (lazy), optimizar imágenes, minificación, HTTP caching, critical CSS, evitar render-blocking.
  7. SEO básico: títulos, metadescripciones, encabezados, URLs limpias, sitemap, robots, Core Web Vitals.
  8. Seguridad: HTTPS, CSP, escudo contra XSS/CSRF, validación en cliente y servidor, cabeceras seguras.
  9. Pruebas: funcionales, visuales, cross-browser, dispositivos reales.
  10. Deploy y monitoreo: CI/CD, logs, métricas, tracing, errores en tiempo real.

Jerarquía de directorio de un proyecto web

Sitio estático básico

mi-sitio/
├─ index.html            # Página de inicio (entrada principal)
├─ pages/                # Otras páginas HTML (about.html, contact.html, etc.)
├─ assets/
│  ├─ css/
│  │  ├─ styles.css      # Estilos globales
│  │  └─ vendor/         # Librerías CSS de terceros
│  ├─ js/
│  │  ├─ main.js         # Lógica propia
│  │  └─ vendor/         # Librerías JS de terceros
│  ├─ img/               # Imágenes optimizadas
│  └─ fonts/             # Tipografías
├─ docs/                 # Documentación del proyecto
├─ tests/                # Pruebas (si aplica)
└─ README.md

Buenas prácticas: nombres kebab-case, rutas relativas coherentes, assets versionados o con hash si hay pipeline, imágenes en formatos modernos cuando sea posible.

Aplicación full-stack Node.js (SSR/API)

mi-app/
├─ src/
│  ├─ app.js             # Arranque del servidor (Express, Fastify, etc.)
│  ├─ routes/            # Definición de rutas HTTP
│  ├─ controllers/       # Lógica de casos de uso
│  ├─ services/          # Integraciones externas (APIs, colas)
│  ├─ models/            # Acceso a base de datos/ORM
│  ├─ middlewares/       # Autenticación, validaciones
│  ├─ views/             # Plantillas (p. ej. EJS, Pug) si hay SSR
│  └─ utils/             # Helpers compartidos
├─ public/               # Archivos estáticos servidos por el server
├─ config/               # Variables y configuración por ambiente
├─ scripts/              # Tareas de mantenimiento/CLI
├─ tests/                # Unit/integration/e2e
├─ .env.example          # Variables de entorno (plantilla)
├─ package.json
├─ Dockerfile            # Contenedor para despliegue (opcional)
└─ README.md

Sugerencias: separar configuración por ambientes (dev/staging/prod), no versionar .env, usar migraciones para BD, logs estructurados, y un reverse proxy (Nginx/Caddy) al frente si se necesita TLS, balanceo o cache.

Etiquetas de manejo de texto en HTML

Estructuración

Son etiquetas que organizan el contenido en bloques y definen su jerarquía semántica dentro del documento:

  • Encabezados: <h1> a <h6>, definen títulos y subtítulos con distintos niveles de importancia.
  • Párrafos: <p>, para bloques de texto corrido.
  • Saltos de línea: <br>, para forzar un salto de línea dentro de un párrafo.
  • Separadores horizontales: <hr>, para dividir secciones de contenido.
  • Listas: <ul>, <ol>, <li> para listas ordenadas y no ordenadas.

Marcado básico de texto

Etiquetas que modifican la apariencia o aportan significado elemental al texto:

  • Negrita: <b> (presentacional) o <strong> (semántico, resalta importancia).
  • Cursiva: <i> (presentacional) o <em> (semántico, énfasis en lectura).
  • Subrayado: <u>.
  • Tachado: <s> o <del>.
  • Superíndice: <sup>.
  • Subíndice: <sub>.

Marcado avanzado de texto

Se emplea para semántica más precisa o anotaciones técnicas:

  • Citas en línea: <q>.
  • Citas en bloque: <blockquote>.
  • Abreviaturas: <abbr title="…">.
  • Definiciones: <dfn>.
  • Código de programación: <code>, <pre>, <samp>, <kbd>.
  • Direcciones: <address>.
  • Marcar o resaltar texto: <mark>.

Marcado genérico de texto

Se utilizan para agrupar o aplicar estilos sin un significado semántico propio:

  • Span: <span>, para aplicar estilos en línea o agrupar texto dentro de un párrafo.
  • Div: <div>, para agrupar bloques de contenido.

Codificación de texto

Hace referencia al sistema que define cómo se representan los caracteres en bytes.

  • El estándar actual en la web es UTF-8, que soporta prácticamente todos los alfabetos y símbolos.
  • Se indica en HTML con la etiqueta meta:
<meta charset="UTF-8">

Esto asegura que el navegador interprete correctamente acentos, eñes y caracteres especiales.

Conceptos de URL

URL (Uniform Resource Locator)

Es la dirección que identifica y permite localizar un recurso en Internet, como una página, imagen, documento o servicio.

Ejemplo:

https://www.ejemplo.com/carpeta/pagina.html?id=5

Partes de una URL

  1. Esquema o protocolo: https://
  2. Nombre de dominio: www.ejemplo.com
  3. Ruta de acceso: /carpeta/pagina.html
  4. Parámetros de consulta (query string): ?id=5
  5. Fragmento (opcional): #seccion1

Codificación de caracteres en la URL

Las URL solo permiten ciertos caracteres.

  • Los espacios y caracteres especiales se representan con codificación porcentual.
  • Ejemplo: un espacio se convierte en %20, la ñ en %C3%B1.
    Esto garantiza que la URL sea válida en la red y compatible entre navegadores.

Tipos de enlaces en HTML

Enlaces absolutos

Contienen la URL completa del recurso, incluyendo protocolo y dominio.
Ejemplo:

<a href="https://www.ejemplo.com/pagina.html">Ir a ejemplo</a>

Enlaces relativos

Definen la ruta en relación con la ubicación actual del archivo HTML.
Ejemplo:

<a href="contacto.html">Contacto</a>

Si el archivo actual está en /carpeta/, buscará /carpeta/contacto.html.

Enlaces externos

Son enlaces que apuntan a recursos fuera del mismo dominio.
Ejemplo:

<a href="https://www.wikipedia.org">Wikipedia</a>

Etiqueta <a>

Enlaces internos

Apuntan a secciones dentro de la misma página o documento mediante identificadores (id).
Ejemplo:

<a href="#seccion1">Ir a la sección 1</a>
...
<h2 id="seccion1">Sección 1</h2>

Etiqueta <a>

La etiqueta <a> (anchor o ancla) se utiliza para crear hipervínculos en una página web. Permite enlazar a otros documentos, sitios web, secciones internas de la misma página, correos electrónicos o recursos como archivos.

Sintaxis básica:

<a href="https://www.ejemplo.com">Texto del enlace</a>

Atributos principales:

  • href: Dirección URL o ruta del recurso al que se enlaza (obligatorio para que funcione el enlace).
  • target: Define dónde abrir el enlace (_blank, _self, _parent, _top).
  • title: Texto alternativo que aparece al pasar el ratón.
  • download: Indica que el enlace permite descargar un archivo.
  • rel: Define la relación con el documento enlazado (ej: nofollow, noopener).

Listas en HTML

1. Listas ordenadas (<ol>)

Son listas numeradas de forma automática. Cada elemento se representa con <li>.

Ejemplo:

<ol>
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
</ol>

Atributos principales:

  • type: Define el tipo de numeración (1, A, a, I, i).
  • start: Define el número o letra desde donde comienza la lista.
  • reversed: Invierte el orden de numeración (de mayor a menor).

2. Listas no ordenadas (<ul>)

Son listas con viñetas en lugar de números.

Ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Atributos principales:

  • type (obsoleto en HTML5): permitía definir el estilo de viñeta (disc, circle, square).
    Actualmente, se controla con CSS usando list-style-type.

3. Listas de definición (<dl>)

Se utilizan para definir términos y sus descripciones.

Ejemplo:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para estructurar páginas web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje para dar estilo a las páginas web.</dd>
</dl>

Elementos dentro de <dl>:

  • <dt>: término a definir.
  • <dd>: definición o descripción del término.

Conceptos de Imágenes

Imagen

En la web, una imagen es un recurso gráfico que se inserta dentro de una página HTML para complementar el contenido.

Tipos de imágenes o formatos comunes:

  • JPEG/JPG: ideal para fotografías, soporta compresión con pérdida.
  • PNG: soporta transparencia, buena calidad sin pérdida.
  • GIF: permite animaciones simples, 256 colores.
  • SVG: gráficos vectoriales escalables sin pérdida de calidad.
  • WEBP: formato moderno con mejor compresión y soporte de transparencia.

Etiqueta <img>

Se utiliza para insertar imágenes en una página web.

Sintaxis:

<img src="imagen.png" alt="Descripción de la imagen">

Atributos principales:

  • src: Ruta o URL de la imagen (obligatorio).
  • alt: Texto alternativo que describe la imagen (obligatorio).
  • width: Ancho en píxeles o porcentaje.
  • height: Alto en píxeles o porcentaje.
  • title: Texto emergente al pasar el cursor.
  • loading: Controla la carga diferida (lazy, eager).

Etiqueta <figure>

Se utiliza para agrupar imágenes y su descripción, dándoles un contexto semántico.

Ejemplo:

<figure>
  <img src="foto.jpg" alt="Paisaje natural">
  <figcaption>Vista panorámica de un paisaje.</figcaption>
</figure>

Atributos:

  • No posee atributos específicos más allá de los globales de HTML (como id, class, style).

Etiqueta <figcaption>

Sirve para añadir una descripción o pie de figura dentro de un <figure>.

Ejemplo:

<figure>
  <img src="grafico.png" alt="Gráfico estadístico">
  <figcaption>Gráfico de ventas 2024.</figcaption>
</figure>

Atributos:

  • Solo atributos globales (id, class, style).

Atributos obligatorios

  • En <img>, los atributos obligatorios son:
    • src (fuente de la imagen).
    • alt (texto alternativo).

En <a>, <figure> y <figcaption> no existen atributos obligatorios estrictos, pero href en <a> y un contenido válido en <figcaption> son esenciales para su correcto funcionamiento.

Multimedia en la Web

Conceptos: Audio y Video

  • Audio y Video en HTML permiten la integración de contenido multimedia sin necesidad de complementos externos.
  • Son parte de HTML5 y se reproducen directamente en los navegadores modernos.

Tipos de formatos permitidos en la Web

  • Audio: MP3, OGG, WAV.
  • Video: MP4 (H.264 + AAC), WebM, OGG/Theora.

Etiqueta <audio>

Se utiliza para insertar contenido de audio en la página.
Atributos principales:

  • src: ruta del archivo de audio.
  • controls: muestra los controles de reproducción.
  • autoplay: reproduce automáticamente.
  • loop: reproduce en bucle.
  • muted: inicia silenciado.
  • preload: define si el audio se carga al cargar la página (auto, metadata, none).

Etiqueta <video>

Se utiliza para insertar video en la página.
Atributos principales:

  • src: ruta del archivo de video.
  • controls: muestra controles de reproducción.
  • autoplay: reproducción automática.
  • loop: repetición en bucle.
  • muted: inicia silenciado.
  • poster: imagen previa que se muestra antes de reproducir.
  • width y height: dimensiones del reproductor.

Plug-ins

Antes de HTML5, eran necesarios para reproducir multimedia (ej. Flash, Silverlight). Actualmente están en desuso debido a problemas de seguridad y compatibilidad.

Etiqueta <iframe>

Permite incrustar otra página web dentro de la actual.
Atributos principales:

  • src: URL del recurso a mostrar.
  • width y height: dimensiones.
  • title: descripción del contenido para accesibilidad.
  • allowfullscreen: permite pantalla completa.
  • loading: carga diferida (lazy).
  • frameborder (obsoleto): borde del marco.

Tablas

Concepto

Las tablas permiten estructurar datos en filas y columnas.

Etiqueta <table>

Define el inicio de una tabla.
Atributos:

  • border (obsoleto, se usa CSS).
  • cellpadding: espacio interno de celdas.
  • cellspacing: espacio entre celdas.
  • summary (obsoleto, sustituido por caption).

Etiqueta <tr>

Define una fila.
Atributos:

  • align (obsoleto).
  • bgcolor (obsoleto, usar CSS).

Etiquetas <td> y <th>

  • <td>: celda de datos.
  • <th>: celda de encabezado (negrita y centrado por defecto).
    Atributos:
  • colspan: fusionar columnas.
  • rowspan: fusionar filas.
  • headers: referencia a celdas de encabezado.

Tablas avanzadas

  • <thead>: agrupa la cabecera.
  • <tfoot>: agrupa el pie de tabla.
  • <tbody>: agrupa el cuerpo.
    Estos permiten mejorar la semántica y accesibilidad.

Formularios

Concepto

Los formularios permiten la interacción entre el usuario y la página, enviando datos a un servidor.

Utilidad y Funcionamiento

  • Sirven para recopilar información (ej. registro, login, encuestas).
  • Los datos se envían al servidor mediante los métodos GET o POST.

Etiqueta <form>

Define el inicio de un formulario.
Atributos:

  • action: URL a la que se envían los datos.
  • method: GET o POST.
  • enctype: tipo de codificación (ej. multipart/form-data).
  • target: destino de la respuesta.

Etiqueta <input>

Campo de entrada de datos.
Funcionamiento: cambia según el valor del atributo type.
Tipos y atributos principales:

  • type: text, password, email, number, checkbox, radio, file, submit, reset, hidden.
  • name: nombre de la variable.
  • value: valor del campo.
  • placeholder: texto de ayuda.
  • required: campo obligatorio.
  • readonly, disabled.

Etiqueta <label>

Asocia texto descriptivo a un control de formulario.
Atributos:

  • for: id del campo asociado.

Etiqueta <select>

Lista desplegable.

  • <option>: cada opción de la lista.
  • <optgroup>: agrupa opciones relacionadas.
    Atributos:
  • name. Define el nombre del control y se utiliza para identificar los datos enviados al servidor.
  • multiple: permite seleccionar más de una opción.
  • size: cantidad de opciones visibles.

Etiqueta <textarea>

Campo de texto multilínea.
Atributos:

  • rows: número de filas.
  • cols: número de columnas.
  • placeholder, required, readonly.

Etiquetas <fieldset> y <legend>

  • <fieldset>: agrupa controles de formulario.
  • <legend>: título del grupo.
    Atributos:
  • disabled: desactiva todos los campos del grupo.

Etiqueta <meter>

Representa un valor dentro de un rango conocido.
Atributos:

  • min, max: límites.
  • value: valor actual.
  • low, high, optimum: rangos de referencia.

Etiqueta <progress>

Indica el progreso de una tarea.
Atributos:

  • value: progreso actual.
  • max: progreso total.

Etiqueta <datalist>

Lista de opciones sugeridas para un <input>.
Funcionamiento: permite autocompletar.
Atributos:

  • id: identificador para asociarlo con un list en <input>.

Etiqueta <summary>

Se usa dentro de <details> como título visible del contenido expandible.
Funcionamiento: permite mostrar u ocultar información.
Atributos:

  • No tiene atributos específicos, pero soporta los globales (id, class, etc.).

Conceptos de estructura web

Contenedor (wrapper):
Es un elemento utilizado para agrupar y organizar el contenido de una página web. Generalmente se usa un <div> con una clase o un id que envuelve todo el contenido, facilitando su diseño con CSS.

Cabecera (header):
Es la parte superior de una página o sección. Suele incluir logotipos, menús principales, títulos, barras de búsqueda o elementos de identidad del sitio.

Contenido (content):
Es el área principal de la página web, donde se muestra la información relevante: texto, imágenes, artículos, videos, etc.

Menú (menu):
Es una sección destinada a la navegación. Contiene enlaces que permiten al usuario moverse entre diferentes partes del sitio web.

Pie (footer):
Sección ubicada al final de la página. Incluye información complementaria como derechos de autor, enlaces secundarios, políticas de privacidad, o datos de contacto.

Lateral (sidebar):
Sección secundaria que se coloca normalmente a la derecha o izquierda del contenido principal. Puede contener menús adicionales, widgets, enlaces o anuncios.

Utilidad del contenedor:
El contenedor permite estructurar y organizar la página en bloques, facilitando el diseño, la maquetación con CSS y la adaptación a diferentes dispositivos mediante diseño responsivo.

Etiquetas semánticas de HTML5

Etiqueta <div>:
Es un contenedor genérico que no tiene significado semántico. Se utiliza principalmente para estructurar bloques de contenido y aplicar estilos mediante CSS o manipular elementos con JavaScript.

Etiqueta <article>:
Representa un contenido independiente y autónomo, como un artículo de blog, una noticia, una publicación en un foro o un comentario.

Etiqueta <aside>:
Define un contenido relacionado pero no esencial con respecto al contenido principal. Usualmente se utiliza para barras laterales, notas o información complementaria.

Etiqueta <details>:
Permite mostrar u ocultar contenido adicional que el usuario puede expandir o contraer. Generalmente se usa junto con <summary>.

Etiqueta <footer>:
Representa el pie de página de una sección o del documento. Incluye información adicional como autoría, enlaces legales o créditos.

Etiqueta <header>:
Define la cabecera de una sección o del documento completo. Incluye logotipos, títulos o elementos de navegación.

Etiqueta <main>:
Identifica el contenido principal y único de la página. Solo puede existir un <main> por documento.

Etiqueta <mark>:
Resalta texto dentro del contenido, como si fuera un marcador. Se utiliza para enfatizar información relevante.

Etiqueta <nav>:
Representa una sección de navegación que contiene enlaces principales para moverse dentro del sitio web.

Etiqueta <section>:
Agrupa contenido temáticamente relacionado. Es una división semántica que representa una sección dentro de un documento o página.

Etiqueta <time>:
Representa fechas u horas, y puede incluir el atributo datetime para indicar la fecha en un formato legible por máquinas (ISO 8601).

Meta Viewport

Etiqueta `<meta name=»viewport»>:
Se utiliza para controlar cómo se muestra la página en dispositivos móviles y pantallas pequeñas.
Ejemplo común:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Utilidad de la etiqueta:
Permite que la página sea responsiva, es decir, que se adapte correctamente a diferentes tamaños de pantalla y dispositivos, mejorando la experiencia del usuario en móviles y tabletas.

Otros Artículos