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.htmland 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.
Setting up the HTML file
- Create a new file called
index.htmland 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.
Adding a Tooltip
- To add a tooltip to each term, include a
titleattribute 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.
