Guía de Estudio HTML5

Resumen técnico basado en el contenido de la bibliografía.

1. Fundamentos e Historia
  • Origen: Creado por Timothy John Berners-Lee en el C.E.R.N. (1989-1991).
  • El Trío Fundacional: Berners-Lee desarrolló el HTML (Marcado), el HTTP (Protocolo) y la URL (Localizador).
  • Definición: Significa HyperText Markup Language. Define la estructura y el contenido.
  • El Estándar: Definido por la W3C (World Wide Web Consortium).
2. Reglas Gramaticales Obligatorias

Para evitar errores de lectura en el navegador:

  • Cierre de Etiquetas: Todas deben cerrarse. <p>Texto</p>.
  • Huérfanas: No tienen cierre manual. Ejemplo: <br />, <img />.
  • Anidamiento: El último elemento en abrir debe ser el primero en cerrar.
  • Atributos: Sus valores deben ir siempre entre comillas. 
<!-- Ejemplo de anidamiento correcto -->
<p>Este es un texto <strong>importante</strong></p>
3. Estructura Básica del Documento 
<!DOCTYPE html> <!-- Indica que es HTML5 -->
<html>          <!-- Contenedor principal -->
  <head>        <!-- Información técnica y lógica -->
    <meta charset="utf-8"> <!-- Acentos y caracteres especiales -->
    <title>Título de la pestaña</title>
  </head>
  <body>        <!-- Todo el contenido visual -->
  </body>
</html>
4. Elementos de Texto y Jerarquía
  • Títulos: Van del <h1> (principal) al <h6> (menor importancia).
  • Énfasis y Resaltado:
    • <em>: Enfatiza (cursiva).
    • <strong>: Importancia fuerte (negrita).
    • <mark>: Resaltado visual (amarillo por defecto).
  • Comentarios: No se ven en el sitio: <!-- Comentario -->.
5. Listas y Enlaces

Listas:

<ul> <!-- No ordenada (puntos) -->
  <li>Item</li>
</ul>

<ol> <!-- Ordenada (1, 2, 3) -->
  <li>Item</li>
</ol>

Enlaces: El atributo clave es href. 

<a href="https://google.com">Ir a Google</a>
6. Imágenes (<img />)

Atributos fundamentales:

  • src: Ruta o fuente de la imagen.
  • alt: Texto alternativo. Indispensable para accesibilidad y SEO.
  • title: Texto opcional que se ve al posar el ratón. 
<img src="logo.png" alt="Logotipo de la empresa" title="Ver inicio" />
7. Tablas (<table>)
  • <tr>: Fila.
  • <td>: Celda normal.
  • <th>: Celda de encabezado (negrita).
  • Fusión: colspan (unir columnas), rowspan (unir filas).

Estructura avanzada: Es buena práctica poner tfoot antes de tbody para la optimización de carga. 

<table>
  <thead>...</thead>
  <tfoot>...</tfoot>
  <tbody>...</tbody>
</table>
8. Formularios (<form>)

Atributos: action (a donde va) y method (get o post).

  • Input types: password, email, number, checkbox, radio.
  • Label: Debe usar for vinculado al id del input.
  • Autofocus: El cursor aparece allí automáticamente al abrir.
  • Button: El tipo por defecto es submit. 
<label for="usr">Usuario:</label>
<input type="text" id="usr" required autofocus>
9. HTML5 Semántico

Contenedores con significado para el SEO:

<header> Cabecera
<nav> Navegación
<section> Temas
<article> Noticia/Post
<aside> Lateral
<footer> Pie

También destaca <figure> y <figcaption> para imágenes con pie de foto.