Home > Article > Web Front-end > How to create a definition list in HTML5?

How to create a definition list in HTML5?

WBOYforward: 2023-08-29 20:33:061331browse

A description list (formerly a definition list) provides an organized arrangement of terms and their definitions.

The tags of the definition list are as follows: −

− This is a definition list. It stores terms and their definitions as a table of rows and data.
- This is the term used for definition. It keeps the phrase defined.
- This is used as a description or definition. It contains definitions of specific terms.

Use these tags,

The following are examples...

The Chinese translation of

Example

is:

Example

In the example below, we use the

,

tags to add definitions to our web pages.

<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

When the above script is executed, it will display the text in two different steps: one as a phrase and one as a definition.

Example: Use div to wrap lines

In the example below, we use a div element to group name-value elements together -

<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

When executing the above script, the definition list is as follows. TutorialsPoint and its definition are grouped together, and the year of establishment is grouped together.

The above is the detailed content of How to create a definition list in HTML5?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Make HTML5 canvas fill the entire pageNext article：Make HTML5 canvas fill the entire page

See more

How to create a definition list in HTML5?

Example

Example

Output

Example: Use div to wrap lines

Output

Related articles