Getting started with HTML5

Getting started with HTML5

Blueprint always stays on the ever-changing cutting edge of web development, such as responsive design and mobile website development. HTML5 is becoming more and more popular these days, especially as more HTML5 best practices and standards are forming. Today, I will explore some of the new features of HTML5.

Advantage vs. Disadvantage

The main advantage of HTML5 is that the new tags in HTML5 are more semantic. This means that the new tags are more descriptive of what kind of content it holds. For example <header> is a HTML5 tag that holds the header content. This main advantage can mean that HTML5 is more consistent accessible because the data contained is described by the HTML5 tag.

The main disadvantage–and this is a pretty huge issue–is that HTML5 is not backward compatible by itself. This means that in older browsers, mainly Internet Explorer 8 and older, do not support HTML5 tags, making websites look “broken” sometimes.

However, because technology is always advancing, it is more beneficial to adapt to HTML5 now and provide some backward compatibility via JavaScript.

Getting started

In writing HTML code, there needs to be a doctype declared at the very beginning of the HTML document. In HTML5, this is very simple to do.

<!DOCTYPE html>

Compared to HTML4 and all of its doctypes (strict, transitional, etc.), this new HTML5 doctype is much simpler.

HTML5 tags

In HTML5, there are some new tags that were introduced. Here are some of them, which I use most often:

  • <header> This tag defines the header. It is not limited to just the header for the entire page. This tag could be used for header information in blog posts.
  • <footer> This tag defines the footer. Again, this tag is not limited to just the footer for the entire page. The <footer> tag can be used to contain footer information for other parts of the page, such as post meta data in WordPress posts.
  • <nav> This tag defines the navigation. This tag doesn’t have to be only used once. It could be used multiple times as long as it contains relevant information. For example, if it contains useful site navigation, the use is appropriate. However, if it is used to contain Previous Post or Next Post links on a WordPress blog, then the tag is not appropriate.
  • <article> This tag defines an article. It could be used multiple times. The content in the article has to be able to stand on its own independently. This means if you took the content out of the article and put it on a blank page, the content should be understood without contextual information. In WordPress, this tag would be the container for posts.
  • <section> This tag defines a section. It could be used for a variety of things. It is just a grouping of relevant content. However, this is not appropriate as a replacement for container <div> tags and should not be misused this way.

HTML5 Backward Compatibility

There are several tools available online to make an HTML5 website look good in Internet Explorer. The main is html5shiv, sometimes called html5shim. This is a JavaScript file you could embed that will make IE understand the new HTML5 tags. However, my personal tool of choice of Modernizr. This JavaScript file goes one step further and detects HTML5 and CSS3, making those features compatible with older browsers.

Conclusion

HTML5 is becoming more and more standardized and is being adopted frequently these days in front end web development. It is nice to implement HTML5 to current websites using HTML5 best practices so that they will be backward compatible as well as future proof.

By: Blueprint

The comments are closed.

No reviews yet