¡Hola, futuros diseñadores web! Aquí tienen 100 códigos HTML esenciales para construir páginas web impresionantes. Imaginen estos códigos como bloques LEGO, cada uno con una función específica para dar forma a su creación digital.
Estructura Básica
<!DOCTYPE html>: Es como la declaración de intenciones de su página. Le dice al navegador que está trabajando con HTML5, la versión más moderna. Es el primer ladrillo que debes colocar.
<html></html>: Son los cimientos de su casa web. Todo el contenido de su página vivirá dentro de estas etiquetas. Piensen en esto como los límites de su lienzo.
Must Read
<head></head>: Aquí se coloca la información "detrás de escenas", como el título de la página. Es como la etiqueta de un libro; le dice al lector de qué trata. No es visible en la página directamente.
<title></title>: El título de su página web, que aparece en la pestaña del navegador. Imaginen esto como el nombre de su proyecto.
<body></body>: Aquí va todo el contenido visible de su página: texto, imágenes, videos... Es el salón principal de su casa web.
Texto
<h1></h1> a <h6></h6>: Son los títulos y subtítulos. Piensen en ellos como los encabezados de un periódico, desde el más importante (h1) hasta el menos importante (h6). Organizan la información.
<p></p>: Representan párrafos de texto. Son como los ladrillos de las paredes de su casa; forman la mayor parte del contenido.
<br>: Introduce un salto de línea. Es como presionar "Enter" en un procesador de textos. Útil para separar frases o líneas.
<hr>: Crea una línea horizontal. Es como una línea divisoria en una hoja de papel.
<strong></strong>: Resalta el texto con negrita. Piensen en esto como el resaltador para las ideas clave.
<em></em>: Enfatiza el texto con cursiva. Similar a la negrita, pero para una énfasis más sutil.
Listas
<ul></ul>: Crea una lista no ordenada (con viñetas). Imaginen esto como una lista de compras sin un orden específico.
<ol></ol>: Crea una lista ordenada (con números). Piensen en esto como una receta, donde los pasos deben seguirse en orden.
<li></li>: Representa un elemento dentro de una lista. Son los ítems individuales de su lista de compras o receta.
Enlaces e Imágenes
<a href="URL"></a>: Crea un enlace a otra página web. Es como un portal a otro mundo. El atributo href define la dirección del enlace.
<img src="URL" alt="Texto alternativo">: Inserta una imagen en la página. Es como colgar una pintura en la pared. El atributo src define la ubicación de la imagen y alt proporciona una descripción si la imagen no se carga.
Tablas
<table></table>: Define una tabla. Es como una hoja de cálculo para organizar datos.
<tr></tr>: Define una fila dentro de una tabla. Son las líneas horizontales de su hoja de cálculo.
<th></th>: Define una celda de encabezado en una tabla. Son los títulos de las columnas en su hoja de cálculo.
<td></td>: Define una celda de datos en una tabla. Son los datos reales que llenan las celdas de su hoja de cálculo.
Formularios
<form></form>: Define un formulario para recopilar datos del usuario. Es como un cuestionario que los usuarios deben completar.
<input>: Crea un campo de entrada para que el usuario escriba información. Existen diferentes tipos de inputs: text, password, email, etc.
<textarea></textarea>: Crea un área de texto más grande para que el usuario escriba texto más extenso.
<button></button>: Crea un botón que realiza una acción al ser pulsado. Por ejemplo, enviar el formulario.
Esto es solo la punta del iceberg. Hay muchísimos más códigos HTML, pero estos son un excelente punto de partida. ¡Experimenten, jueguen y diviértanse creando! Recuerden, la práctica hace al maestro. Visualicen cada código como una herramienta para construir sus sueños digitales.
![🚀 Lista de etiquetas HTML y propiedades CSS [2021] | Crehana](https://crehana-blog.s3.amazonaws.com/media/filer_public/15/3e/153e203c-8931-4a27-81c3-c4a07da078bf/codigos-html.png)
