Getting Started: Transitioning to HTML5 - HTML5 Mastery: Semantics, Standards, and Styling - page 9

are valid on a broad range of different elements. They are used to modify the behavi-
or of the element in some respect. They can be thought of as key/value pairings, like
key="value" , where a particular element will have a number of defined attributes
(the key) that can be set to some value. For instance:
__________
1 In practice, the img and meta elements will have attributes as well.
<a href="contact.html">Here is some text that links to a
contact page.</p>
The attribute href appears in the opening tag and is set to a custom value that
changes the behavior of the HTML element. Depending on the attribute, it may contain
multiple, space-separated values. Other attributes you may have already encountered
might include alt , src , and title , but there are many more attributes. As with ele-
ments, HTML5 supports both HTML and XHTML syntax when writing attributes; in
HTML syntax they would not need to be in quotes, so <a href=contact.html>
would be acceptable, but, as with elements, I believe the XHTML syntax is clearer, be-
cause the quotes let you know the value is a custom value, like a quotation of something
you have said. An exception to the clarity of XHTML syntax may be the way it handles
certain attributes known as Boolean attributes. Boolean attributes provide an effect
solely based on their presence or absence within an element. In XHTML, which requires
that each attribute have a value, their value either is left empty or is set to a text string
that is the same as the attribute name. For instance, the video element contains an at-
tribute called autoplay ; in XHTML syntax, this would look like <video auto-
play=""> or <video autoplay="autoplay"> . However, in the more forgiving
HTML syntax, this could be written as <video autoplay> . In this case, the HTML
format is clearer. Since HTML5 supports either syntax, which way you write it is up to
you!
DOM
With the descriptions of elements, tags, and attributes safely behind us, let's turn our
attention to another concept related to HTML that you should know: the DOM. The
Document Object Model (DOM) is a term that crops up particularly when discussing
JavaScript's relationship to a page, and as a web designer/developer, it is an import-
ant term to be aware of. What is it? It is a standard way of representing a document,
in this case an HTML page, as a treelike data structure composed of connected nodes.
The nodes represent the elements, attributes, and text content in the page. Through its