Byspel

Retos para aprender programación

Desarrollo Web HTML5

Guía completa y actualizada para aprender HTML desde cero

por Byspel
Laptop

1️⃣ Introducción

¡Hola! Si estás empezando en el mundo del desarrollo web, has llegado al lugar correcto. HTML (HyperText Markup Language o «Lenguaje de Marcado de Hipertexto») es el esqueleto de todas las páginas web que ves en internet. Sin HTML, no existiría la web tal como la conocemos.

Esta guía es complementaria al video tutorial «Cómo hacer una página web HTML en Bloc de notas», donde aprenderás el uso práctico de HTML paso a paso. Te recomiendo ver primero el video para entender mejor los conceptos:

🎥 VIDEO TUTORIAL RECOMENDADO: Cómo hacer una página web HTML en Bloc de notas

Esta guía servirá como tu manual de referencia para consultar todas las etiquetas HTML mientras practicas lo aprendido en el video.

🌟 ¡Visita Nuestra Tienda para Programadores! 🌟

Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!

2️⃣ ¿Qué es una etiqueta HTML?

Una etiqueta es una instrucción que le dice al navegador cómo mostrar el contenido. Se escriben entre símbolos de menor y mayor: <etiqueta>.

Partes de una etiqueta:

  • Etiqueta de apertura: <p>
  • Contenido: Texto que va dentro
  • Etiqueta de cierre: </p>
<p>Este es un párrafo.</p>

Etiquetas que no se cierran:

Algunas etiquetas no necesitan cierre porque no contienen texto:

<br>  <!-- Salto de línea -->
<img> <!-- Imagen -->

3️⃣ Estructura completa de un documento HTML

Toda página web tiene una estructura básica:

<!DOCTYPE html>

Declara que el documento es HTML5.

<!DOCTYPE html>

<html>

Contenedor principal de toda la página.

<html lang="es">
<!-- Todo el contenido va aquí -->
</html>

<head>

Información para el navegador (no se ve en la página).

<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
</head>

<title>

Título que aparece en la pestaña del navegador.

<title>Mi primera página web</title>

<meta>

Metadatos (información sobre la página).

<meta charset="UTF-8"> <!-- Define la codificación de caracteres -->
<meta name="description" content="Descripción de mi página">

<link>

Enlaza archivos externos (como CSS).

<link rel="stylesheet" href="estilos.css">

<body>

Contenido visible de la página (todo lo que ven los usuarios).

<body>
  <h1>¡Hola mundo!</h1>
  <p>Mi primera página web.</p>
</body>

4️⃣ Etiquetas de texto (muy usadas)

<h1> a <h6> – Títulos

Jerarquía de títulos (h1 es el más importante).

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

<p> – Párrafos

Contenedor de texto en párrafos.

<p>Este es un párrafo normal.</p>

<span> – Contenedor genérico en línea

Agrupa elementos en línea para darles estilo.

<p>Texto <span style="color: red;">rojo</span> en medio.</p>

<strong> – Texto importante

Resalta texto con importancia semántica (aparece en negrita).

<strong>¡Atención! Esto es importante.</strong>

<em> – Texto enfatizado

Da énfasis al texto (aparece en cursiva).

<em>Texto con énfasis.</em>

<b> e <i> – Negrita y cursiva visual

Solo cambian la apariencia (sin significado semántico).

<b>Negrita</b> e <i>cursiva</i> visual.

<mark> – Texto resaltado

Destaca texto como con marcador.

<mark>Texto resaltado</mark>

<small> – Texto pequeño

Texto de tamaño reducido (para notas legales, etc.).

<small>Texto de tamaño pequeño.</small>

<br> – Salto de línea

Fuerza un salto de línea.

Primera línea<br>Segunda línea

<hr> – Línea horizontal

Separador visual entre secciones.

<p>Texto arriba</p>
<hr>
<p>Texto abajo</p>

5️⃣ Etiquetas de enlaces y multimedia

<a> – Enlaces

Crea hipervínculos a otras páginas o recursos.

<a href="https://ejemplo.com">Ir a ejemplo.com</a>
<a href="#seccion2">Ir a sección 2</a> <!-- Enlace interno -->
<a href="mailto:correo@ejemplo.com">Enviar correo</a>

