If you are still new in web designing and web development, you must be familiar with HTML code. And as i writing this, now the new HTML standard is HTML 5. Read my article HTML5 the next generation of web to know more about HTML5 standard.
If you are still new or still learning to code HTML, there are a few most common mistake in HTML code that you might do:
- Don’t forget to put the DOCTYPE
The Doctype describes what kind of HTML you are using. If it’s not there, you don’t know if your code is valid. Plus your browser makes assumptions for you, and it might not workout the way you planned. Its often left off because nobody can remember the long address. You can use a blank document template, so you don’t have to remember it, but it’ll always be available.
sample:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Don’t use deprecated elements
There are some old HTML tags and attributes which have been declared deprecated by W3C consortium. Although modern browsers currently support them, they might not in future. See this article.
Sample:instead of using <b>Bold</b> use <strong>bold</strong>
- Don’t use blink or marquee tags
These tags have never been included in the official HTML standard of W3C consortium. Apart from that, their use is considered as ugly and unimpressive. If you need to draw attention to a certain part of your document, use an alternative approach in a less offensive manner. - Don’t place Block elements within Inline elements
An HTML element is displayed as Block or as Inline by default. Block elements, such as divs and paragraphs, make up the structure of the document. Inline elements reside in these blocks, such as anchor and span tags. So you should never put blocks inside inline elements.
Example:<a href="#"><h2>Don't do this! Ever!</h2></a> <h2><a href="#">Use this instead</a></h2>
- Give alt attribute for image tags
The ALT attribute is a required one for IMG tags, it describes the context of the image. Google bot cannot read your images content, you need to give alt description about the images so Google know what is the image about.
Example:<img src="Wrong.jpeg"/> <img src="Right.jpeg" alt="Image description here"/>
- Don’t use line breaks to show a list
If you wan’t to show a list of things in bulleted or numbered order, never use line breaks. Use unordered list or ordered list tags for this purpose.
Example:1. Wrong 1<br/> 2. Wrong 2<br/> 3. Wrong 3 <ol> <li>Right 1</li> <li>Right 2</li> <li>Right 3</li> </ol>
- Don’t use multiple line breaks
The line break tag of
should only be used to insert is single line breaks in the flow of paragraph text to knock a particularly word down onto a new line. It shouldn’t be used to make gaps between elements, instead, split the text into separate paragraphs, or adjust the margin styled by CSS.
Example:Wrong line <br/> <br/> Another Wrong line. <p>Right line</p> <p>Another Right line</p>
- Don’t use inline styles
To reduce your HTML size, don’t add inline style to your HTML code. Instead add them in CSS style. That’s why the CSS for.
Example:<h2 style="color:red;">This is wrong</h2> <h2>Right</h2> In CSS file put: h2 .red{color: red;} - Don’t use the border attribute in HTML
You can add border attribute in CSS file and add them to your HTML as class or id. Don’t add them in HTML attribute. Wasting bandwidth and larger HTML files.
Example:<img src="Wrong.png" alt="" border="0"/> <img src="Right.jpg" alt=""/> In CSS file put: img .no-border{border: 0px;} - Improperly Close a Tag
This can be dangerous and the browser will miss render your website. Don’t forget it.
Example:<div>You forget to close the tag!. <div>Good one.</div> <img src="good.jpg" />
- Improperly nesting tags
Bad nesting tag also produce miss rendered your HTML file by the browser.
Example:<div><strong>Don't do this! Ever!</div></strong> <div><strong>This is good</strong></div> <strong><div>This is also BAD example</div></strong>
- Improperly Close a quote
This is can be bad too if you forget to close a quote. Produce miss rendered your HTML file by the browser.<img src="bad.jpg /> <img src="good.jpg" />
