Collection of free HTML and CSS <dt> & <dd> code examples (with little JS).

Demo image: dt & dd - Trending Words dt & dd - Trending Words - GIF Demo

Creator

  • Halida Astatin

Programming language

  • HTML / CSS / JavaScript

Information the code

dt & dd – Trending Words

Accordion using definition lists. Trending Words taken from dictionary.com.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Writer's Unblock with HTML dt and dd Tags Writer's Unblock with HTML dt and dd Tags - GIF Demo

Creator

  • Kenneth Alvares

Programming language

  • HTML / CSS (Sass) / JavaScript

Information the code

Writer’s Unblock with HTML <dt> & <dd> Tags

When you load the page, you will see two completely random and unrelated English words appear on the screen. Use these word prompts to get your creative juices flowing and get an idea for a story, poem, or some other form of content. If you want a new prompt, just click “new words” and a fresh prompt will appear.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: dt and dd: Primer Accordion dt and dd: Primer Accordion - GIF Demo

Creator

  • Gabriele Corti

Programming language

  • HTML / CSS (Stylus) / JavaScript

Information the code

dt and dd: Primer Accordion

Accordion-like feature for a card with HTML <dt&gt & <dd> tags.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Sliding Reveal Description List Sliding Reveal Description List - GIF Demo

Creator

  • George W. Park

Programming language

  • HTML / CSS / JavaScript (Babel)

Information the code

Sliding Reveal Description List

This example shows how the dt and dd HTML elements can be used to create a sliding door style list.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: K-pop Fandom Dictionary

Creator

  • Jessica Paoli

Programming language

  • HTML / CSS (SCSS)

Information the code

K-pop Fandom Dictionary

Simple experiment with HTML dt and dd tags.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Dictionary Book Dictionary Book - GIF Demo

Creator

  • Adam Conrad

Programming language

  • HTML / CSS (SCSS)

Information the code

Dictionary Book

Dictionary book with HTML dt and dd tags.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Stairs Diagram

Creator

  • Amli

Programming language

  • HTML / CSS

Information the code

Responsive Stairs Diagram

Responsive diagram by using only CSS and HTML dl, dt, dd elements. Try it in small screen.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Transforming Select Fields Using DL, DT & DD + Some jQuery Transforming Select Fields Using DL, DT & DD + Some jQuery - GIF Demo

Creator

  • Heath

Programming language

  • HTML (Pug) / CSS (SCSS) / JavaScript

Information the code

Transforming Select Fields Using DL, DT & DD + Some jQuery

Just a little form to showcase how you can use DL, DT & DD to spice up your select boxes.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Vocabulary Flashcards Vocabulary Flashcards - GIF Demo

Creator

  • Tony Banik

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Vocabulary Flashcards

Using <dl>, <dt> & <dd>.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: slick.css, jquery.js, slick.js

Demo image: <dl> and <dt>

Creator

  • parph

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

dl and dt

Meal plan with dl, dt and dd elements.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: DL and DT

Creator

  • Artem

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

DL and DT

Simple card list with dl & dt elements.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Timeline Created With DT and DD Elements

Creator

  • Dianna Cheng

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Timeline

Timeline created with dt and dd elements.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: