Lesser Known HTML Elements and Attributes
Let’s turn our attention to the language of the web, Hypertext Markup Language (HTML). But rather than bore you with the basics, let’s look at some of the lesser known attributes… Well, at least they were to me.
The Third List type
Despite popular belief, HTML has more than two types of lists: <ol> and <ul>. However, there is a third type reserved for description lists <dl></dl>.
This element provides an excellent way of formatting longer content elements of similar type.
A <dl></dl> functions in conjunction with two other elements: the <dt></dt>, which provides our Description Topic, and the <dd></dd>, which serves as our longer Description Definition.
Description List in Practice
<dl class="discworld">
<dt>Witches</dt>
<dd>
Theses novels center around three (four if you count the young adult novels): Granny Weatherwax, Nanny Ogg, and Magrat.
</dd>
<dt>Death</dt>
<dd>
These novels include: Mort, Reaper Man, and a personal favorite, Thief of Time... among others.
</dd>
</dl>
The <dl></dl> Element in actiona
Application Examples:
- A glossary of similar terms, such as a recipe/cookbook.
- Metadata tags/descriptions
- Appendix content
- Embedded material to support longer content like articles
Putting the Element in Practice
Of course, there are a range of important elements to use and consider when drafting longer text content, such as <article>, <main>, and our ever faithful <p> element. However, the <dl> elements are an excellent alternative for reference content that directly supports a main content entry like a blog post.
And remember, we can wrap the <dl> in a class name, allowing us to easily target the element (and associated content) with Cascading Style Sheets (CSS).
More on that later
Top