HTML5 has been the most hyped technology for quite a while now. While most browsers have implemented the W3C specifications of HTML5 natively, some still lag far behind like IE (as you’d expect). As HTML5 continues to amaze us with the awesome CSS3 as its sidekick, there are a fair share of misconceptions that it brings to many front end geeks. Today, we list the 3 misconceptions people have about HTML5.
1. The <header> and <footer>
Many front end developers use the newly introduced HTML5 elements <header> and <footer> incorrectly. These two semantic elements are not confined to your web page document. Instead, these two elements are supposed to be used at any place that requires a header and a footer as a wrapper.
For example, you can use the <header> to display the title of a blog post and the <footer> to display other pieces of information like author, date and category. Oh and you can use them multiple times in one page, it doesn’t really matter.
Here’s what W3C has to say:
A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
2. The <div>
Some people might have a feeling that they should say bye to the good ole’ <div> element. Well, think again, because that <div> element isn’t going away. But what’s worse is when front end developers try to disregard the use of the <div> tag completely since <header>, <footer> and a slew of other HTML5 elements have come their way.
That’s a big misconception right there. You obviously can use the <div> tag to create a header and there is no difference in using <header> either, since it’s just the semantics. You can simply create a header like the old times using <div class=”header”> or <div id=”header”>. So, get this in your head, the <div> element isn’t going away nor does HTML5 ask you to ignore using it.
However, to make your website more semantic, you should consider using the new HTML5 elements like <header>, <footer>, <aside>, <figcaption>, <small> and more. If you are using Bootstrap, you might already have incoprated a lot of HTML5 into your web design.
Here’s a nice flow chart from HTML5Doctor to help you decide the use of elements.
3. HTML5 vs Native
There is a war going on between which is better, HTML5 or Native. The winner is truly HTML5. Here’s what Mozilla had to say. Obviously just because Facebook moved to Native doesn’t mean HTML5 sucks and native is better. That was an exception (a native solution was better to display their news-feed, as per Facebook Engineering).
There are more reasons for you to make your next app using HTML5 using the technologies you know best (HTML, CSS, JS). There are softwares like PhoneGap and Conduit Mobile available to compile your code into iOS ready apps. This makes things much cooler.
Is the world ready for HTML5?
The answer is, yes. The world is ready for HTML5 and all the latest versions of Firefox, Chrome, IE, Opera and Safari support the technology very seamlessly. Obviously you should resort to fallback code to make your app functional on older versions and IE has some issues like that’s been forever.
But yes, the world is ready for HTML5 and it is being used across the industry, to build a wide variety of platforms, and guess what, the web is going to get just more semantic.
About Ali Gajani
Hi. I am Ali Gajani. I started Mr. Geek in early 2012 as a result of my growing enthusiasm and passion for technology. I love sharing my knowledge and helping out the community by creating useful, engaging and compelling content. If you want to write for Mr. Geek, just PM me on my Facebook profile.
