Skip to content
Logo de la documentación HoneyCode

2. Elementos Básicos de HTML

Los elementos HTML son los bloques de construcción fundamentales de cualquier página web. Cada elemento está compuesto por etiquetas que definen su propósito y comportamiento.

🏷️ Etiquetas y su Sintaxis

Section titled “🏷️ Etiquetas y su Sintaxis”

Anatomía de una etiqueta HTML

Section titled “Anatomía de una etiqueta HTML”

Una etiqueta HTML tiene una estructura específica que debes conocer:

<nombre atributo="valor">Contenido</nombre>
  ↑        ↑        ↑        ↑        ↑
  |        |        |        |        └─ Etiqueta de cierre
  |        |        |        └────────── Contenido del elemento
  |        |        └─────────────────── Valor del atributo
  |        └──────────────────────────── Atributo
  └───────────────────────────────────── Etiqueta de apertura

Tipos de etiquetas

Section titled “Tipos de etiquetas”

Etiquetas que requieren apertura y cierre:

<!-- Párrafo -->
<p>Este es un párrafo de texto.</p>


<!-- Título -->
<h1>Este es un título</h1>


<!-- Enlace -->
<a href="https://ejemplo.com">Visitar sitio</a>


<!-- División -->
<div>Contenedor genérico</div>


<!-- Span -->
<span>Texto en línea</span>


<!-- Lista -->
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>


<!-- Tabla -->
<table>
  <tr>
    <td>Celda</td>
  </tr>
</table>

Características:

  • ✅ Tienen etiqueta de apertura <tag>
  • ✅ Tienen etiqueta de cierre </tag>
  • ✅ Pueden contener texto u otros elementos
  • ✅ Son la mayoría de las etiquetas HTML

🎯 Etiquetas Semánticas vs No Semánticas

Section titled “🎯 Etiquetas Semánticas vs No Semánticas”

¿Qué es la semántica en HTML?

Section titled “¿Qué es la semántica en HTML?”

La semántica se refiere al significado de las etiquetas. Una etiqueta semántica describe claramente su propósito tanto para el navegador como para el desarrollador.

Etiquetas No Semánticas ❌

Section titled “Etiquetas No Semánticas ❌”

No describen su contenido:

<!-- Div genérico - no dice nada sobre su contenido -->
<div>
  <div>
    <div>Título del sitio</div>
    <div>
      <div>Inicio</div>
      <div>Servicios</div>
    </div>
  </div>


  <div>
    <div>Artículo principal</div>
  </div>


  <div>Copyright 2024</div>
</div>


<!-- Span genérico - no indica propósito -->
<span>Texto importante</span>
<span>Fecha: 15/01/2024</span>

Problemas:

  • ❌ No se entiende el propósito del contenido
  • ❌ Difícil de mantener
  • ❌ Malo para SEO
  • ❌ Mala accesibilidad

Etiquetas Semánticas ✅

Section titled “Etiquetas Semánticas ✅”

Describen claramente su contenido:

<!-- Estructura semántica clara -->
<body>
  <header>
    <h1>Título del sitio</h1>
    <nav>
      <a href="#inicio">Inicio</a>
      <a href="#servicios">Servicios</a>
    </nav>
  </header>


  <main>
    <article>
      <h2>Artículo principal</h2>
      <p>Contenido...</p>
    </article>
  </main>


  <footer>
    <p>Copyright 2024</p>
  </footer>
</body>


<!-- Etiquetas semánticas específicas -->
<strong>Texto importante</strong>
<time datetime="2024-01-15">15/01/2024</time>

Beneficios:

  • ✅ Código autodescriptivo
  • ✅ Fácil de mantener
  • ✅ Mejor SEO
  • ✅ Mayor accesibilidad

💬 Comentarios en HTML

Section titled “💬 Comentarios en HTML”

Los comentarios son notas en el código que el navegador ignora. Son útiles para documentar y organizar el código.

Sintaxis de comentarios

Section titled “Sintaxis de comentarios”
<!-- Este es un comentario de una línea -->


<!--
  Este es un comentario
  de múltiples líneas
  que puede abarcar varias líneas
-->


<!-- Comentario con información útil -->
<header>
  <!-- Navegación principal del sitio -->
  <nav>
    <a href="#inicio">Inicio</a>
  </nav>
</header>

Usos prácticos de los comentarios

