Curso HTML 1.3 Qué es HTML y para qué sirve

Qué es HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. No es un lenguaje de programación, sino un sistema de etiquetado que define la estructura y el significado del contenido que se muestra en un navegador. A través de etiquetas rodeadas por < >, HTML informa al navegador cómo debe organizar texto, imágenes, enlaces, tablas y otros elementos.

Definición y propósito

Cada etiqueta HTML describe la función de un fragmento de contenido. Por ejemplo, <p> indica un párrafo, <a> un enlace y <table> una tabla. Los navegadores interpretan estas etiquetas y generan la representación visual correspondiente.

Historia y evolución

• 1991: Tim Berners-Lee publica la primera especificación.
• 1995–1997: HTML 2.0 y 3.2 amplían formularios y tablas.
• 1999: HTML 4.01 introduce separación de contenido y presentación.
• 2008: Comienza el desarrollo de HTML5, estandarizado en 2014.
• HTML5: Añade APIs, semántica avanzada, multimedia nativa y accesibilidad.

Para qué sirve HTML

HTML es la columna vertebral de cualquier página web. Sus principales usos incluyen:

• Estructurar el contenido (títulos, párrafos, listas, tablas).
• Insertar y enlazar recursos externos (imágenes, vídeos, hojas de estilo, scripts).
• Definir la semántica del contenido para SEO y accesibilidad.
• Servir de base a tecnologías complementarias: CSS para diseño y JavaScript para interactividad.

Estructura típica sin etiqueta <body> ni declaración DOCTYPE

A continuación un ejemplo del contenido esencial que iría dentro de un documento HTML, sin incluir la declaración de documento ni la etiqueta <body>:

<head>
  <meta charset='UTF-8'>
  <title>Mi página de ejemplo</title>
</head>


<header>
  <h2>Cabecera del sitio</h2>
</header>

<nav>
  <ul>
    <li><a href='index.html'>Inicio</a></li>
    <li><a href='contacto.html'>Contacto</a></li>
  </ul>
</nav>

<main>
  <section>
    <h3>Sección principal</h3>
    <p>Aquí va el contenido más relevante.</p>
  </section>
</main>

<footer>
  <p>Pie de página con información de derechos.</p>
</footer>
  

Elementos y etiquetas fundamentales

Estos son algunos de los elementos más usados en HTML y su propósito:

Ejemplos prácticos

1. Enlaces e imágenes

<!-- Enlace externo con atributo title -->
<a href='https://www.ejemplo.com' title='Visita Ejemplo'>Visitar Ejemplo</a>

<!-- Imagen con texto alternativo -->
<img src='logo.png' alt='Logotipo de la empresa'>
  

2. Listas y tablas

<!-- Lista ordenada -->
<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

<!-- Tabla de precios -->
<table>
  <tr>
    <th>Producto</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Manzanas</td>
    <td>$1.20/kg</td>
  </tr>
  <tr>
    <td>Naranjas</td>
    <td>$1.00/kg</td>
  </tr>
</table>
  

3. Semántica avanzada

<!-- Artículo con roles ARIA para accesibilidad -->
<article role='article'>
  <h3>Título del artículo</h3>
  <p>Contenido en un contexto semántico.</p>
</article>

<!-- Barra lateral como complemento -->
<aside role='complementary'>
  <h4>Enlaces relacionados</h4>
  <ul>
    <li><a href='#tema1'>Tema 1</a></li>
  </ul>
</aside>