10 Common HTML Mistakes to Avoid

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 StylesYou 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 HTMLBorder 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:

HTML Validator

CSS Validator

About Me!

I’m Abdul Alim. I’m a professional Web Developer. You can contact with me for any web design and Development Issue. Thank You.

https://goo.gl/n9Txlg