HTML and CSS Reference
Understanding the DOM
Listing 2-1 contains the HTML markup for a simple web page, dom.html :
Listing 2-1. Exploring the DOM
<title>Understanding the DOM</title>
<h1>How the Document Object Model Works</h1>
<p>The <dfn>Document Object Model</dfn> (<abbr title="Document Object Model">DOM</abbr>) creates
a tree-like structure of the page.</p>
As Figure 2-1 shows, the browser applies some basic styling to different HTML elements. The <h1> heading
is rendered in a large, bold font, the words inside the <dfn> tags are italicized, and the contents of the <abbr>
element have a dotted underline.
Figure 2-1. The browser adds default styles to the page
■ The <dfn> tag is one of the oldest elements in HTMl, first mentioned in the HTMl 2 specification in 1995,
but many web designers have never heard of it. The tag represents the defining instance of a term. With the empha-
sis on semantic—or meaningful—structure in HTMl5, the <dfn> tag deserves to be dusted off and restored to its
rightful place in HTMl markup.
Internally, the browser builds a representation of the DOM like a family tree, as shown in Figure 2-2 .