Section titled “Usos prácticos de los comentarios”

1. Documentar secciones 📝

<!-- ==================== -->
<!-- HEADER - Encabezado  -->
<!-- ==================== -->
<header>
  <h1>Mi Sitio</h1>
</header>


<!-- ==================== -->
<!-- MAIN - Contenido     -->
<!-- ==================== -->
<main>
  <p>Contenido principal</p>
</main>


<!-- ==================== -->
<!-- FOOTER - Pie         -->
<!-- ==================== -->
<footer>
  <p>Copyright 2024</p>
</footer>

2. Desactivar código temporalmente 🔧

<!-- Código desactivado temporalmente
<div class="banner-promocional">
  <p>¡Oferta especial!</p>
</div>
-->


<div class="contenido-principal">
  <p>Contenido activo</p>
</div>

3. Dejar notas para el equipo 👥

<!-- TODO: Agregar imagen del producto -->
<div class="producto">
  <h3>Nombre del producto</h3>
  <!-- FIXME: El precio debe venir de la base de datos -->
  <p>Precio: $99.99</p>
</div>


<!-- NOTE: Esta sección se actualiza cada semana -->
<section class="noticias">
  <h2>Últimas noticias</h2>
</section>

4. Marcar inicio y fin de secciones 🏁

<!-- START: Sección de servicios -->
<section id="servicios">
  <h2>Nuestros Servicios</h2>
  <div class="servicio">...</div>
  <div class="servicio">...</div>
</section>
<!-- END: Sección de servicios -->


<!-- START: Sección de contacto -->
<section id="contacto">
  <h2>Contacto</h2>
  <form>...</form>
</section>
<!-- END: Sección de contacto -->

5. Explicar código complejo 🧩

<!--
  Este formulario usa validación HTML5
  - required: campo obligatorio
  - pattern: validación con expresión regular
  - minlength: longitud mínima
-->
<form>
  <input
    type="email"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  >
</form>

🎯 Anidamiento Correcto de Etiquetas

Section titled “🎯 Anidamiento Correcto de Etiquetas”

El anidamiento se refiere a colocar elementos dentro de otros elementos. Debe hacerse correctamente para que el HTML sea válido.

Reglas de anidamiento

Section titled “Reglas de anidamiento”

✅ Anidamiento correcto

Section titled “✅ Anidamiento correcto”
<!-- ✅ CORRECTO: Cierre en orden inverso -->
<div>
  <p>
    <strong>Texto en negrita</strong>
  </p>
</div>


<!-- ✅ CORRECTO: Elementos en línea dentro de bloque -->
<p>
  Este es un <strong>texto importante</strong> con <em>énfasis</em>.
</p>


<!-- ✅ CORRECTO: Listas anidadas -->
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2
    <ul>
      <li>Sub-elemento 2.1</li>
      <li>Sub-elemento 2.2</li>
    </ul>
  </li>
  <li>Elemento 3</li>
</ul>


<!-- ✅ CORRECTO: Estructura semántica -->
<article>
  <header>
    <h2>Título del artículo</h2>
    <p>Fecha: <time datetime="2024-01-15">15/01/2024</time></p>
  </header>
  <p>Contenido del artículo...</p>
  <footer>
    <p>Autor: Juan Pérez</p>
  </footer>
</article>

❌ Anidamiento incorrecto

Section titled “❌ Anidamiento incorrecto”
<!-- ❌ INCORRECTO: Cierre en orden equivocado -->
<div>
  <p>
    <strong>Texto</p>
  </strong>
</div>


<!-- ❌ INCORRECTO: Elementos de bloque dentro de inline -->
<span>
  <div>Esto no es válido</div>
</span>


<!-- ❌ INCORRECTO: <p> no puede contener otros <p> -->
<p>
  Párrafo 1
  <p>Párrafo 2</p>
</p>


<!-- ❌ INCORRECTO: <a> no puede contener otro <a> -->
<a href="#">
  Enlace externo
  <a href="#">Enlace interno</a>
</a>


<!-- ❌ INCORRECTO: Etiquetas cruzadas -->
<strong><em>Texto</strong></em>

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas los elementos básicos, aprenderás:

  • ✅ Cabecera del documento (<head>)
  • ✅ Metadatos y configuración
  • ✅ Importación de estilos y scripts
  • ✅ SEO y optimización
🐝