The following is a list of common HTML mark up mistakes made by front end developers. Whether you are a newbie web designer, or a programmer who wants to try his hands in UI designing, try to avoid these mistakes.
1. 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.
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 describes the context of the image. It helps your user on a screen reader or with a slow connection to decide whether or not the image is important. It also makes the web crawler index your contents better. If the images is just for show, use an empty ALT attribute like alt=””
Wrong: <img src="profilepic.jpeg"/>
Right: <img src="profilepic.jpeg" alt="Profile pic of the user"/>
3. 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 <ul> or ordered list <ol> tags for this purpose.
Wrong:
1. Steve Jobs<br/>
2. Bill Gates<br/>
3. Linus Torvalds
Right:
<ol>
<li>Steve Jobs</li>
<li>Bill Gates</li>
<li>Linus Torvalds</li>
</ol>
4. Don’t use <b> and <i> for bolding and italicizing
<b> and <i> are used for bolding and italicizing texts. However semantically they are classified as presentational tags. You should rather use the CSS properties font-weight and font-style for these purposes respectively. If practicality dictates to apply the styles on the document, use <strong> and <em> instead. They do the same job as <b> and <i> but are semantically correct.
Wrong: <b>This is bold but wrong!</b>
Right: <strong>This is bold and right!</strong>
5. Don’t use multiple line breaks
The line break tag of <br /> 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.
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
You have probably heard this a lot of times before. The whole point of semantic HTML and CSS is to separate document structure and styling, so it just doesn’t make sense to place styling directly in the HTML document.
Wrong:
<h2 style="color:red;">Wrong</h2>
Right:
HTML =>
<h2>Right</h2>
CSS =>
h2 .red{color: red;}
7. Don’t add(or remove) the border attribute in HTML
Border attribute is also presentational and should be semantically left to be modified in the CSS rather than in the HTML document.
Wrong:
<img src="mypic.png" border="0"/>
Right:
HTML =>
<img src="mypic.jpg"/>
CSS =>
img .no-border{border: 0px;}
8. Never use <blink> or <marquee>
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.
Wrong: <marquee>Look at me!</marquee>
Right: Just don’t use it.
9. Avoid using 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. Check out this article that lists almost all of the deprecated elements.
10. 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.
Finally, take the help of online HTML/CSS validator to find loopholes in your mark up. Here are the links for a couple of them:
This is a valuable resource for people who have just begun their foray into the world of HTML. I have printed this using my printer and stuck it on my wall for reference. Cheers!
This is the best tutorial on HTML I have ever seen!
Really a useful HTML tutorial for new HTML learners and newbie bloggers.
Thanks for Sharing!
Thank you for the tip 4 i always use bold tags .
You get me in the right place , i will apply this advice .
Can i ask you question ….
i heard that moving scripts into external sources helping in decrease page size so fasting page load , My question HOW i do that?
Very Good and absolutely useful tutorial. thank you.
woops!! Amazing how many things I’m doing incorrectly. I originally learned html in 1994, I obviously need to update my html coding. I use way too often. Thank you for these tips!!
Some of the mistakes listed are not browser-breaking mistakes but great ways to design from the css style sheet which make it easier for the browsers and easier for the designer to make changes once.
As far as search engines go, they are concerned with making sure they list sites that will load quickly and they are using big bucks to buy positions on handheld devices so your site must be able to display in many devices and many browsers so being w3c compliment is important.
thanks t&t
for reminding me
to pay attention to the details
Im doing most of the mistake mentioned by you
After seeing your article i think there is chance for correcting myself
Thank you very much for this list of tricks.
I think clean code helps with SEO. It reduces the code to content ratio, improves site speed, and makes editing a page much easier. I see these mistakes alot when updating a clients site for the first time.
Having valid HTML is a good practice and in my opinion it definitely helps the crawler crawl the site efficiently, so to some degree (probably very minor) it helps with the indexing.
A question more so than a comment.
Does have valid HTML matter to search engines. I believe that Google do not care if your website validates or not but what is the stance of other search engines? Is there added benefits for good HTML?
A great post with some concrete examples. Excellent.