Hoy aprenderás qué es HTML y cuáles son las etiquetas esenciales que más se utilizan al crear páginas web dentro de MGPanel.
HTML no es un lenguaje de programación, sino un lenguaje de marcado que define la estructura de una página web: secciones, textos, títulos, imágenes, listas y más.
A continuación encontrarás las etiquetas fundamentales que debes dominar cuando empiezas en el desarrollo web.
Secciones (div, section, article, header, footer)
Estas etiquetas permiten agrupar contenido y estructurar cada parte de tu página. Son esenciales para organizar secciones y trabajar un HTML más limpio y semántico.
<!-- div -->
<div>
Hola Mundo
</div>
<!-- header -->
<header>Un texto</header>
<!-- section -->
<section>Otro texto</section>
<!-- article -->
<article>Un texto más</article>
<!-- footer -->
<footer>Otro texto más</footer>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Encabezados (h1–h6)
Usa estos 6 para todos tus títulos y subtítulos.
El <h1> debe aparecer solo una vez por página, ya que ayuda a los motores de búsqueda a identificar el tema principal del contenido.
<!-- h1 -->
<h1>El título principal</h1>
<!-- h2 -->
<h2>Un subtítulo llamativo</h2>
<!-- h3 -->
<h3>Un subtítulo más</h3>
<!-- h4 -->
<h4>Para resaltar</h4>
<!-- h5 -->
<h5>Hola mundo</h5>
<!-- h6 -->
<h6>Un título de menor relevancia</h6>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Párrafos (p, span)
Estas etiquetas contienen la mayor parte del texto de tu página. Úsalas para mantener la estructura clara y fácil de leer.
<!-- p -->
<p>Inventado por Tim Berners-Lee, un físico de el instituto de investigación CERN en Suiza. Se le ocurrió la idea de un sistema de hipertexto basado en Internet.</p>
<!-- span -->
<span>Hipertexto significa un texto que contiene referencias (links) para otros textos en los que los usuarios pueden acceder de inmediato. Publicó la primera versión de HTML en 1991, que constaba de 18 etiquetas HTML. Desde entonces, cada nueva versión del lenguaje HTML viene con nuevas etiquetas y atributos (modificadores de etiqueta) para el marcado.</span>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Enlaces: (a)
Con esta etiqueta crearemos todos los links (Enlaces) que necesitemos colocar en nuestras páginas web.
<a href='www.google.com'>Ir a Google</a>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Imágenes (img)
Usa <img> para añadir imágenes a tu sitio. No olvides el atributo alt para mejorar accesibilidad y SEO.
<img src='/foto.png' alt='foto de frutas'>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Listas (ul, li)
Las listas te permiten organizar información de forma clara y ordenada. Aquí tienes un ejemplo básico:
<ul>
<li>Primer lugar</li>
<li>Segundo lugar</li>
<li>Tercer lugar</li>
</ul>Mira aquí un ejemplo práctico de cómo se verían estas etiquetas en tu página web.
Si dominas estas etiquetas, ya tienes la base para crear páginas web bien estructuradas y avanzar hacia un desarrollo más profesional. Si aún las estás conociendo, lo que puedes hacer es comenzar a aplicarlas (copia y pégalas en tu página, combínalas unas con otras, sácales el máximo provecho).
Existen muchas más etiquetas que podrás aprender más adelante, como <strong>, <b>, <hr>, <br>, entre otras, pero estas de acá son las más comunes y que usarás más al momento de darle vida a tu página web.
En próximos artículos compartiremos más guías y recursos para ayudarte a mejorar tus habilidades en MGPanel.
Nos vemos en un próximo artículo.