HTML: El Esqueleto de la Web

Todo sitio web comienza con un archivo de Markup (Marcado). HTML no es un lenguaje de programación, sino un estándar de estructuración que define el contenido mediante una jerarquía de objetos.

Conceptos Fundamentales

Para dominar la web, debemos internalizar estos 5 términos clave:

1. Tag (Etiqueta): Los bloques de construcción básicos que delimitan el contenido (ej: <p>, <div>).
2. Attribute (Atributo): Propiedades adicionales que proporcionan información o configuración a una etiqueta (ej: src, href).
3. Element (Elemento): La unidad completa que incluye la etiqueta de apertura, el contenido y la etiqueta de cierre.
4. Semantic (Semántico): El uso de etiquetas que describen el significado del contenido, no su apariencia (ej: <article>, <nav>).
5. Markup (Marcado): El sistema de etiquetas que rodea el texto para darle estructura jerárquica.

Ejemplo de Manipulación en JavaScript

Aunque HTML define la estructura, a menudo usamos JavaScript para interactuar con un Element (Elemento) y modificar su Attribute (Atributo) dinámicamente:

// Seleccionando un Element del DOM
const headerElement = document.querySelector('header');

// Modificando un Attribute mediante código
headerElement.setAttribute('class', 'main-nav');

// Creando un nuevo Tag de forma dinámica
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Contenido generado mediante Markup dinámico';

console.log(`Elemento modificado: ${headerElement.tagName}`);

El uso de código Semantic (Semántico) es crucial no solo para la accesibilidad, sino también para que los buscadores entiendan la relevancia de cada Tag (Etiqueta) dentro del documento.