Post
Ask Question

Avoiding Common Mistakes In HTML5

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. <    
  2. div id = "wrapper" ><    
  3.     div id = "header" ><    
  4.     h1 > welcome to C - Sharpcorner < /h1><    
  5.     /div><    
  6.     div id = "main" ><    
  7.     /div><    
  8.     div id = "secondary" ><    
  9.     /div><    
  10.     div id = "footer" ><    
  11.     /div><    
  12.     /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>  
  5.     <div role="main"></div>  
  6.     <aside role="complementary"></aside>  
  7.     <footer></footer>  
  8. </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.   
  7. <header>  
  8.     <h1>welcome to C# corner</h1>  
  9.     <p class="subheading">Space is not the only void</p>  
  10. </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 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>  
  4.         <a href="news.html">News</a> -       
  5.         <a href="blog.html">Blog</a> -            
  6.         <a href="forums.html">Forums</a>  
  7.     </p>  
  8.     <p>Last Modified:   
  9.         <time>2009-04-01</time>  
  10.     </p>  
  11.     <nav>  
  12.         <h1>Navigation</h1>  
  13.         <ul>  
  14.             <li>  
  15.                 <a href="articles.html">Index of all articles</a>  
  16.             </li>  
  17.             <li>  
  18.                 <a href="today.html">Things sheeple need to wake up for today</a>  
  19.             </li>  
  20.             <li>  
  21.                 <a href="successes.html">Sheeple we have managed to wake</a>  
  22.             </li>  
  23.         </ul>  
  24.     </nav>  
  25. </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. <input type="email" name="email" required="1" /> use below code      
  3. <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 on 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.
Next Recommended Reading Autocomplete in HTML5