How to create Definition Lists in HTML5?



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.


Advertisements