¡Hey, tú! 👋
Sí. Tú.
El que está metiéndose por primera vez en este mundo del desarrollo web. 💻
¿Sabías que HTML es la base de todo lo que ves en una página web? 🕸️
Si no, ahora lo sabes.
Y si ya lo sabías, aquí vengo a contarte sobre las etiquetas HTML que te van a salvar la vida (o al menos te evitarán quedar como un novato total en tu primer proyecto).
<html> y <body>
Por algún lado hay que empezar, ¿no? 🚀
Estas etiquetas son la estructura básica. 🏗️
-
<html>: Es la etiqueta madre. Todo tu código HTML vive dentro de ella. Si no la usas, ¿de qué se supone que está hecha tu página? -
<body>: Aquí va TODO lo que ves en la pantalla. El contenido, las imágenes, los botones, los memes que subes en tus pruebas de portafolio. Todo.
<head>
Esto no se ve directamente en la página, pero es crucial. 🧠
Aquí metes cosas importantes como:
-
El título de la pestaña (
<title>). - Enlaces a tus archivos CSS o JS.
- Metadatos que no entiendes ahora pero que Google ama (y deberías aprender pronto).
<h1> a <h6>
Los títulos.
Hazte un favor y no uses h1 para todo. 🙅♂️
Cada etiqueta tiene un tamaño y un nivel de jerarquía:
-
<h1>: Súper importante. Ideal para el título principal. -
<h2>a<h6>: Para subtítulos y otros niveles de importancia.
💡 Pro tip: Usar bien estos niveles te ayuda con el SEO (o sea, que Google te encuentre más fácil).
<p>
Tus textos de relleno. ✍️
Aquí metes todo el choro mareador que acompaña tus títulos. Si no sabes qué poner, usa el clásico "Lorem ipsum" para fingir que sabes de qué hablas.
<a>
¿Quieres enlaces? Aquí los tienes. 🔗
- Ejemplo:
<a href="https://tupaginamamada.com">Haz clic aquí</a>. - 💡 Pro tip: Usa
target="_blank"para que el enlace se abra en otra pestaña. Así no secuestras al usuario en tu página.
<img>
Las imágenes son el alma de Internet. 🖼️
Pero no seas tonto, pon siempre el atributo alt. Ejemplo:
<img src="gatito.png" alt="Un lindo gatito que te hace feliz">
Esto es por accesibilidad y porque los motores de búsqueda también leen eso. 🔍
<ul>, <ol> y <li>
Listas para organizar cosas:
-
<ul>: Lista desordenada (con puntos). -
<ol>: Lista ordenada (con números). -
<li>: Cada elemento de la lista. Ejemplo:
<ul>
<li>Aprender HTML</li>
<li>Quejarte de CSS</li>
<li>Enamorarme de JavaScript (o no)</li>
</ul>
<button>
Un botón que puedes programar para hacer de todo (o nada):
<button onclick="alert('Hola mundo')">Dale clic</button>
El onclick es JavaScript, pero aquí estamos para ver HTML, así que no me quemen por eso. 🔥
<form>
Si quieres recolectar datos (como emails o comentarios de odio):
<form action="/enviar-datos" method="POST">
<input type="text" name="nombre" placeholder="Tu nombre aquí">
<input type="email" name="correo" placeholder="Tu correo">
<button type="submit">Enviar</button>
</form>
Con esto puedes crear formularios para lo que quieras. Bueno, para lo que el backend soporte. 📨
<div> y <span>
-
<div>: El contenedor universal. Si no sabes qué usar, mete todo en undiv(pero no abuses). -
<span>: Es como undiv, pero para texto o cosas pequeñas.
¿Y ahora qué?
Estas etiquetas son el pan de cada día para cualquier desarrollador web.
No necesitas memorizar todo ahorita, pero sí jugar con ellas y entender para qué sirven.
Y si llegaste hasta aquí, te dejo un consejo final: rompe cosas.
Sí.
Rompe tu código.
Experimenta
Prueba.
¡Así se aprende! 💥
Ahora ve y construye esa página que promete cambiar el mundo 🌎 (o al menos impresionar a tu primo en la cena). 🍽️
Top comments (0)