Atributos importantes:

  • href: Dirección del enlace
  • target="_blank": Abre en nueva pestaña

<img> – Imágenes

Inserta imágenes en la página.

<img src="imagen.jpg" alt="Descripción de la imagen">

Atributos importantes:

  • src: Ruta de la imagen
  • alt: Texto alternativo (importante para accesibilidad)

<audio> y <video> – Multimedia

Reproduce audio y video.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
</video>

<source> – Fuente multimedia

Especifica archivos multimedia alternativos.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta video.
</video>

6️⃣ Etiquetas de listas

Listas desordenadas (<ul>)

Listas con viñetas (sin orden específico).

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

Listas ordenadas (<ol>)

Listas numeradas (con orden).

<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Listas de definición (<dl>)

Listas de términos y definiciones.

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para páginas web</dd>
  <dt>CSS</dt>
  <dd>Lenguaje para estilos</dd>
</dl>

7️⃣ Etiquetas de estructura semántica (HTML5)

Estas etiquetas mejoran la accesibilidad y ayudan a los motores de búsqueda a entender tu página.

<header> – Cabecera

Contenido introductorio (logo, menú, etc.).

<header>
  <h1>Mi sitio web</h1>
</header>

<nav> – Navegación

Contiene enlaces de navegación principales.

<nav>
  <a href="/">Inicio</a>
  <a href="/nosotros">Nosotros</a>
</nav>

<main> – Contenido principal

Contenido central único de la página.

<main>
  <article>...</article>
</main>

<section> – Sección

Agrupa contenido temáticamente relacionado.

<section>
  <h2>Nuestros servicios</h2>
  <p>Descripción de servicios...</p>
</section>

<article> – Artículo

Contenido independiente y autocontenido.

<article>
  <h2>Título del artículo</h2>
  <p>Contenido completo...</p>
</article>

<aside> – Contenido lateral

Información relacionada indirectamente.

<aside>
  <h3>Artículos relacionados</h3>
  <ul>...</ul>
</aside>

<footer> – Pie de página

Información final (contacto, derechos, etc.).

<footer>
  <p>© 2023 Mi sitio web</p>
</footer>

8️⃣ Etiquetas genéricas de organización

<div> – División

Contenedor genérico en bloque (sin significado semántico).

<div class="contenedor">
  <p>Contenido aquí</p>
</div>

<span> – Fragmento en línea

Contenedor genérico en línea.

<p>Texto <span class="resaltado">resaltado</span> aquí.</p>

Cuándo usarlas:

  • Cuando no hay una etiqueta semántica adecuada
  • Para agrupar elementos y darles estilo con CSS

Cuándo NO usarlas:

  • Cuando existe una etiqueta semántica que describe mejor el contenido
  • Evitar «divitis» (usar demasiados divs innecesarios)

9️⃣ Etiquetas de tablas

Estructura básica:

<table>
  <thead>  <!-- Encabezado -->
    <tr>   <!-- Fila -->
      <th>Nombre</th>  <!-- Celda de encabezado -->
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>  <!-- Cuerpo -->
    <tr>
      <td>María</td>  <!-- Celda normal -->
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>  <!-- Pie -->
    <tr>
      <td>Total:</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

🔟 Etiquetas de formularios

Los formularios recogen información de los usuarios.

<form> – Formulario

Contenedor de todos los campos.

<form action="/procesar" method="POST">
  <!-- Campos aquí -->
</form>

<label> – Etiqueta de campo

Describe un campo del formulario.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre">

<input> – Campo de entrada

Recoge datos del usuario.

<input type="text" placeholder="Escribe tu nombre">
<input type="email" required>
<input type="password">
<input type="checkbox">
<input type="radio" name="grupo">
<input type="submit" value="Enviar">

<textarea> – Área de texto

Campo para textos largos.

<textarea rows="4" cols="50">Texto por defecto</textarea>

<select> y <option> – Lista desplegable

Menú de opciones.

<select>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
</select>

<button> – Botón

Botón para acciones.

<button type="submit">Enviar formulario</button>
<button type="button">Acción personalizada</button>

1️⃣1️⃣ Etiquetas HTML menos usadas pero existentes

<iframe> – Marco interno

Incrusta otra página web.

