ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Top 5 HTML5 Best Practices to create responsive websites

Updated on January 31, 2016

HTML5

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.

  1. 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.

  2. 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.

  3. Accomodate older browsers

Some earlier versions of Internet Explorer do not recognize unknown elements. Therefore, the following snippett of Javascript in the head of the document is read by Internet Explorer 9 and earlier versions:

4. During the planning phases, create an outline. Organize content into two groups, primary information and secondary information.

Example:

Primary:

Navigation

Branding

About My Moviepot

Featured Films

Contact Us

Secondary Information:

Social Media

Placement:

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.

  1. 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.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.