1. Try not to place Block elements inside Inline elements to avoid HTML Coding Mistakes
A HTML element is shown as Block or as Inline as a matter of course. Block elements, for example: div and paragraphs, make up the structure of the archive. Inline elements dwell in these blocks, for example, anchor and span tags. So you ought to never put blocks inside inline elements. These are the Most Common HTML Coding Mistakes done by programmers.
Wrong: <a href="#"><h2>Block inside Inline</h2></a> Right: <h2><a href="#">Inline inside Block</a></h2>
2. Always have the alt attribute for image tags
The ALT attribute is a required one for img Tags, it depicts the Context of the picture. It also makes the web crawler record your content better. On the off chance that the pictures is only for show, utilize a vacant ALT attribute like alt=” ”
Wrong: <img src="image1.jpeg"/> Right: <img src="image1.jpeg" alt="Cover Pic"/>
3. Try not to utilize line breaks to show a list
On the off chance that you want to demonstrate a list of things in bulleted or numbered ordered, never utilize line breaks. Utilize unordered list <ul> or ordered list <ol> tags for this purpose.
Wrong: 1. Samsung <br/> 2. Xiaomi<br/> 3. Micromax Right: <ol> <li>Samsung</li> <li>Xiaomi</li> <li>Micromax</li> </ol>
4. Try not to utilize <b> and <i> for bolding and emphasizing
<b> and <i> are utilized for bolding and emphasizing writings. You ought to rather utilize the CSS properties font-weight and font-style for these purposes. If practicality dictates to apply the styles on the document, utilize <strong> and <em> instead. They do the same job as <b> and <i> but are semantically right.
Wrong: <b>This is bold but wrong!</b> Right: <strong>This is bold and right!</strong>
5. Try not to utilize multiple line breaks to avoid HTML Coding Mistakes
The line break tag of <br/> ought to just be utilized to embed in single line breaks in the stream of section content to knock a particularly word down onto another line. It shouldn’t be utilized to make gaps between elements, rather, split the content into separate paragraphs, or adjust the margin styled by CSS.
Wrong: This is a line <br/> <br/> This is another line. Right: <p>This is a line</P> <p>This is another line</p>
6. Avoid Inline Styles
The general purpose of semantic HTML and CSS is to separate document structure and styling, so it simply doesn’t bode well to put styling specifically in the HTML document. This is also one of the Common HTML Coding Mistakes done by most of the programmers.
Wrong:
<h2 style="display:block;">Heading2</h2>
Right:
HTML:<h2 class="display">Heading2<h2>
CSS :h2 .display{display:block;}
7. Don’t add(or remove) the border attribute in HTML
Border property is also presentational and ought to be semantically left to be modified in the CSS as opposed to in the HTML document.
Wrong:
<img src="image2.png" border="0"/>
Right:
HTML:<img class="no-border" src="image2.png"/>
CSS :img .no-border{border:0px;}
8. Never use <blink> or <marquee>
These labels have never been incorporated into the official HTML standard of W3C consortium. Aside from that, their utilization is considered as ugly and unimpressive.
Wrong: <marquee>Look at this!</marquee> Right: Just don’t use it.
9. Avoid using deprecated elements
There are some old HTML tags and attributes which have been announced deplored by W3C consortium.
Here is the list of deprecated tags: <applet>, <basefont>, <center>, <dir>, <embed>, <font>, <isindex>, <menu>, <noembed>, <s>, <strike>, <u> Here is the list of deprecated attributes: align for these tags: <caption>, <iframe>, <img>, <input>, <legend>, <object>, <table>, <hr>, <div>, <h1..6>, <p> background for this tag: <body> bgcolor for these tags: <body>, <table>, <th>, <tr>, <td> clear for this tag: <br> compact for these tags: <ol>, <ul> border for these tags: <img>, <object> link for this tag: <body> no shade for this tag: <hr> nowrap for these tags: <td>, <th> size for these tags: <basefont>, <font>, <hr> start for this tag: <ol> text for this tag: <body> type for this tag: <li> value for this tag: <li> vlink for this tag: <body> width for these tags: <hr>, <pre>, <td>, <th> vspace for these tags: <img>, <object>
10. Don’t forget to put the DOCTYPE
The Doctype portrays what kind of HTML you are utilizing. In the event that it’s not there, you don’t know whether your code is substantial. In addition your program makes presumptions for you, and it may not workout the way you arranged.
