Collection of free HTML and CSS <dt> & <dd> code examples (with little JS).
Links
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
Links
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
Links
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: -
Links
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: -
Links
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: -
Links
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: -
Links
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: -
Links
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
Links
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
Links
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: -
Links
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: -
Links
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: -