Dominando las listas de descripciones en HTML

Introducción

En HTML, existe una etiqueta especial llamada <dl> que se utiliza para definir una lista de descripciones. Este tipo de lista generalmente se crea para explicar términos y sus definiciones, o para dar una breve explicación de un producto o servicio. En este laboratorio, aprenderá a usar la etiqueta <dl> para crear su propia lista de descripciones en HTML.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70745{{"Lista de descripciones en HTML"}} html/head_elems -.-> lab-70745{{"Lista de descripciones en HTML"}} html/lists_desc -.-> lab-70745{{"Lista de descripciones en HTML"}} html/layout -.-> lab-70745{{"Lista de descripciones en HTML"}} html/doc_flow -.-> lab-70745{{"Lista de descripciones en HTML"}} end

Configurar el archivo HTML

Cree un nuevo archivo HTML llamado index.html. Incluya la estructura básica de HTML y un título para su página.

<!doctype html>
<html>
  <head>
    <title>Mi lista de descripciones</title>
  </head>
  <body></body>
</html>

Crear una lista de descripciones usando la etiqueta `<dl>`

Dentro del cuerpo de su archivo HTML, cree una lista de descripciones usando la etiqueta <dl>. La etiqueta <dl> debe estar emparejada con la etiqueta <dt>, que representa el término que se está definiendo, y la etiqueta <dd>, que representa la definición del término.

<dl>
  <dt>Término 1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
</dl>

Agregar estilo a la lista de descripciones

Para que la lista de descripciones se vea mejor, agréguele un poco de estilo CSS. En este ejemplo, eliminaremos los márgenes y el relleno estableciéndolos en cero, y luego agregaremos un poco de relleno a la etiqueta <dt> para que destaque.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Agregar contenido a la lista de descripciones

Ahora que tienes una lista de descripciones básica configurada, puedes comenzar a agregar tu propio contenido a ella. Simplemente agrega nuevos pares <dt> y <dd> a la lista para cada término y definición.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, el lenguaje de marcado estándar utilizado para
    crear páginas web
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, un lenguaje utilizado para describir la presentación
    de un documento escrito en HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Un lenguaje de programación utilizado principalmente para desarrollar
    aplicaciones web
  </dd>
</dl>

Guarda tu archivo index.html, y luego ábrelo en un navegador web para ver tu nueva lista de descripciones.

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta <dl> en HTML para crear una lista de descripciones con términos y definiciones. Al usar las etiquetas <dt> y <dd>, pudiste definir tus términos y proporcionar una explicación para cada uno. También aprendiste cómo agregar un poco de estilo CSS simple a tu lista de descripciones para que se vea mejor en la página web.

Lista de descripciones en HTML