Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
HTML 5

Avoiding Common Mistakes In HTML5

The following are do's and don'ts when using HTML5 to design the Web Apps. 

Don’t practice section as a wrapper for styling

One of the most shared problems I see in people’s code is the random replacement of <div>s with HTML5 dividing elements — specifically, replacing wrapper <div> (used for styling) with <section>.

  1. <!-- HTML 4-style code -->   
  2. <  
  3. div id = "wrapper" >  
  4.     <  
  5.     div id = "header" >  
  6.     <  
  7.     h1 > welcome to C - Sharpcorner < /h1>   
  8.     <!-- Header content -->   
  9.     <  
  10.     /div>  <  
  11.     div id = "main" >  
  12.     <!-- Page content -->   
  13.     <  
  14.     /div>  <  
  15.     div id = "secondary" >  
  16.     <!-- Secondary content -->   
  17.     <  
  18.     /div>  <  
  19.     div id = "footer" >  
  20.     <!-- Footer content -->   
  21.     <  
  22.     /div>  <  
  23.     /div>  
Here, <section> tag is not a wrapper. The <section> tag is used to represent the section with the content.
  1. <body>  
  2.     <header>  
  3.         <h1>Welcome to C-Sharpcorner</h1>  
  4.         <!-- Header content -->  
  5.     </header>  
  6.     <div role="main">  
  7.         <!-- Page content -->  
  8.     </div>  
  9.     <aside role="complementary">  
  10.         <!-- Secondary content -->  
  11.     </aside>  
  12.     <footer>  
  13.         <!-- Footer content -->  
  14.     </footer>  
  15. </body>  
Use hgroup and header when they are essential

The <hgroup> element was introduced in HTML 5 and was used to group a set of h1–h6 elements when the heading has multiple levels. It is now depreciated.

Don’t use the code, mentioned below.
  1. <hgroup>  
  2.     <h1>welcome to c-sharpcorner</h1>  
  3.     <h2>welcome to C# corner</h2>  
  4. </hgroup>  
  5. Use this instead of  
  6. <header>  
  7.     <h1>welcome to C# corner</h1>  
  8.     <p class="subheading">Space is not the only void</p>  
  9. </header>  
Don’t wrap all list of links in <nav> 

The <nav> element represents a section with the navigation links.

Use Navigation links
  • Links to the another page.
  • Links to the same page

If you want to link to another page, try the code mentioned below.

  1. <header>  
  2.     <h1>Wake up sheeple!</h1>  
  3.     <p><a href="news.html">News</a> -  
  4.         <a href="blog.html">Blog</a> -  
  5.         <a href="forums.html">Forums</a></p>  
  6.     <p>Last Modified: <time>2009-04-01</time></p>  
  7.     <nav>  
  8.         <h1>Navigation</h1>  
  9.         <ul>  
  10.             <li><a href="articles.html">Index of all articles</a></li>  
  11.             <li><a href="today.html">Things sheeple need to wake up for today</a></li>  
  12.             <li><a href="successes.html">Sheeple we have managed to wake</a></li>  
  13.         </ul>  
  14.     </nav>  
  15. </header>  
Don’t include unnecessary type attributes

Don’t include unnecessary type attributes in <script> tag. If you are using JavaScript, use the attribute as text/Javascript in script tag.

Don’t use the code, mentioned below.
  1. <link type="text/css" rel="stylesheet" href="css/styles.css" />  
  2. <script type="text/javascript" src="js/scripts.js"></script>  
  3. Instead use the below code:  
  4. <link rel="stylesheet" href="css/styles.css" />  
  5. <script src="js/scripts.js"></script>  
Incorrect use of form attributes.

Boolean attributes

Boolean attributes contain the properties given below.
  • autofocus
  • autocomplete
  • required

Don’t use the code, mentioned below.

  1. <input type="email" name="email" required="true" />  
  2. <!-- Another bad example -->  
  3. <input type="email" name="email" required="1" /> use below code  
  4. <input type="email" name="email" required /> where, required=” ” required required=”required”  
Don'ts of building hybrid Application 
  • Don’t Use Heavy Libraries, Frameworks or Plug-ins.
  • Don’t Use HTML5 for the apps, which are multi-purpose or complex.
  • Don’t Load Views All at once.
  • Don’t Use Animation or Graphic-intensive apps.
  • Don’t Imagine your app to run perfectly in iOS and Android out of the gate.

Do’s of building hybrid Application

  • For data-driven apps, use JavaScript MVC Frameworks like AngularJS.
  • Consider using a UI Library such as Ionic.
  • Do HMTL/CSS/JS to diminish the file size and improve the performance
  • Do Head All Your Graphics.

Summary

In this article, we saw about avoiding common mistakes when using HTM5.
Ebook Download
View all
Learn
View all