It may seem convenient to markup your webpages with container divs throughout because after all, they get the job done. But lets understand that your markup combined with all its styling and scripts to make it an interactive website will be lacking that basic ingredient that is required to meet today's web standards.

Search engine optimization for webpages is as basic a need as id cards are at banking halls. No id, no access. Hence specially-named containers and machine readable markups can help search engines and browsers more easily identify how our pages are arranged.

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a p tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them

Semantic HTML5 also results in cleaner and easily maintainable code that is also machine readable and easily understood because not everything is a div tag or is in one.

Semantics in HTML offers an offline application cache facility which will load the page the user has visited even if the user is temporarily offline. This feature will help the files to load much faster and reduces load on server.

So all these benefits and importance, how do we apply semantic HTML? It really is simple, nothing close to learning a new framework or organic chemistry. Luckily there are sample HTMLS layouts like the one below and flowcharts as well as HTML5 elements you can make use of in you web dev practice.

Making use of semantic HTML5 won't optimize your website for search engines entirely but its the foundation to making your webpages visible and machine readable.