Free

Introducción a HTML

Activar audio

Introducción completa a HTML: qué es, cómo funciona, estructura básica, etiquetas esenciales y buenas prácticas para comenzar a construir páginas web profesionales.

Unit 7 of Phase 1

Anterior Siguiente

¿Qué es HTML?
¿Cómo funciona HTML?
Elementos básicos de HTML
Estructura mínima de una página HTML
Buenas prácticas
Enlaces útiles

¿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.