<header>

Semana 01: Introducción a HTML

Clase de Diseño Web — Estructura y semántica de documentos HTML.

<main>
<article>

1. Textos y encabezados

<section>

Jerarquía de encabezados

Encabezado h4 — cuarto nivel

Encabezado h5 — quinto nivel
Encabezado h6 — sexto nivel (el menor)

Formato de texto en línea

El texto en negrita usa la etiqueta <strong> (indica importancia semántica). El texto en cursiva usa <em> (énfasis semántico). También existe negrita visual con <b> y cursiva visual con <i>, pero sin significado semántico. Texto resaltado con <mark>. Texto tachado con <del> (indica contenido eliminado). Texto subrayado/insertado con <ins>. Subíndice: H2O   |   Superíndice: x2

<blockquote> "HTML (HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web."
— MDN Web Docs

El código se escribe con la etiqueta <code>. Para bloques de código multilínea se usa <pre>: 

<!-- Ejemplo de estructura básica -->
<html>
  <head> ... </head>
  <body> ... </body>
</html>
<article>

2. Listas

Lista no ordenada — <ul>

  • HTML — estructura y contenido
  • CSS — diseño y estilos visuales
  • JavaScript — interactividad y comportamiento
  • Herramientas de desarrollo:
    • Visual Studio Code
    • DevTools del navegador

Lista ordenada — <ol>

  1. Escribir el HTML (estructura)
  2. Aplicar CSS (estilos)
  3. Agregar JavaScript (interactividad)
  4. Probar en el navegador
  5. Publicar en la web

Lista de definiciones — <dl>

HTML
HyperText Markup Language — lenguaje de marcado para la web.
Etiqueta semántica
Etiqueta HTML cuyo nombre describe el significado del contenido (ej: <article>, <nav>, <footer>).
Atributo
Información adicional dentro de una etiqueta de apertura (ej: class="...", id="...").
<article>

3. Tablas

Las tablas son para datos tabulares (filas y columnas), NO para diseñar el layout de la página.

<table>
Semana Tema Tecnología Estado
01 Estructura básica y semántica HTML5 ✓ Actual
02 Diseño y estilos CSS3 Pendiente
03 Interactividad JavaScript Pendiente
04 Diseño responsivo Flexbox / Grid Pendiente
Plan de estudios — Diseño Web 2025
<article>

4. Multimedia

Imágenes — <img>

Imagen de ejemplo con texto explicativo
<figure> Ejemplo de figure con figcaption
<figcaption> Figura 1. Uso correcto de <figure> y <figcaption> para imágenes semánticas.

Enlace externo — <a>

Visita la documentación oficial: MDN Web Docs — HTML

<article>

5. Formulario básico

<form>