HTML5 Best Coding Practices

HTML5 is the coding 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 content. The following brief list of HTML5 best practices assists with writing clean code.

1. Become familiar with the HTML5 source document, http://www.w3.org/TR/html5/semantics.html and bookmark it. This document groups vocabularies of relevent content into seven groups including flow, phrasing, interactive, heading, sectioning, embedded, and metadata.

2. Use a consistent grouping strategy from the beginning until the end

Make use of HTML5 elements such as , , and , where appropriate in a conistent pattern. For example, the tag defines sections within the page. However, it does not group content and should not to be confused with the tag . Another example is the tag. It is used to describe content thematically while the tag is most commonly used to group content that falls within sections. These roles can be reversed as long as the strategy for describing them remains consistent. Although quotations are optional to describe attributes in HTML5, use quotations to maintain consistency accross HTML and HTML5.

1. Make accomodations for older versions of Interner Explorer

Internet Explorer's older versions do not recognize unspecified elements. By placing this snippett of Javascript code in the head of the document is read by Internet Explorer 9 and earlier versions:

<!--[if lt IE 9]>  [removed][removed]

 

4. During the initial planning stages, create a concise outline and stick to it. Organize the outline of all content into two groups, primary and secondary information.

Example:

Primary Information Examples:

Branding

Contact Us

About My Moviepot

Navigation

Featured Films

 

Secondary Example:

Social Media

Resources

 

5. Use Helpful Resources and Extensions as a Guide and follow it:

a) Download Google Chrome's HTML5 Outliner Extention and bookmark it.

This extension lets web developers to see an outline of selected sites.

 

b) Download Firefox's HeadingsMap add-on and follow it. The document shows HTML5 outlines of selected sites.

c) Download Zurb's Foundation Framework at http://foundation.zurb.com/sites/docs/ . The framework is an open source that includes prebuilt class Ids, attributes, html5, classes, styles, etc. Keep in mind that ID values can only be used only one time on a page. Classes, on the other hand, may be used whenever desired in code (within proper naming conventions). The same class can be utilized on different elements of the same page regardless of name. To make names for classes or Ids, utilize helpful text that will make navigation easier. For example, "left-nav" is easier to remember than "nav". 

1. Bookmark RDFA.info to link data in HTML5 including reviews, events, people, places, and recipes.

6) Declare markup as UTF-8, due to the fact that it has great support for internalization and is widely accepted. Input this meta tag early in the tag.  

Source : articlesbase.com