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.
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.
Compared to HTML4 and all of its doctypes (strict, transitional, etc.), this new HTML5 doctype is much simpler.
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
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.
The comments are closed.
No reviews yet