Recognizing Semantics - HTML5 Mastery: Semantics, Standards, and Styling - page 94

Sometimes it is quite clear what kind of content an element will contain. For instance,
seeing time will likely key you in quickly to this element's contents. On the other hand,
seeing s may necessitate a careful review of the relevant passages in the HTML spe-
cification. But let's look at the time element again. Is it as clear what it will contain as
it first seems? For instance, could I write the following:
<p>Innovations of the <time>21st century</time>.</p>
Or the following:
<p>The machine ran <time>infinitely</time>.</p>
Well, no; every element has constraints it's put under, and while both of those pieces
of content are related to time (a time period and a property of time), they are not the
type of time-related content the time element was meant to describe. We'll talk about
time more later, but in short, the specification tells us that it is a precise date in the
Gregorian calendar, optionally with a time . So, it's not as clear as we first thought! Why
is the element not called date or datetime instead? Well, element names aside, the
point is there are subtle nuances to each, regardless of how clear the name makes its pur-
pose seem. Mastering these nuances will go a long way toward creating pages that are
logically structured, easier to maintain, and more friendly to data-mining services (for
example, search engines). So, leave your assumptions at the door, and let's dive into the
nuances of HTML's elements! We'll begin with structural elements.
Thinking in outlines
See whether you can relate to this scenario. You have a new website project to under-
take. After mulling over the general concept of the site, you boot up your favorite graph-
ics editor and begin shuffling blocks of color around and fiddling with textures and lines.
You throw in a title and logo and shuffle the header around until it looks right. Does
this strike a chord? When tackling a new website project, it is tempting to immediately
dive in and start designing the appearance of the site, but if you find yourself doing this,
it's worth pausing and looking at the big picture. Ultimately, a well-designed website is
one that provides efficient delivery and access to its content. Your design should aim to
create a hierarchy of information—parts of the page should pull viewers' attention first,
then second, and so on. If you don't have all the content organized into a hierarchy be-
forehand, you may find yourself scrapping your design over and over as you discover
this or that piece needs more or less prominence on the page.
So, pause, leave the design alone for a moment, get some paper and a pen, and write
down the major pieces of content on your site. Think of a label for each piece and where
it stands in relation to the rest of the page's content. Forget about the details for the mo-