Example of incorporations and improvements from previous versions

HTML5 was developed in order to simplify, specify and organize the code. To achieve these purposes, tags and attributes were added, and HTML was integrated with CSS and Javascript. These incorporations and improvements from previous versions relate not only to new elements, but also to the way we use the old ones:

<mark>

The <mark> tag was added to highlight part of a text that originally wasn't considered important but is now relevant according to the user's current activity. The best example is a search result. The <mark> element will highlight the part of the text that is matching the search string.

An example is if someone performed a search for the word "car"; the results might be shown with this code:

The short text represents the results of the search, and the <mark> tags in between enclose what was the text searched— the word "car." In some browsers, this word will be highlighted with a yellow background by default, but you can always overwrite those styles with your own using CSS.

In the past, we usually achieved the same result as above using a <b> element. However, the addition of <mark> helped change the meaning and set up a new purpose for these and other related elements:

<em> should be used to indicate emphasis (replacing the <i> tag we have been used before)
<strong> is for importance
<mark> to highlight text that is relevant according to the circumstances
<b> should be used only when there is no other element most appropriate for the situation

<small>

The new specificity of HTML is also evident in elements such as <small>. Previously this element was intended to present any text with small font. The keyword was referencing the size of the text, independently of its meaning. In HTML5 the new purpose of the <small> element is to represent small print, like legal print, disclaimers, etc.

<cite>

Another element that has changed its nature to become more specific is <cite>. Now the <cite> tags enclose the title of a work such as a book, movie, song, etc.

<span>I love the movie <cite>Casablanca</cite></span>

<address>

The <address> element is an old element turned into a structural element. We didn't have to use it before to build our template. However, it could fit perfectly in some situations to represent the contact information for the content of an <article> element or the entire <body>. This element should be included inside a <footer>, as in the next example:

<article>
<header>
<h1>Title of tutorial one</h1>
</header>
This is the text of the tutorial
<footer>
<address>
<a href="http://www.edu4java.com/en/index.html">edu4Java</a>
</address>
</footer>
</article>

<time>

We can use a simple <p> element inside the <header> of the articles to show the date, but there is a special element in HTML5 for this specific purpose. The <time> element lets you declare a machine-readable timestamp and a human-readable text representing the date and time.

<article>
<header>
<h1>Title of tutorial one</h1>
<time datetime="2013-10-12" pubdate>posted 12-10-2013</time>
</header>
This is the text of the tutorial
</article>

The attribute datetime has the value that represents the machine-readable timestamp. The format of this timestamp might follow a pattern as in this example: 2013-10-12T12:10:45. We also included the attribute pubdate, which is just added to indicate that the value of the attribute datetime represents the publication date.

<<New Elements

HTML5 Global Attributes >>