How to Integrate Traditional HTML Tags with HTML5 - dummies

How to Integrate Traditional HTML Tags with HTML5

By David Karlins, Doug Sahlin

Overwhelmingly, new HTML5 elements expand the scope and range of HTML. That is, they don’t replace older tags (for the most part). So, for example, the legacy HTML six heading tags, the paragraph tag, and links are all used in HTML5 essentially in the same way that they were in previous versions of HTML.

If you know something about HTML tags, don’t use that neuralyzer device they used in the “Men in Black” movies to wipe your memory of that information. The ones that introduce basic, traditional HTML tags and syntax (rules for using tags). You still need that.

  • HTML5 elements add content-based structuring tools: As a general rule, HTML5 page structure tags structure — that is, they contextualize older, traditional tags. They frame those tags within more-defining elements. For example, a single HTML5 article element might well have different levels of headings, paragraph tags, links, images, video, and so on.

  • Here’s an example of how that works: An HTML5 aside element can be used to indicate that “this information is a sidebar to (associated with) the article it is embedded in.” And that aside element, in turn, can include traditional HTML tags like headings, paragraphs, and links.

    Beyond that, this aside element can also include new HTML5 tags like a nav element (to enclose navigation content) and an address element (to demarcate the physical location of the business or organization served by the website).

  • Here’s another example of how HTML5 tags can be used within either other HTML5 elements, or within traditional blocks of HTML: You can use the <address> and <time> elements to help search engines recognize your address (which can be a physical or virtual location — a street address or a URL).

    And those <address> and <time> elements can be inserted anywhere within traditional blocks of HTML. A paragraph element, for instance, can include an HTML5 tag demarcating a physical address, and an HTML time element denoting the time an event starts.

To summarize the point here, new HTML5 elements can be mixed into, and integrated with, traditional HTML elements.