Top 5 HTML5 Best Practices to create responsive websites
HTML5 Best Practices
In comparison to its predecessors, HTML5 is a markup language that provides web developers the ability to describe the context for when events happen as well as the ability to explain groupings of information. This list of HTML5 best practices assists with writing clean code.
Read through the HTML5 source, http://www.w3.org/TR/html5/semantics.html. The document seperates vocabularies of content into seven groups including flow, heading, sectioning, embedded, phrasing, interactive, and metadata.
Use Elements Consistently
An element such as <headings> defines sections, but does not group content and is not to be confused with <head> . A tag such as <section> is used to describe content thematically while <article> is most commonly used to group content within sections. However, these roles may be reversed as long as the strategy is consistent.
Accomodate older browsers
4. During the planning phases, create an outline. Organize content into two groups, primary information and secondary information.
About My Moviepot
5. Use Helpful Extensions:
a) Google Chrome's HTML5 Outliner Extention http://goo.gl/OD2VYx
Allows web developers to see an outline of selected sites.
b) Firefox's HeadingsMap add-on shows HTML5 outlines. https://addons.mozilla.org/en-US/firefox/addon/headingsmap/
c) Use Zurb's Foundation Framework http://foundation.zurb.com/sites/docs/ to access prebuilt class Ids, attributes, html5, classes, styles, etc. Remember that ID values can only be used once on a page. Classes can be used whenever desired.
Use RDFA.info to link data in HTML5 including events, people, places, reviews, and recipes.
e) Use Schema.org to structure data on webpages, email, etc.