Introducción a HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para definir la estructura y el contenido de las páginas web. Funciona como el "esqueleto" de cualquier sitio, organizando textos, imágenes, enlaces y otros elementos de forma coherente para que el navegador los presente adecuadamente. Sin HTML, una página web carecería de orden y sentido.

Recursos recomendados:

¿Cómo funciona HTML?

HTML se basa en etiquetas que rodean el contenido, asignándoles un significado o función. El navegador interpreta estas etiquetas y las muestra como elementos visuales estructurados en la pantalla. Por ejemplo, <p> indica un párrafo y <h1> un título principal.

Recursos recomendados:

Introducción a HTML en MDN

Elementos básicos de HTML

Etiquetas (Tags):

Se escriben entre < y > e indican la función del contenido que encierran. La mayoría de las etiquetas tienen una etiqueta de apertura (<h1>) y una de cierre (</h1>).
Atributos:

Añaden información adicional a la etiqueta, modificando su comportamiento. Por ejemplo, <img src="imagen.jpg" alt="Descripción"> utiliza:
- src para señalar la ruta de la imagen.
- alt para describirla, mejorando la accesibilidad y la comprensión del contenido por parte de lectores de pantalla y motores de búsqueda.
Anidamiento (Nesting):

Las etiquetas pueden contener otras etiquetas, creando una estructura jerárquica. Por ejemplo:
```
<div>
  <p>This is a paragraph inside a div</p>
</div>
```
Esto permite una organización lógica y modular del contenido.
La Sección Head y su Importancia:

Dentro del documento HTML, la sección <head> tiene un rol crucial. Aunque su contenido no se muestra directamente en la página, el <head> es donde se define información y configuraciones esenciales, como:
- Metadatos: Información que describe la página, su codificación de caracteres, palabras clave, descripción, idioma y más. Esta información ayuda a los navegadores, motores de búsqueda y redes sociales a entender mejor el contenido.
- Título de la Página: La etiqueta <title> dentro del <head> establece el título que se muestra en la pestaña del navegador y que los motores de búsqueda utilizan como encabezado principal.
- Vínculos a Recursos Externos: A través de etiquetas como <link>, se pueden incluir hojas de estilo (CSS), íconos del sitio (favicon) y fuentes externas.
- Scripts y Configuraciones Iniciales: Aunque generalmente se recomienda colocar scripts antes del cierre del </body>, algunos metadatos o librerías pueden ir en el <head> para garantizar que estén listos cuando el documento se renderice.
En resumen, el <head> es el lugar donde se prepara el terreno para que el navegador entienda cómo manejar el contenido del <body>, optimizando el rendimiento, la accesibilidad y el SEO.
Recursos recomendados:
- Elementos HTML en MDN
- La sección Head del documento en MDN

Estructura mínima de una página HTML

Un documento HTML comienza con una estructura básica:

<!DOCTYPE html>
<html>
  <head>
    <title>My first oage</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>¡Hello World!</h1>
    <p>This is my first paragraph</p>
  </body>
</html>

Elementos clave:

<!DOCTYPE html>: Indica el uso de HTML5.
<html>: Raíz del documento.
<head>: Contiene metadatos, el título y enlaces a recursos externos (estilos, scripts, fuentes).
<body>: Contiene el contenido visible y con el que el usuario interactúa.

Recursos recomendados:

Buenas prácticas

Uso de minúsculas en las etiquetas: Mejor legibilidad y coherencia.
Cierre adecuado de las etiquetas: Evita problemas de estructura.
Comentarios para documentar:  Ayudan a entender el código, sobre todo en proyectos colaborativos.