Elementos HTML Fundamentales: Estructura y Uso Práctico para Principiantes

Escrito el 9 de Mayo de 2025 en español con un tamaño de 6,26 KB

Comprendiendo los Encabezados HTML

Lydia, con la etiqueta <h1> estableces el título principal de una página. Al utilizar <h2>, <h3>, <h4>, <h5> y <h6>, creas títulos de menor importancia que funcionan como subtítulos, ayudando a estructurar el contenido. Para la organización de este documento, usaremos estos encabezados secundarios.

Título de Ejemplo (Nivel 2)

Título Pequeño (Nivel 3)

Título Más Pequeño (Nivel 4)

Trabajando con Párrafos

Con la etiqueta <p>, puedes definir párrafos de texto, como este mismo. Los párrafos ayudan a organizar el contenido textual de forma legible.

Ejemplo de párrafo:

En un lugar de la Mancha,

de cuyo nombre no quiero acordarme.

Formato Básico de Texto

Existen diversas etiquetas HTML para dar formato y significado semántico al texto:

<em> o <i>: Se utilizan para enfatizar texto, que visualmente suele representarse en cursiva. Ejemplo: texto enfatizado.
<strong> o <b>: Se utilizan para indicar importancia, seriedad o urgencia, visualmente representado en negrita. Ejemplo: texto importante.
<small>: Permite mostrar el texto en un tamaño más pequeño, útil para comentarios, aclaraciones o texto secundario.
<del>: Se usa para indicar texto que ha sido ~~eliminado o ya no es relevante~~.
<mark>: Sirve para resaltar texto de particular interés o relevancia en el contexto actual, como si se usara un marcador.
<sub>: Para mostrar texto como subíndice, como en la fórmula del agua: H₂O.
<sup>: Para mostrar texto como superíndice, como en una potencia matemática: x².

Creación de Listas

Listas Desordenadas

Puedes crear listas de elementos sin un orden numérico específico usando las etiquetas <ul> (unordered list) para la lista completa y <li> (list item) para cada elemento:

Elemento de lista 1
Elemento de lista 2
Elemento de lista 3
Elemento de lista 4

Otro ejemplo de lista:

Manzanas
Plátanos
Naranjas
Fresas

Listas de Descripción

Las listas de descripción (<dl>) son útiles para presentar pares de términos (<dt> - description term) y sus correspondientes descripciones (<dd> - description details):

HTML: Lenguaje de Marcado de Hipertexto, utilizado para estructurar el contenido de las páginas web.
CSS: Hojas de Estilo en Cascada, utilizado para diseñar y dar estilo visual a las páginas web.

Estructuración de Datos con Tablas

Las tablas (<table>) se utilizan para mostrar datos organizados en filas (<tr> - table row) y columnas (celdas <td> - table data, o encabezados <th> - table header).

Ejemplo de tabla 3x3:

Encabezado Columna 1	Encabezado Columna 2	Encabezado Columna 3
Celda F1, C1	Celda F1, C2	Celda F1, C3
Celda F2, C1	Celda F2, C2	Celda F2, C3
Celda F3, C1	Celda F3, C2	Celda F3, C3

Creación de Enlaces (Hipervínculos)

La etiqueta <a> (anchor) se utiliza para crear enlaces a otras páginas web, secciones dentro de la misma página o recursos en internet. El atributo href especifica la URL de destino.

Lydia, pincha aquí y mírate estos vídeos para aprender más sobre el tema.

Elementos Estructurales y Metadatos

Divisores y Contenedores en Línea: `<div>` y `<span>`

Estos elementos son fundamentales para agrupar contenido y aplicar estilos con CSS, o para manipularlos con JavaScript:

<div>: Es un contenedor de bloque genérico. Se usa para agrupar secciones más grandes de contenido que comparten una finalidad o estilo.
<span>: Es un contenedor en línea genérico. Se usa para aplicar estilos o identificar pequeñas porciones de texto dentro de un bloque mayor, sin alterar el flujo del contenido.

Ejemplo de uso con estilos en línea (inline styles):

Este es un texto dentro de un <div> con color verde. Esta parte del texto está dentro de un <span> con color rojo y negrita, demostrando cómo se pueden anidar y estilizar elementos.

Metaetiquetas (Información para Navegadores y Buscadores)

Las etiquetas <meta> proporcionan metadatos sobre el documento HTML, como su descripción, palabras clave, autor, o configuración de la ventana gráfica. Importante: Estas etiquetas se colocan siempre dentro de la sección <head> de tu página HTML, no en el cuerpo visible (<body>).

Meta Descripción: Define la descripción de la página web, que a menudo es utilizada por los motores de búsqueda para mostrar un resumen en sus resultados.
Ejemplo: <meta name="description" content="Página de prueba para aprender los fundamentos de HTML y sus etiquetas más comunes.">
Meta Palabras Clave: Solía ayudar a los buscadores a indexar la página según términos relevantes, aunque su importancia para el SEO ha disminuido considerablemente.
Ejemplo: <meta name="keywords" content="HTML, CSS, desarrollo web, aprendizaje, etiquetas">

Entradas relacionadas:

Etiquetas: