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

to synonymously with tags, but elements and tags have slightly different meanings. Tags
are part of elements, as Figure 1-5 shows. The majority of elements consist of an open-
ing tag, some content, and a closing tag, but depending on the tag, one or more of these
three components may be absent. Many elements can contain any number of further ele-
ments nested inside of them, which are, in turn, made up of tags and content. The fol-
lowing example shows two elements: the p element, which is everything from the first
opening angle bracket ( < ) to the very last closing angle bracket ( > ), and the em element,
which encompasses the opening <em> tag, the closing </em> tag, and the content in
between.
<p>Here is some text, some of which is <em>emphas-
ized</em></p>
Notice that the <em></em> element is entirely enclosed in the <p></p> element;
it would not be proper syntax to nest them any other way, as follows:
<p>Here is some text, some of which is <em>emphas-
ized</p></em>
There is not a clear hierarchy of what is inside of what, which is problematic when
a web browser is deciding how to display this text. A web browser will still parse and
attempt to display this code, but it is not code that conforms to the HTML specification.
Empty elements
Not all elements contain text content. For example, the img , br , and hr elements insert,
respectively, an image, new line, and horizontal rule into the page. What they don't
do is modify some content on the page, beyond taking up space for themselves. Such
elements are not container elements—that is, you would not write <hr>some con-
tent</hr> or <br>some content</br> . Instead, any content or formatting is
dealt with via attribute values (explained in the next section). In HTML, an empty ele-
ment (also known as a void element) is written simply as <img> , <br> , <meta> , or
<hr> , without a closing tag. In the XML form of HTML, XHTML, an empty element
requires a space and a trailing slash, like <img /> , 1 <br /> , <meta /> 1 , or <hr
/> ; these are referred to as self-closing tags. Because of HTML5's flexible syntax, either
form is acceptable to use. I tend to lean toward the XHTML syntax because the presence
of the slash makes it clearer that the tag is an opening and closing tag merged together.
Attributes
Attributes appear within the starting tag of an element. A particular element often con-
tains a mixture of attributes that are unique to that element along with attributes that