Mastering HTML Definition Lists

Introduction

In this lab, you will learn how to use the HTML <dfn> tag to create a definition list that highlights the terms being defined. The <dfn> tag is commonly used in tutorials and educational websites to provide an interactive and informative user experience.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70740{{"`HTML Definition Term`"}} html/head_elems -.-> lab-70740{{"`HTML Definition Term`"}} html/lists_desc -.-> lab-70740{{"`HTML Definition Term`"}} html/inter_elems -.-> lab-70740{{"`HTML Definition Term`"}} end

Setting up the HTML file

Create a new file called index.html and open it in your preferred code editor.
Add the basic HTML structure to your file.

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

Creating the definition list

Inside the <body> element, create a <dl> element to contain your definition list.
Within the <dl> element, create a set of term and definition pairs using the <dt> and <dd> elements respectively.

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Language is the standard language for creating web pages.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style Sheets is used to describe the presentation of a document
      written in markup language.
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      A scripting language used to create and control dynamic website content.
    </dd>
  </dl>
</body>

In this example, we are using the <dfn> tag to highlight the terms and make them stand out.

To add a tooltip to each term, include a title attribute within the <dfn> elements.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
  HyperText Markup Language is the standard language for creating web pages.
</dd>

The title attribute will create a tooltip that displays the full term when the user hovers over it with the mouse.

Customizing the CSS style

By default, the <dfn> tag has an italic font style. However, you can customize the styles by using CSS.
Add the following CSS styles to your file.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

The above styles will set the font-style of <dfn> to italic and the font-color to blue. The font-weight of <dt> is also changed to bold.

Summary

In this lab, you learned how to use the HTML <dfn> tag to create a definition list with highlighted terms and tooltips. By using the <dfn> tag, you can make your educational content more interactive and visually appealing to the user.

HTML Definition Term