html

HTML5

Common HTML5 mistakes

4 Nov , 2014  

Do not add wrapper class in section for styling.

<section> is not a wrapper. The <section> element denotes a semantic section of your content to help construct a document outline.

Wrong way

<section id=“wrapper”>
<header>
<h1>Heading</h1>
</header>
<section id=“main”>
<!– Page content –>
</section>
<footer>
<!– Footer content –>
</footer>
</section>

Best Practice

<body>
<header>
<h1>Heading</h1>
</header>
<div role=“main”>
<!– Page content –>
</div>
<aside role=“complementary”>
<!– Secondary content –>
</aside>
<footer>
<!– Footer content –>
</footer>
</body>

Overuse of header

If your <header> element contains only a single heading content, do not use the <header> tag. Just use <h1>,<h2>…etc instead of <header> tag.

Wrong way

<article>
<header>
<h1>Heading</h1>
</header>
<!– Article content –>
</article>

Best Practice.

<article>
<h1>My best blog post</h1>
<!– Article content –>
</article>

Don’t include unnecessary type attributes

In HTML5, there’s no need to include the type attribute on <script> and <style> elements. While these can be a pain to remove if they’re automatically added by your CMS, there’s really no reason to include them if you’re coding by hand or if you have tight control over your templates. Since all browsers expect scripts to be JavaScript and styles to be CSS, you don’t need this.

Wrong way

<link type=“text/css” rel=“stylesheet”href=“css/styles.css” />
<script type=“text/javascript” src=“js/scripts.js”></script>

Best Practice in HTML5

<link rel=“stylesheet” href=“css/styles.css” />
<script src=“js/scripts.js”></script>

You can also reduce the amount of code you write to specify your character set, amongst other things. 

Imp: In some cases like G-zip compression you need to specify the type attribute.

Not every image is a figure

<figure> could be video, audio, a chart (in SVG, for example), a quote, a table, a block of code, a piece of prose, or any combination of these and much more besides. Don’t limit your <figure>s to images. 

Wrong way

<header>
<figure>
<img src=“/img/mylogo.png” alt=“My company” />
</figure>
</header>

Best Practice

<header>
<img src=“/img/mylogo.png” alt=“My company” />
</header>

Incorrect use of form attributes

You may be aware that HTML5 has introduced a range of new attributes for forms. The common mistakes happening in “required”.

Wrong way

<input type=“email” name=“email” required=“true” />

<input type=“email” name=“email” required=“1” />

<input type=“email” name=“email” required=“false” />

 

Just add required like below.

Best Practice

<input type=“email” name=“email” required />

,


Leave a Reply

Your email address will not be published. Required fields are marked *