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.

Yaswanth Varma

Updated on: 05-Sep-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started