Curso HTML 3.2 Etiquetas html, head y body

Curso HTML 3.2: Etiquetas `html`, `head` y `body`

En este punto profundizaremos en la estructura básica de un documento HTML tal como se definió en HTML 3.2, describiendo cada una de las tres etiquetas fundamentales: html, head y body. Veremos sus atributos, roles y ejemplos de uso con comentarios.

1. Etiqueta <html>

Representa el elemento raíz de un documento HTML. Debe envolver siempre a head y a body. En HTML 3.2 se podían usar atributos como:

lang: especifica el idioma natural del contenido (p. ej.: es, en).
dir: dirección del texto (ltr o rtl).
xmlns: espacio de nombres XML (usado en XHTML).
manifest: para especificar un archivo de caché de aplicaciones (AppCache en HTML 3.2).

Ejemplo mínimo de uso de <html> con atributos:

<html lang='es' dir='ltr' manifest='cache.appcache'>
  <!-- Aquí irán head y body -->
</html>

2. Etiqueta <head>

Contiene metadatos y recursos necesarios antes de que se interprete el contenido visible. Su orden típico en HTML 3.2:

<title>: título de la página.
<meta charset='...>: en HTML 3.2 se usaban sintaxis propias para controlar codificación.
<meta http-equiv='...'>: instructivos como “Content-Type”, “Refresh”, etc.
<base href='...'/>: URL base para enlaces relativos.
<link rel='...' href='...'/>: hojas de estilo externas, iconos.
<script src='...'></script>: scripts externos (JavaScript).
<noscript>: contenido alternativo si JS está deshabilitado.

Ejemplo completo de <head> en HTML 3.2:

<head>
  <!-- 1. Título de la pestaña/navegador -->
  <title>Mi sitio en HTML 3.2</title>

  <!-- 2. Declarar codificación de caracteres -->
  <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>

  <!-- 3. Enlace a hoja de estilo externa -->
  <link rel='stylesheet' type='text/css' href='styles.css'>

  <!-- 4. Script externo de comportamiento -->
  <script type='text/javascript' src='script.js'></script>
</head>

3. Etiqueta <body>

Contiene todo el contenido visible (texto, imágenes, formularios, tablas, etc.). En HTML 3.2 se organizaba usando:

<h2>...</h2>, <h3>...</h3>, etc., para encabezados.
<p>...</p> para párrafos.
<ul>/<ol>/<li> para listas.
<table>/<tr>/<td> para datos tabulares.
<img src='...' alt='...'/> para imágenes.
<a href='...'>...</a> para enlaces.
<form>, <input>, <textarea>, <select> para formularios.

Ejemplo de estructura típica dentro de <body>:

<body>
  <!-- Encabezado principal de sección -->
  <h2>Bienvenido a mi sitio</h2>

  <!-- Párrafo introductorio -->
  <p>Este es un ejemplo de documento en HTML 3.2 que ilustra las etiquetas <html>, <head> y <body>.</p>

  <!-- Lista de características -->
  <ul>
    <li>Estructura semántica</li>
    <li>Soporte para metadatos en head</li>
    <li>Componentes básicos visibles</li>
  </ul>

  <!-- Tabla de datos de ejemplo -->
  <table border='1'>
    <tr>
      <th>Elemento</th>
      <th>Función</th>
    </tr>
    <tr>
      <td><code><h2></code></td>
      <td>Título de segundo nivel</td>
    </tr>
    <tr>
      <td><code><p></code></td>
      <td>Párrafo de texto</td>
    </tr>
  </table>

  <!-- Pie de página simple -->
  <p><small>© 2023 Mi Sitio en HTML 3.2</small></p>
</body>

4. Buenas prácticas y detalles avanzados

Colocar siempre <title> como primer elemento de <head> para optimización SEO.
Usar lang y dir en <html> para accesibilidad y motores de búsqueda.
Agrupar scripts al final de <body> si no afectan la carga inicial del contenido.
En HTML 3.2 se usaban tablas anidadas para maquetar. Hoy se recomienda usar CSS y layout semántico, pero en su momento era la práctica habitual.
Validar siempre contra el DTD de HTML 3.2 si se necesita retrocompatibilidad con navegadores antiguos.

Curso HTML 3.2 Etiquetas html, head y body