How to create Definition Lists in HTML5?

HTML Web Development Front End Technology

A description list—previously known as a definition list—offers an organised arrangement of a term and its definition.

For defining a definition list, the following tags are used −

<dl> − This is the list of definitions. It stores terms and their definitions as tables of rows and data.
<dt> − This is the term used to define. It keeps the phrase under definition.
<dd> − This serves as the description or definition. It contains the definition of a particular term.

Using these tags,

Following are the examples…

Example

In the following example we are using <dl>, <dt>, <dd> tags to add definitions to our webpage.


<html>
<body>
   <h1>DEFINITIONS</h1>
   <dl>
      <dt>SGML</dt>
      <dd>The Standard Generalized Markup Language. </dd>
      <dt>HTML</dt>
      <dd>The Hypertext Markup Language.</dd>
      <dd>The Markup Language You Use To Create Web Pages.</dd>
      <dt>XML</dt>
      <dd>The Extensible Markup Language.</dd>
   </dl>
</body>
</html>

Output

On executing the above script, it will display the text in two different steps: one acts as a phrase and one as a definition.

Example: Wrapping using div

In the following example, we are grouping name-value elements together using the div elements −


<html>
<body>
   <h1>DEFINITIONS</h1>
   <dl>
      <div>
         <dt>TutorialsPoint</dt>
         <dd>Leading providers of web based tutorials on Computer Science academic subjects, Computer Languages, Management, Telecom, and other miscellaneous subjects</dd>
      </div>
      <div>
         <dt>Established in</dt>
         <dd>2006</dd>
      </div>
   </dl>
</body>
</html>

Output

On executing the above script, the definition lists are achieved as follows. TutorialsPoint and its definition are grouped as one while the established year is grouped as one.