<iframe src="https://ejemplo.com" width="300" height="200"></iframe>

<details> y <summary> – Acordeón

Contenido expandible/colapsable.

<details>
  <summary>Ver más información</summary>
  <p>Contenido adicional aquí.</p>
</details>

<progress> – Barra de progreso

Muestra progreso de una tarea.

<progress value="70" max="100">70%</progress>

<meter> – Medidor

Indica un valor dentro de un rango.

<meter value="0.6" min="0" max="1">60%</meter>

<time> – Fecha/hora

Marca información temporal.

<time datetime="2023-12-25">Navidad 2023</time>

<code> y <pre> – Código

Muestra código de programación.

<pre><code>
  function saludar() {
    console.log("¡Hola!");
  }
</code></pre>

<blockquote> y <cite> – Citas

Muestra citas textuales.

<blockquote>
  <p>La vida es lo que pasa mientras estás ocupado haciendo otros planes.</p>
  <cite>John Lennon</cite>
</blockquote>

1️⃣2️⃣ Etiquetas obsoletas o no recomendadas

Estas etiquetas NO deben usarse en HTML moderno:

<font>, <center>, <big>

Controlaban apariencia directamente.

<!-- ❌ NO HAGAS ESTO -->
<font color="red">Texto rojo</font>
<center>Texto centrado</center>
<big>Texto grande</big>

Problema: Mezclan contenido con presentación. Usa CSS en su lugar.

<marquee> – Texto en movimiento

Creaba texto que se desplazaba.

<!-- ❌ NO HAGAS ESTO -->
<marquee>Texto en movimiento</marquee>

Problema: Distrae, malas prácticas de accesibilidad.

<strike> – Texto tachado

Mostraba texto tachado.

<!-- ❌ NO HAGAS ESTO -->
<strike>Texto tachado</strike>

Alternativa: Usa <del> para contenido eliminado o CSS para estilo visual.

1️⃣3️⃣ Buenas prácticas en HTML

1. Usa etiquetas semánticas

<!-- ✅ BIEN -->
<header>
  <nav>...</nav>
</header>

<!-- ❌ MAL -->
<div id="header">
  <div class="nav">...</div>
</div>

2. Mantén tu código ordenado

  • Usa indentación (sangría)
  • Comenta cuando sea necesario
  • Ordena las etiquetas lógicamente

3. No uses HTML para estilos

<!-- ❌ MAL (HTML no debe controlar colores) -->
<h1 style="color: blue; font-size: 24px;">Título</h1>

<!-- ✅ BIEN (CSS controla la apariencia) -->
<h1 class="titulo-principal">Título</h1>

4. Piensa en accesibilidad

  • Usa alt en imágenes
  • Estructura lógica con encabezados
  • Contraste adecuado (con CSS)
  • Etiquetas ARIA cuando sea necesario

1️⃣4️⃣ Cierre del artículo

¡Felicidades! Ahora conoces todas las etiquetas HTML importantes que necesitas para empezar. Recuerda que esta guía es un manual de referencia para consultar mientras practicas.

📺 Vuelve al video tutorial

Para entender cómo usar estas etiquetas en un proyecto real, te recomiendo volver al video donde construimos una página web paso a paso:

🎬 Ver tutorial paso a paso: Cómo hacer una página web HTML en Bloc de notas

🚀 Tu próximo paso: CSS

Una vez domines HTML, el siguiente paso natural es aprender CSS (Cascading Style Sheets), el lenguaje que da estilo y belleza a tus páginas web.

💡 Sigue aprendiendo

La práctica constante es clave. Crea pequeños proyectos, experimenta con las etiquetas y consulta esta guía cuando lo necesites.

Recuerda: HTML es solo el comienzo de tu viaje en el desarrollo web. ¡Sigue aprendiendo y construyendo!

Esta guía es complementaria al curso completo disponible en mi canal de YouTube. Para preguntas específicas o proyectos más avanzados, visita nuestra comunidad de aprendizaje en línea.

Entradas relacionadas

Cómo Publicar tu Página Web en GitHub Pages Gratis (HTML y Bootstrap)

Cómo Crear una Página Web para una Tienda de Videojuegos con HTML, CSS y Bootstrap

Cómo Poner un Color Degradado de Fondo en HTML: Guía Completa

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *