Introducción a HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Es un lenguaje de marcado que define la estructura y el contenido de una página web mediante el uso de etiquetas (tags). HTML no es un lenguaje de programación, sino de marcado, lo que significa que se usa para organizar y dar formato al contenido.

Características principales:

  • Define la estructura de una página web
  • Utiliza elementos (etiquetas) para marcar diferentes partes del contenido
  • Permite incluir otros recursos como imágenes, videos y scripts
  • Es interpretado por los navegadores web para mostrar el contenido

Historia y evolución de HTML

HTML fue creado por Tim Berners-Lee en 1991 como parte de la World Wide Web. Desde entonces ha evolucionado significativamente:

  • HTML 2.0 (1995): Primera versión estandarizada
  • HTML 3.2 (1997): Agregó tablas, applets y flujo de texto alrededor de imágenes
  • HTML 4.01 (1999): Introdujo hojas de estilo (CSS) y scripting
  • XHTML (2000): Versión más estricta basada en XML
  • HTML5 (2014): Versión actual con soporte para multimedia y aplicaciones web modernas

HTML5 introdujo elementos semánticos, soporte nativo para audio y video, canvas para gráficos, y mejoras en APIs para aplicaciones web.

Estructura Básica y Semántica en HTML

Estructura fundamental de una página HTML

Toda página HTML comienza con una estructura básica que define el esqueleto del documento. Esta estructura asegura que los navegadores interpreten correctamente el contenido. 

<!DOCTYPE html>
            <html lang="es">
              <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Título de la página</title>
              </head>
              <body>
                Contenido visible de la página
              </body>
            </html>

Etiquetas esenciales:

  • <!DOCTYPE html>: Declara el tipo de documento (HTML5).
  • <html>: Elemento raíz que contiene todo el documento.
  • <head>: Incluye metadatos, enlaces a estilos y scripts.
  • <title>: Título que aparece en la pestaña del navegador.
  • <body>: Contiene todo el contenido visible de la página.

Estructura semántica en HTML5

HTML5 introduce etiquetas semánticas que describen el significado del contenido, facilitando la accesibilidad, el SEO y el mantenimiento del código. Estas etiquetas ayudan a los navegadores y tecnologías de asistencia a entender mejor la estructura de la página.

  • <header>: Encabezado de la página o sección.
  • <nav>: Navegación principal.
  • <main>: Contenido principal y único de la página.
  • <section>: Sección temática del contenido.
  • <article>: Contenido independiente y reutilizable (como una noticia o entrada de blog).
  • <aside>: Contenido complementario (barras laterales, widgets).
  • <footer>: Pie de página o sección.

Ejemplo de estructura semántica: 

<body>
              <header>Encabezado</header>
              <nav>Menú de navegación</nav>
              <main>
                <section>
                  <article>Contenido principal</article>
                </section>
                <aside>Información adicional</aside>
              </main>
              <footer>Pie de página</footer>
            </body>

Comentarios y buenas prácticas

Los comentarios en HTML ayudan a documentar el código y se escriben así:

<!-- Esto es un comentario -->

Buenas prácticas:

  • Utilizar etiquetas semánticas para mejorar la estructura y accesibilidad.
  • Usar indentación consistente para facilitar la lectura.
  • Cerrar todas las etiquetas correctamente.
  • Utilizar minúsculas para los nombres de las etiquetas y atributos.
  • Incluir el atributo alt en imágenes para accesibilidad.
  • Separar estructura (HTML), presentación (CSS) y comportamiento (JavaScript).
  • Validar el código HTML con herramientas como el validador de W3C.

Elementos de Texto

Encamezadoros HTML

Títulos y párrafos

HTML proporciona 6 niveles de títulos:

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de sección</h3>
...
<h6>Encabezado menor</h6>

Para párrafos:

<p>Este es un párrafo de texto.</p>
<p>Este es otro párrafo.</p>

Formato de texto

HTML ofrece varias etiquetas para formato de texto:

  • <strong> o <b>: Texto en negrita
  • <em> o <i>: Texto en cursiva
  • <u>: Texto subrayado
  • <mark>: Texto resaltado
  • <small>: Texto más pequeño
  • <sup>: Superíndice
  • <sub>: Subíndice
  • <del>: Texto eliminado (tachado)
  • <ins>: Texto insertado (subrayado)

Ejemplo:

<p>Este es un texto <strong>importante</strong> y <em>enfatizado</em>.</p>

Imágenes y Multimedia

Insertar imágenes

Para insertar imágenes:

<img src="imagen.jpg" alt="Descripción de la imagen" width="500" height="300">

Atributos importantes:

  • src: Ruta a la imagen
  • alt: Texto alternativo (accesibilidad y SEO)
  • width y height: Dimensiones (en píxeles o porcentaje)

Enlaces, video y audio

Enlaces:

<a href="https://www.ejemplo.com" target="_blank">Texto del enlace</a>

Video (HTML5):

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta el elemento de video.
</video>

Insertar video desde youtube (HTML5):

<iframe width="560" height="315" src="https://www.youtube.com/embed/mNbnV3aN3KA" title="YouTube video player"
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen></iframe>

Audio (HTML5):

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento de audio.
</audio>

Listas y Tablas

Listas ordenadas y no ordenadas

Lista no ordenada (con viñetas):

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Lista ordenada (numerada):

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Lista de definición:

<dl>
  <dt>Término 1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
</dl>

Tablas básicas

Estructura básica de una tabla:

<table border="1">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

Elementos de tabla:

  • <table>: Contenedor principal
  • <tr>: Fila de tabla
  • <th>: Celda de encabezado
  • <td>: Celda de datos
  • <caption>: Título de la tabla
  • <thead>, <tbody>, <tfoot>: Agrupación semántica

Atributos comunes:

  • border: Grosor del borde
  • colspan: Expandir celda a través de columnas
  • rowspan: Expandir celda a través de filas

Colores en HTML

¿Cómo se usan los colores en HTML?

En HTML, los colores se aplican principalmente a través de CSS usando propiedades como color (para el texto) y background-color (para el fondo). Los colores pueden definirse de varias formas:

  • Nombre del color: red, blue, green, etc.
  • Código hexadecimal: #FF0000 (rojo), #00FF00 (verde), #0000FF (azul).
  • RGB: rgb(255,0,0) (rojo), rgb(0,255,0) (verde).
  • RGBA: Igual que RGB pero con transparencia, por ejemplo rgba(255,0,0,0.5).
  • HSL: hsl(0, 100%, 50%) (rojo).

Ejemplo de uso en HTML y CSS: 

<p style="color: #3498db; background-color: #f0f0f0;">Texto con color personalizado</p>

Tabla interactiva de colores

Prueba y modifica los colores usando los selectores. Haz clic en los códigos para copiarlos.

Color Nombre Hex RGB Selector
#ff6600

¿Cómo funciona? Selecciona un color en la tabla o usa el selector para ver el código hexadecimal y RGB. Haz clic en cualquier código para copiarlo y usarlo en tus estilos CSS.

Editor HTML-CSS-JS

HTML
CSS
JavaScript

Recursos recomendados

Para aprender más sobre la estructura y semántica en HTML, visita la guía de W3Schools: HTML.