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>.
- <!-- HTML 4-style code -->
- <
- div id = "wrapper" >
- <
- div id = "header" >
- <
- h1 > welcome to C - Sharpcorner < /h1>
- <!-- Header content -->
- <
- /div> <
- div id = "main" >
- <!-- Page content -->
- <
- /div> <
- div id = "secondary" >
- <!-- Secondary content -->
- <
- /div> <
- div id = "footer" >
- <!-- Footer content -->
- <
- /div> <
- /div>
- <body>
- <header>
- <h1>Welcome to C-Sharpcorner</h1>
- <!-- Header content -->
- </header>
- <div role="main">
- <!-- Page content -->
- </div>
- <aside role="complementary">
- <!-- Secondary content -->
- </aside>
- <footer>
- <!-- Footer content -->
- </footer>
- </body>
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.
- <hgroup>
- <h1>welcome to c-sharpcorner</h1>
- <h2>welcome to C# corner</h2>
- </hgroup>
- Use this instead of
- <header>
- <h1>welcome to C# corner</h1>
- <p class="subheading">Space is not the only void</p>
- </header>
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.
- <header>
- <h1>Wake up sheeple!</h1>
- <p><a href="news.html">News</a> -
- <a href="blog.html">Blog</a> -
- <a href="forums.html">Forums</a></p>
- <p>Last Modified: <time>2009-04-01</time></p>
- <nav>
- <h1>Navigation</h1>
- <ul>
- <li><a href="articles.html">Index of all articles</a></li>
- <li><a href="today.html">Things sheeple need to wake up for today</a></li>
- <li><a href="successes.html">Sheeple we have managed to wake</a></li>
- </ul>
- </nav>
- </header>
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.
- <link type="text/css" rel="stylesheet" href="css/styles.css" />
- <script type="text/javascript" src="js/scripts.js"></script>
- Instead use the below code:
- <link rel="stylesheet" href="css/styles.css" />
- <script src="js/scripts.js"></script>
Boolean attributes
Boolean attributes contain the properties given below. - autofocus
- autocomplete
- required
Don’t use the code, mentioned below.
- <input type="email" name="email" required="true" />
- <!-- Another bad example -->
- <input type="email" name="email" required="1" /> use below code
- <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.