✅ 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>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>