Collection of free HTML and CSS <dt> & <dd> code examples

Explore a collection of free HTML and CSS dt & dd code examples to help you display definition lists with style and functionality on your website.

Home ↔
HTML ↔
Collection of free HTML and CSS <dt> & <dd> code examples

dt & dd - Trending Words

dt & dd - Trending Words

Author:
Halida Astatin | June 4, 2018

Made with:
HTML / CSS / JavaScript

About a code

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

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

Dependencies:
font-awesome.css, jquery.js

demo and code

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

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

Author:
Kenneth Alvares | June 2, 2018

Made with:
HTML / CSS (Sass) / JavaScript

About a code

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 and code

dt and dd: Primer Accordion

dt and dd: Primer Accordion

Author:
Gabriele Corti | May 31, 2018

Made with:
HTML / CSS (Stylus) / JavaScript

About a code

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

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

Dependencies:
-

demo and code

Sliding Reveal Description List

Sliding Reveal Description List

Author:
George W. Park | May 30, 2018

Made with:
HTML / CSS / JavaScript (Babel)

About a code

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 and code

K-pop Fandom Dictionary

K-pop Fandom Dictionary

Author:
Jessica Paoli | May 30, 2018

Made with:
HTML / CSS (SCSS)

About a code

Simple experiment with HTML dt and dd tags.

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

Dependencies:
-

demo and code

Dictionary Book

Dictionary Book

Author:
Adam Conrad | May 30, 2018

Made with:
HTML / CSS (SCSS)

About a code

Dictionary book with HTML dt and dd tags.

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

Dependencies:
-

demo and code

Responsive Stairs Diagram

Responsive Stairs Diagram

Author:
Amli | May 29, 2018

Made with:
HTML / CSS

About a code

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 and code

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

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

Author:
Heath | May 29, 2018

Made with:
HTML (Pug) / CSS (SCSS) / JavaScript

About a code

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 and code

Vocabulary Flashcards

Vocabulary Flashcards

Author:
Tony Banik | May 29, 2018

Made with:
HTML / CSS (SCSS) / JavaScript

About a code

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

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

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

demo and code

dl and dt

dl and dt

Author:
parph | May 29, 2018

Made with:
HTML (Haml) / CSS (Sass)

About a code

Meal plan with dl, dt and dd elements.

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

Dependencies:
-

demo and code

DL and DT

DL and DT

Author:
Artem | May 28, 2018

Made with:
HTML (Haml) / CSS (Sass)

About a code

Simple card list with dl & dt elements.

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

Dependencies:
-

demo and code

Timeline

Timeline

Author:
Dianna Cheng | July 15, 2017

Made with:
HTML (Pug) / CSS (SCSS)

About a code

Timeline created with dt and dd elements.

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

Dependencies:
-

demo and code

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Let's craft a visual identity that ignites passion and loyalty. ✨