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.