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
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.
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.
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.
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.
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