Explicación Sencilla y Ejemplos Prácticos

¡Hola!👋 En un artículo anterior, vimos que HTML es un lenguaje de Marcado de Hipertexto. Hoy te voy a explicar qué significa eso del "Marcado". ✍️

❓ ¿Qué son las Etiquetas HTML? 🏷️

📜 Un código HTML es básicamente un texto que incluye marcas que le dicen a los navegadores cómo queremos que se vean los elementos (imágenes, textos, tablas, enlaces, etc.) de nuestra página o aplicación web. 🌐

Estas marcas también se conocen como etiquetas (en inglés, tags), y yo prefiero llamarlas así. 🔖

⚙️ ¿Cómo Funcionan las Etiquetas? 🔧

🛠️ Las etiquetas suelen venir en pares: una etiqueta de apertura y una etiqueta de cierre. El contenido que pongas entre estas etiquetas se verá afectado por el efecto visual de la etiqueta que uses.

📂 Las etiquetas de apertura se escriben entre los símbolos <>: <ETIQUETA>

📂 Las etiquetas de cierre se escriben entre los símbolos </>: </ETIQUETA>

🔍 Ejemplos de Etiquetas HTML 💡

📚 Vamos a ver algunos ejemplos para que lo entiendas mejor:

📝 Para hacer un párrafo de texto, utilizaremos el siguiente código:


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

ejemplo-etiqueta-p

🎯 También hay elementos de una página web que no necesitan etiquetas de cierre. En esos casos, la sintaxis es la siguiente: <ETIQUETA />

📝 Por ejemplo:


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<br/> indica un salto de línea. 🖇️

📌 Resumen ✍️

📖 Las etiquetas HTML son instrucciones que le dicen al navegador cómo mostrar el contenido. En la mayoría de los casos, tendrás una etiqueta de apertura y su correspondiente etiqueta de cierre.

🚀 ¡A Practicar! 🛠️

🎉 Ahora que sabes qué son las etiquetas HTML y cómo funcionan, ¡es hora de empezar a usarlas! En los próximos artículos, te mostraré más ejemplos y cómo combinarlas para crear tus propias páginas web. 🌟