HTML – Definition List – My New Favorite Thing

It is sad when one gets so excited with such a trivial bit of obscure code. That is what has happened to me… again. This time I stumbled across the Definition List tag. It operates similar to other types of lists, you start with a containing tag <dl> and populate it with a list of items. But, where it differs from ordered and unordered lists is that there are two item types in the list; Definition Term <dt> and Definition Definition (or Data Definition) <dd>. Most all browsers will render the two lines differently, typically indenting the <dd>, like so:

farm
a place to grow food
school
a place to grow knowledge

The code looks like this:

<dl>
<dt>farm</dt>
<dd>a place to grow food</dd>
<dt>school</dt>
<dd>a place to grow knowledge</dd>
</dl>

But, what got me so excited was the prospect of being able to seamlessly style to different types of data in a list. It is when you add CSS to the mix that things get interesting. Rather then showing you what can be done by adding CSS, I encourage you to go give it a whirl.

You might ask how I got this far without having learned anything about this before. That is one of the pitfalls of being self taught, and rather haphazardly self taught at that. I tend to wonder around HTML learning little bits here and there, I took no structured course, just learned what I needed when I needed it. It is a process that works as everything I learn gets puts into action right away and the chaff gets dismissed. But, it also leads to holes in my knowledge of HTML and CSS.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s