# HTML Semestre 2, 2026 ## Definición * HyperText Markup Language * Es un lenguaje de marcado * Describe la estructura de una página web ## Usos * Definir contenido * Organizar información * Dar significado a los elementos ## Origen * Creado por Tim Berners-Lee * Año 1991 * Proyecto del CERN ## Evolución * HTML 1.0 – documentos simples * HTML 2.0 – formularios * HTML 4.0 – separación contenido / estilo * HTML5 – semántica y multimedia ## Funcionamiento * El navegador interpreta etiquetas * Las etiquetas describen contenido * No es un lenguaje de programación ![Tim](/courses/2026/cc3062/assets/flow.png) ## Estructura mínima ```html Mi página

Hola mundo

``` ## Partes del documento ### DOCTYPE * Indica versión de HTML * Evita errores de compatibilidad ### head * Metadatos * Título * Configuración ### body * Contenido visible * Texto, imágenes, links ## Tags (etiquetas) ### Definición * Marca un tipo de contenido * Usa símbolos < > ### Ejemplo ```html

Esto es un párrafo

``` ## Tipos de elementos ### Elementos de bloque * Ocupan todo el ancho * Generan salto de línea Ejemplos: * div * p * h1 – h6 * section ### Elementos en línea * Ocupan solo su contenido * No generan salto Ejemplos: * span * a * strong * em ## HTML semántico ### Semantico * Etiquetas con significado * Describen el contenido ### Usos * Mejor accesibilidad * Mejor SEO * Código más claro ## Etiquetas comunes ### Principales * header * nav * main * section * article * footer ### Ejemplo ```html

Noticia

``` ## Texto básico ### Encabezados * h1 a h6 * Jerarquía de títulos ### Párrafos * Etiqueta p * Texto normal ## Links * Navegación entre páginas * Elemento clave de la web ### Ejemplo ```html Ir ``` ## Imágenes * No tienen cierre * Usan atributos ### Ejemplo ```html Logo ``` ## Listas ### Listas no ordenadas ```html ``` ### Listas ordenadas ```html
  1. Paso
``` ## Tablas * Datos estructurados * Información comparativa ### Ejemplo simple ```html
Producto Precio
Manzana $1
``` ## Formularios * Enviar datos * Interacción con usuarios ### Ejemplo ```html
``` ## Rutas en HTML ### Problema común * Archivos no encontrados * Imágenes rotas ### Tipos de rutas * Absolutas * Relativas ## Rutas absolutas * Ruta completa del sistema * No portable ### Ejemplo incorrecto ```html ``` ## Rutas relativas * Funcionan en servidor * Portables ### Ejemplo ```html ``` ## Tipos de rutas relativas | Tipo | Ejemplo | | ------------ | ---------------- | | Mismo nivel | index.html | | Subcarpeta | img/logo.png | | Nivel arriba | ../archivo.html | | Desde raíz | /assets/logo.png | ## Recomendaciones * Usar HTML semántico * Mantener estructura clara * Usar rutas relativas * Indentar código