Elementos Esenciales

✅ Elementos esenciales:

A continuación, se presentan los elementos más comunes y esenciales:

✅ Elementos esenciales:

Elemento Uso principal Ejemplo
<h1> a <h6> Encabezados jerárquicos: <h1> es el más importante y <h6> el menos. <h1>Título Principal</h1>
<p> Párrafos de texto. <p>Este es un párrafo.</p>
<ul> Lista desordenada (con viñetas). <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Lista ordenada (numerada). <ol><li>Primero</li><li>Segundo</li></ol>
<li> Elemento de lista (funciona dentro de <ul> o <ol>). <li>Elemento</li>
<img> Inserta una imagen. Usa los atributos src y alt. <img src="imagen.jpg" alt="Descripción">
<a> Crea un enlace. Usa href para la URL. <a href="https://ejemplo.com">Visítanos</a>
<table> Crea una tabla. <table><tr><td>Celda</td></tr></table>
<tr> Fila dentro de una tabla. <tr>...</tr>
<td> Celda dentro de una fila de tabla. <td>Dato</td>
<form> Define un formulario interactivo para enviar datos. <form action="procesar.php" method="post">...</form>
<input> Campo de entrada (texto, email, botón, etc.). <input type="text" name="nombre">
<select> Lista desplegable. <select><option>Opción 1</option></select>
<textarea> Área de texto más amplia para escribir. <textarea></textarea>

✅ Estructura básica:

Todo documento HTML bien formado sigue una estructura básica. A continuación se presenta un ejemplo con comentarios explicativos:

<!DOCTYPE html> <!-- Define el tipo de documento (HTML5) -->
<html lang="es"> <!-- Inicio del documento, con idioma español -->

<head>
  <meta charset="UTF-8"> <!-- Codificación de caracteres (soporta acentos y ñ) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Diseño responsivo -->
  <title>Mi Primera Página</title> <!-- Título que aparece en la pestaña del navegador -->
</head>

<body>
  <!-- Encabezado de la página -->
  <header>
    <h1>Bienvenido al Desarrollo Web</h1>
  </header>

  <!-- Contenido principal -->
  <main>
    <section>
      <h2>Contenido Principal</h2>
      <p>Este es un párrafo dentro de la sección principal del sitio.</p>
    </section>

    <!-- Otra sección opcional -->
    <section>
      <h2>Lista de recursos</h2>
      <ul>
        <li>Tutoriales HTML</li>
        <li>Ejercicios prácticos</li>
        <li>Referencias oficiales</li>
      </ul>
    </section>
  </main>

  <!-- Pie de página -->
  <footer>
    <p>&copy; 2025 Mi Sitio Web. Todos los derechos reservados.</p>
  </footer>
</body>

</html>

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)