HTML5: Attributes, semantic markup, redefined elements
The HTML5 specification, while not entirely finished, is scheduled to be near completion sometime around the year 2020 or 2022 timeframe; however, currently most browsers do allow for several attributes, semantic markup, and redefined elements and these are just some of the changes that can be incorporated into coding for web documents today. This segment will show and demonstrate coding examples for empty attributes, attributes with values, semantic markup samples, conforming examples, and redefined elements.
Previous posts in this series include:
Attributes
Let’s get started with reviewing some of the ways attributes can be used to set various properties of an element. There are four different syntaxes that may be used for attributes and they are:
- Empty
- Unquoted
- Single-quoted
- Double-quoted
All four syntaxes may be used as explained in the HTML5 specification, and depending on what is needed for each specific attribute.
Empty: An empty attribute is one where the value has been omitted; in other words, this is shorthand for specifying the attribute with an empty value, which is commonly used for Boolean attributes. Examples of empty attributes:
<input name=address disabled>
<input name=address disabled="">
Unquoted: Quotes surrounding attribute values can also be omitted in most cases, and the value may contain any characters with the exception of spaces, single or double quotes, an equal sign, or a greater-than symbol. If these special characters are required then they need to be expressed with escaped character references, or they need to include the quotes or double-quoted attribute values. An example of an unquoted attribute:
<input name=address maxlength=300>
Single-quoted and Double-quoted: When quoting attributes, the value may contain the additional characters that cannot be used in unquoted attribute values, but for obvious reasons, these attributes cannot contain additional single or double quotation marks within the value. An example of a single-quoted and double-quoted attributes:
<input name='address' maxlength='300'>
<input name="address" maxlength="300">
Double-quotes are not required under the HTML5 specification except under the special conditions listed above, however as a general rule of thumb, they are recommended.
Semantic markup
According to the HTML5 specification, web authors must not use elements, attributes, or attribute values for purposes other than their intended semantic use when creating HTML documents. Being familiar with the content should come first, so that the markup used to describe it for the web is accurate. This may be the most pressing issue for the continued development of HTML and the specification’s current undertaking. Backward-compatibility is included in part of the solution, and while marching onward the solution is also working toward forward-compatible concerns as well.
The following is an example of conforming semantic markup:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>HTML5 Conforming Semantic Markup</title>
</head>
<body>
<hgroup>
<h1>HTML5 Conforming Semantic Markup</h1>
<h2>Coding examples</h2>
</hgroup>
<blockquote>
<p>This is an exciting time for web developers.</p>
</blockquote>
<p>This is a <a href="HTML5BaseTemplate.html">sample</a> template.</p>
</body>
</html>
Microdata
Semantic richness, while adding to the HTML lexis, is one area that the HTML5 specification is addressing. Semantic markup gives web authors the power to add microformat and RDFa type coding with the proposed and working microdata format using new attributes to nest semantics within existing web page content. This allows browsers to parse the information with logical associations, i.e., browsers recognizing a street address or phone number content as an actual physical location or telephone number listing. Microdata vocabularies can be custom designed or utilized from existing sources such as the
Data-Vocabulary.org, and currently includes
Event, Organization, Person, Product, Review, Review-aggregate, Breadcrumb, Offer, and Offer-aggregate. Microdata global attributes include the following: itemscope, itemtype, itemid, itemprop, and itemref.
Presentational markup
Presentational markup is no longer allowed with the HTML5 specification, and the reasons for moving away from this include a history of poor accessibility, higher overall costs, and the resulting larger document sizes. However, there are two exceptions. The two presentational features that are still allowed in the HTML5 specification are:
1. The style attribute within a tag such as the paragraph example:
<p style="color:#99FFFF;"></p>
2. Style elements which allows web authors to embed stylesheets as in CSS within documents, as displayed in the paragraph style example:
<style>
p {color:#99FFFF;
}
</style>
Redefined elements
The HTML5 specification has redefined several elements’ usage, including the following examples:
<b> - The b element should never be used for words of importance but can be used for lead sentences as in the conforming example:
<p><b class="lead">Semantic markup will help to optimize your web site
and improve rank results in search engines.</b></p>
<p>Adding semantic markup to the planning stages of web design will
ensure web sites are keeping up with the changing algorithms of browser
ranking schemes. </p>
The b element should be used as a last resort when no other element is more appropriate. Other examples for use of the b element are key words in a document, product names in a review, or other spans of text whose typical typographic presentation is bold.
<strong> - No longer used for emphasis, but should be utilized for implying importance. Changing the importance of selected text with the strong element does not change the meaning of the sentence; it only increases the importance of the content. The example shows proper conforming use of the strong element:
<p><strong>Warning!</strong> This stream water is dangerous.
<strong>Avoid drinking.</strong> Use your potable water for consumption.
<strong>Do not drink any of the water</strong>,
it is contaminated and <strong>will cause dysentery within two hours.</strong></strong>
You have been warned.</p>The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
i - The i element designates a span of text as an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts. Examples of the i element in conforming use:
<p>The <i class="taxonomy">Taxodium distichum</i> or Bald Cypress is
a species of conifer native to the southeastern United States.</p>
<p>The term <i>semantic markup</i> is defined above.</p>
Web authors can use the class attribute within the i element to specify how the element is being used, and style sheets can also be utilized to format i elements, therefore it may be possible for content that is contained within an i element and may not actually be rendered as italicized content.
<br> - The br element is used to separate topics within a section that is actually part of the content such as in poems or for address listings as displayed in the conforming example:
<p class="address">John Q. Public<br>
123 Main Street<br>
Anywhere, AZ 12345</p>
small - Typically used in footers and sidebar or side comments for copyrights, legal jargon, privacy, disclosure, and disclaimer statements. Small print element is also sometimes used for attribution, or for satisfying licensing requirements. The small element does not reduce or take away from the importance or significance of the content. The element should not be used for extended spans of text or multiple paragraphs. Conforming code example is displayed below:
<p>More Examples Inc. today announced new product placement
for Test Samples Corp <small>(Full Disclosure: Test News is a subsidiary of
Test Samples Corp)</small>, leading to speculation about a new
product line rollout.</p>
<u> - The underline element is to be used for misspelled words and Chinese characters, in particular labeling Chinese text as a proper name. The current default rendering of the u element clashes with the conventional rendering of hyperlinks and web authors are encouraged to avoid using this element where it could be confused for a hyperlink.
Want to take a look at all the new specification’s
elements of HTML? Or for an easier read, the
HTML5 Doctor offers a quick reference guide of elements that are new or have been redefined in the HTML5 specification, and they can be found in searching through the
HTML5 Element Index.
The next segment on HTML5 will review section elements including <article>, <aside>, <nav>, <section>, and the recommended usage for <hgroup> and <h1 - h6> headings.
