DL, DT, DFN, and DD. Before in HTML4 and after in HTML5

So this is a pretty simple post regarding the DL, DFN, and DD tags during the time of HTML4 and their updated usages to today's HTML5

So lets get started with just defining the two used commonly in HTML4. DL and DD

DL
As you may have guessed DL is meant to be a list that contains words that need to be defined for the user such as a Snuffleupagus. And if you were to inspect this html, you would see me using it how HTML4 would use it right now.
DT
This would indicated here is this first item in this case Snuffleupagus and from here on out everything we see is related to this term unless we see a DD followed by a DT.
DD
And then finally this is the most important part, the explanation. Such as Snuffleupagus is a type of creature found on tv that is fake.
Below is the code sample of what you just read above.
  

Before moving on I would like to quickly explain the quirk of DT. If you notice the condition states that everything is related to this term until we see a DD followed by a DT. Looking at the code sample above you can see it was always DT, DD, DT, DD. Well what you can instead do is something like below.

Coffee
Mud
A really tasty drink.
Usually comes from beans
Cafe
A small resteraunt selling light meals and drinks.
    
  

So as you can tell you can use multiple dts and dds together to group content and the browser will know what you are trying to say such as coffee and mud can both be defined here with these descriptions.

HTML5 Implementation

So above you are simply seeing the html4 version and quite honestly as far as the developer is concerned there is not a whole lot that has changed from a coding standpoint. It was repurposed in html5 to be more a description type list then actual definition list which brings us to the DFN tag. The DFN tag is meant to say hey, there is this list that described certain words but then here is the DFN tag which says this is quite literally a definition. For instance using the coffee example above.

Coffee
Mud
A really tasty drink.
Usually comes from beans
Cafe
A small resteraunt selling light meals and drinks.
    
  

Notice how this looks slightly different you can see that the word Coffee has some different styling which was due to the DFN tag and that styling is from the browser, not from any css I made. But you can see that Mud which does not have the DFN tag is styled differently. Also conceptually Mud is not a tasty drink by definition or come from beans but it can belong here because in this context we are talking about Coffee and as we all know, Coffee can be referred to as Mud when drinking poorly made Coffee. Also notice that Cafe is styled differently. Again this is due to the DFN tag being put on the word.

Why care?

Well it allows you to have more of a descriptive conversation with users. For instance I could have said in this article that if you see an italicized word then you know the description is the literally definition of that word. But that is just for reading a article normally. Where it really comes into play is with screen readers and crawlers. They can easily tell what you are attempting to convey. Such as Mud may be synoymous with coffee at times, but that coffee is literally defined as a tasty drink. (I define it like that. Some people find it disgusting)

Anyways with that lets just remember that when trying to describe something in an article we can always look to DL