An explanation of the <dfn> and <pre> elements in HTML, along with code examples for each.
Defining Terms with the <dfn> Element
The <dfn> element is used to mark the defining example of a term in an HTML document. This is the place where the meaning of a word or phrase is explained. Subsequent uses of the term are not marked with <dfn>.
points about <dfn>:
- It’s a phrasing element.
- The paragraph, description list group, or section that is the nearest predecessor of the <dfn> element must also contain the definition(s) for the term. This means the <dfn> and its definition should be in close closeness.
- You can use the optional title attribute with <dfn>. If you do, the value of the title attribute must be the term that is being defined.
- The <dfn> element may also enclose another phrasing element like <abbr> when appropriate. For example: <p>A <dfn><abbr title= “Junior”>Jr.</abbr></dfn> is a son with the same full name as his father.</p>.
- By default, browsers style <dfn> text differently than normal text, regularly in italics. However, this can vary between browsers, so CSS can be used for consistent styling.
- There is no style convention for the <dfn> element by default according to one source. Another source states it’s usually reduced as bold or bold italic text.
Example
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>The <dfn title="World Wide Web Consortium">W3C</dfn> develops web standards.</p>
<p>A <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is used to style HTML elements.</p>
<dl>
<dt><dfn>HTML</dfn></dt>
<dd>HyperText Markup Language is the standard markup language for creating web pages.</dd>
</dl>
</body>
</html>The W3C develops web standards.
A CSS is used to style HTML elements.
- HTML
- HyperText Markup Language is the standard markup language for creating web pages.
In the first paragraph, the title attribute provides the definition of the abbreviation “W3C” while marking it as the defining example. In the second paragraph, <dfn> encloses <abbr>. The definition list (<dl>, <dt>, <dd>) in the third example shows how <dfn> can be used for a term within a definition list.
Preformatted Text with <pre>
The <pre> element is used to represent preformatted text. This means that spaces, line breaks, and tabs within the <pre> element are well-maintained and extracted exactly as they appear in the HTML source.
Points about <pre>:
- It is a flow element.
- Preformatted text is typically displayed with a monospaced font like Courier or Courier New. This default styling can be dominated with CSS.
- The <pre> element is ideal for displaying code samples. If your code contains HTML elements, you need to substitute < and > with their character entities (< and >) to prevent the browser from interpreting them as HTML.
- It’s useful for text where the formatting (like indentation) is significant.
- The width attribute was transitional in HTML and is now generally not used; CSS should be used for styling. The xml:space=”preserve” attribute is also relevant for XML-based documents.
- Older elements like <listing>, <plaintext>, and <xmp> are deprecated, and <pre> should be used instead.
Example
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<style>
pre {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<p>The following code snippet demonstrates a simple JavaScript function:</p>
<pre><code>
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</code></pre>
<p>Notice how the indentation and line breaks are preserved.</p>
<p>Example of HTML within <pre>:</p>
<pre><code>
<div class="container">
<p>This is some content.</p>
</div>
</code></pre>
</body>
</html>
The following code snippet demonstrates a simple JavaScript function:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
Notice how the indentation and line breaks are preserved.
Example of HTML within <pre>:
<div class="container">
<p>This is some content.</p>
</div>
In this example, the <pre> element encloses <code> elements to display code. The browser maintains the formatting within the <pre> tags. The second <pre> block shows how to use HTML entities for < and > when displaying HTML code.
HTML5 Topics