Post thumbnail: 12 HTML <dt> & <dd> with CSS

12 HTML <dt> & <dd> with CSS

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

Author

  • Halida Astatin

Made with

  • HTML / CSS / JavaScript

About the code

dt & dd - Trending Words

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

Compatible browsers: 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

Author

  • Kenneth Alvares

Made with

  • HTML / CSS (Sass) / JavaScript

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

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

Author

  • Gabriele Corti

Made with

  • HTML / CSS (Stylus) / JavaScript

About the code

dt and dd: Primer Accordion

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • George W. Park

Made with

  • HTML / CSS / JavaScript (Babel)

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: K-pop Fandom Dictionary

Author

  • Jessica Paoli

Made with

  • HTML / CSS (SCSS)

About the code

K-pop Fandom Dictionary

Simple experiment with HTML dt and dd tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dictionary Book Dictionary Book - GIF Demo

Author

  • Adam Conrad

Made with

  • HTML / CSS (SCSS)

About the code

Dictionary Book

Dictionary book with HTML dt and dd tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Stairs Diagram

Author

  • Amli

Made with

  • HTML / CSS

About the code

Responsive Stairs Diagram

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

Compatible browsers: 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

Author

  • Heath

Made with

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

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Vocabulary Flashcards Vocabulary Flashcards - GIF Demo

Author

  • Tony Banik

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Vocabulary Flashcards

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

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

Demo image: <dl> and <dt>

Author

  • parph

Made with

  • HTML (Haml) / CSS (Sass)

About the code

dl and dt

Meal plan with dl, dt and dd elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: DL and DT

Author

  • Artem

Made with

  • HTML (Haml) / CSS (Sass)

About the code

DL and DT

Simple card list with dl & dt elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Timeline Created With DT and DD Elements

Author

  • Dianna Cheng

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Timeline

Timeline created with dt and dd elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top