Html5. Deleted, adapted, modified and standardized elements

When released the fifth version of HTML I bought the book “HTML5: The Missing Manual” author Matthew MacDonald, I read the book “in one breath”, even then I noted the сhapter “HTML5’s Element Family” as a very important moment in the new understanding of the semantics of HTML. It’s been over two years since reading the book, now looking at the layout of my colleagues, I understand that this small, but in my opinion, but very important, the material is either not learned or ignored in most cases.

Offer thoughtful read, or reread those who have already read this wonderful article. This article is somewhat adapted to the blog format, because a little different from the original.


HTML5 is perfectly blended into the world of web development. Many developers are already using the new elements in their daily development. Someone decided not to stop on the use of semantic elements to work with the structure of pages and text, and goes further and implemented in the development of elements for working with web forms and interactivity elements to support audio, video, plug-in uses the canvas support. For some reason overlooked elements were deleted, adapted, updated and standardized.

Added elements

Added elements is beyond the scope of this article, because writing about them don’t see the point. To refresh the memory add items to bring to the table below.

Category Elements
Semantic elements to work with the structure of pages <article> <aside> <figcaption> <figure> <footer> <header> <hgroup> <nav> <section> <details> <summary>
Semantic elements for working with text <mark> <time> <wbr>
Elements for working with web forms and interactivity <input> <datalist> <keygen> <meter> <progress> <command> <menu> <output>
Elements to support audio, video and plug-ins <audio> <video> <source> <embed>
Canvas support <canvas>
Support for languages other than English <bdo> <rp> <rt> <ruby>

Deleted elements

In HTML5 were not only added new items, but some items were removed. These elements will be supported browsers, but HTML5 Validator will respond negatively. The reason for removing them is the maintenance of philosophy, first introduced in XHTML: the elements of decoration no place in the language. These elements include items used to format web pages, as the role of design delegated from HTML to CSS. Deleted, among others, were the elements that were not used by professional web developers for years: <big> <center> <font> <tt> <strike>

Several elements have been removed due to the fact that they were simply given the existing opportunities in another way and was a frequent source of errors. For example, the function of the <acronym> best provides the <abbr> and <applet> preferred <object> element. But the vast majority of HTML elements have been retained in HTML5.

Adapted elements

In HTML5 there is another interesting trick — some of the old methods used for a different purpose. Take, for example, the <small> designed to reduce the size of the font in the text block. While not the most optimal way to solve this problem, for which better suited the style sheet, this item fell out of favor web developers. But unlike thrown <big>, <small> has remained in HTML5, but its function is somewhat different. Now the <small> is used to denote the so-called “small text” — information that does not burn with the desire to provide, but which must be placed according to any requirements. For example, warning about the disclaimer placed at the end of the contract, like the following:


	<small>
		The creators of this website are not responsible 
		for any bodily injury that a user may receive 
		as a result of participation in races 
		of the one-wheeled bike without proper supervision.
	</small>

As before, the text inside the <small> is displayed in small font, if only these settings are not overridden by a style sheet.

Opinions about this new conceptual approach to the use of <small> split. On the one hand, it is good from the point of view of backward compatibility, because older browsers already support the <small> and therefore will support it and on the pages of HTML5. On the other hand, it introduces a potentially confusing change the values for the old pages, in which the <small> used in decorative purposes, and not in the context of the concept “small text”.

Another element whose effect remains the same, but conceptually the value has been adapted, is the <hr>, which draws a dividing line between blocks of text. In HTML5 the <hr> draws the same line, but now it is thematic interrupt, such as a transition to another question. Thus, the format remained the same, but has a new logical value.

Similarly strikethrough font <s> now carries the conceptual load — strikeout this element of the text is more wrong or no longer needed, as a result he was “removed” from the document. The offset values of these last two elements are more subtle than <small> because the amendments adopted way to use these elements in traditional HTML.

Bold and italic formatting

The most important elements with the modified value of the result of their action are the elements for formatting text bold and italic. These are two of the most commonly used HTML element <b> (bold text) and <i> (italic text) were partly replaced entered in the first version of XHTML elements <strong> and <em> that did the same formatting. The idea was to stop looking at these elements from the perspective of simple formatting, but to give them a logical sense. Thus, the <strong> had to apply for a logical bold formatting of the text that are important (strong) value, and the <em> for emphasis (stress emphasis) italic a certain block of text. The idea was quite rational, but the <b> and <i> continued to be used as a shorter and friends substitutes introduced in XHTML innovations.

HTML5 has made another attempt to solve this question. Instead of force to discourage developers from using <b> and <i> results of operations of these elements added a new logical value. The aim is to allow all four elements coexist in solid HTML5 document. The result is the following, somewhat blurred, a set of rules.

  • The <strong> should be used to highlight text that is important to separate it from the rest of the text.
  • And <b> should be used for text that is not more important than the rest of the text, but for whatever reason, should come from him. In this text, among other things, can be keywords, product names, and everything else that would be in bold print.
  • Similarly, the <em> element should be used to emphasize text that is emphasized; in other words, the text, which was pronounced with emphasis in oral speech.
  • And the <i> used to format the text for one reason or another need to italics, but which does not involve any special emphasis. This can be, among other things, foreign words, technical terms, and any text that would stand out in italics in print.

The following listing is an example of a layout in which all these four elements are used appropriately:


	<strong>Attention!</strong> In the bakery <b>"Sweet life"</b> 
	goes on sale candy <i>"Chocolate"</i>. Don't miss out, 
	because with the departure of the last candy this possible 
	it will <em>never</em> be.

In the browser the text will look like this:


	Attention! In the bakery "Sweet life" 
	goes on sale candy "Chocolate". Don't miss out, 
	because with the departure of the last candy this possible 
	it will never be.

It remains to be seen whether web developers to follow good intentions HTML5 or do you prefer to use the most familiar elements for semi-bold and italic formatting.

Modified elements

HTML5 also changed the rules for some elements. As an example, among others, can take a rarely used the <address>, which, despite its name, is not suitable to work with an email address. Its purpose more narrow — providing contact information about the creator of the document HTML, usually e-mail addresses or links to the web site.


	<h2>Our web site managed:</h2>
	<address>
		<a href="mailto:[email protected]">Developer</a>
		<a href="mailto:[email protected]">Designer</a>
	</address>

Also changed the purpose of the <cite>. It can continue be used to specify the names of any intellectual work, for example: measures of the story, articles, television programs, etc.


	<p>Jules Verne wrote
		<cite>The Mysterious Island</cite>
	</p>

But the <cite> more unacceptable to use to mark the names of the people. This limitation was surprisingly discussion, because such earlier application was allowed. Some web developers publicly urge developers not to pay attention to this limitation. Such attention is quite strange, because if you were editor of the web pages, you could do that for my whole life and never meet the <cite>.

More serious adjustments were made to the <a> element that is used to create links. In earlier versions of HTML <a> element was allowed to contain text or an image with a link. But in HTML5 it can contain everything and everyone that means that links can be made from whole paragraphs of text, together with lists, images, etc., the linked text is underlined, and the font is colored in blue, and the border of the image. Web browsers supported these properties for years, but only in HTML5 they acquired the official status of the standard, which, however, does not make them more or particularly useful.

The <ol> now has an attribute reversed (reverse), which allows you to keep score in the opposite direction (or to the unit or to any other value specified in the attribute start).

Standardized elements

HTML5 also adds official support for several elements that were supported in HTML and XHTML, but at the informal level. One of the best examples of such elements will be the <embed> , which is used everywhere in the Web as a universal method for wedging in page plug-in.

More exotic is the <wbr> tag which specifies an optional gap of the word, i.e. the place in which the browser can make the text wraps to a new line, if the word does not fit in the container.


	<p>
		Many linguists remain unconvinced that
		<b>supercali<wbr>fragilistic<wbr>expialidocious<wbr></b>
		is indeed a word.
	</p>

The <wbr> is useful when you want to use long names (which sometimes occur in terms of programming) in a limited space, such as a table cell or text box. But even if the browser supports the <wbr>, he would tear the word only if it does not fit in the available space.

The <wbr> element is a natural addition to the standard <nobr> element, which is used to prevent rupture of the word, when it has enough space. But until HTML5 it was not supported by any standard and is recognized only by some browsers.


From myself I shall add, I’m also ready to engage in a discussion about the <cite> tag. Follow you this specification or not, of course you decide, but you must remember that each language there are certain rules that you must follow, otherwise you will be illiterate.

Thanks for attention :)