Elementos fundamentales en HTML
Descubre los elementos fundamentales de HTML como encabezados, párrafos, listas, enlaces e imágenes. Aprende a estructurar correctamente tus páginas web con ejemplos claros y prácticos.
Elementos y etiquetas comunes
HTML utiliza etiquetas para definir la estructura y el contenido de una página web. Cada etiqueta tiene un propósito específico y se compone de una etiqueta de apertura y una etiqueta de cierre. Las etiquetas pueden contener atributos que proporcionan información adicional sobre el elemento.
Contenedores
Los contenedores son elementos que agrupan otros elementos. El más común es <div>, que se utiliza para crear secciones en una página.
<div>
<h1>Título de la Sección</h1>
<p>Este es un párrafo dentro de un contenedor.</p>
</div>
Encabezados
Se utilizan para títulos y subtítulos. Van desde <h1> (el más importante) hasta <h6> (el menos importante).
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
Párrafos
Se crean con la etiqueta <p>.
<p>Este es un párrafo de texto.</p>
La etiqueta <span> es un contenedor en línea que se utiliza para textos especiales, para envolver una parte de un texto o una parte de un documento.
<p>Este es un <span style="color:blue">ejemplo</span> de etiqueta span.</p>
Enlaces
Se crean con la etiqueta <a> y se utilizan para navegar entre páginas.
<a href="https://www.ejemplo.com">Visita Ejemplo</a>
Imágenes
Se insertan con la etiqueta <img>.
<img src="imagen.jpg" alt="Descripción de la imagen" />
Atributos
Los atributos proporcionan información adicional sobre los elementos. Se colocan dentro de la etiqueta de apertura.
href
Usado en la etiqueta <a> para definir la URL del enlace.
<a href="https://www.ejemplo.com">Visita Ejemplo</a>
src
Usado en la etiqueta <img> para definir la ruta de la imagen.
<img src="imagen.jpg" alt="Descripción de la imagen" />
alt
Proporciona texto alternativo para las imágenes, importante para la accesibilidad.
<img src="imagen.jpg" alt="Descripción de la imagen" />
-
Estructura: Estructura básica de un documento HTML.
-
Etiquetas semánticas: Uso de etiquetas semánticas en HTML.
-
Más sobre elementos HTML: MDN Referencia de Elementos HTML.
💻 Mete mano al código con estos desafíos simples: