checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

Definition Lists (<dl>, <dt>, and <dd>)

Definition Lists (<dl>, <dt>, and <dd>)

Definition lists in HTML are a way to present terms and their definitions in a structured manner. These lists are created using the <dl> (definition list) element, the <dt> (definition term) element to specify terms, and the <dd> (definition description) element to define the associated descriptions. Here's how to create and style definition lists effectively:

Syntax

To create a definition list, you use the <dl> element to define the entire list, the <dt> element to specify each term, and the <dd> element to describe the terms. The <dl> element encloses one or more pairs of <dt> and <dd> elements:

<dl>
  <dt>Term 1</dt>
  <dd>Definition of Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition of Term 2</dd>
</dl>

Key Elements

  1. <dl> (Definition List): The <dl> element marks the beginning and end of a definition list. It defines the overall structure of the list.

  2. <dt> (Definition Term): The <dt> element specifies a term or concept that needs a definition.

  3. <dd> (Definition Description): The <dd> element describes the term or concept specified by the corresponding <dt> element.

Example Definition List

Here's an example of a simple definition list:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Styling Definition Lists

You can apply CSS styles to definition lists to change their appearance, such as text formatting, margins, and spacing.

<!-- HTML -->
<dl class="custom-list">
  <dt>Term 1</dt>
  <dd>Description of Term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of Term 2</dd>
</dl>

<!-- CSS -->
<style>
  .custom-list {
    font-weight: bold; /* Make terms bold */
    margin-left: 20px; /* Add left margin to the entire list */
  }
</style>

Accessibility Considerations

When creating definition lists, ensure that the terms and descriptions are meaningful and structured logically. Screen readers and assistive technologies rely on proper markup to present content accurately to users with disabilities. Always use the <dt> and <dd> elements appropriately.

In summary, HTML definition lists, created with the <dl>, <dt>, and <dd> elements, provide a structured way to present terms and their corresponding descriptions. They are versatile and can be styled with CSS to match your web design, making content more informative and organized.

Previous Ordered Lists (<ol> and <li>)
Next Anchor Tags (<a>)