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
  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
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.
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
Do’s of building hybrid Application
Summary
In this article, we saw about avoiding common mistakes when using HTM5.