10 Common HTML Mistakes to Avoid

[l0calh0st]

10 Common HTML Mistakes to Avoid

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" alt="" border="0"/>

Right:
HTML =>
<img src="mypic.jpg" alt=""/>
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.

Credits: Krypto

l0calh0st Reviewed by l0calh0st on 29th Sep 2010. 10 Common HTML Mistakes to Avoid 10 Common HTML Mistakes to Avoid 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: Rating: 5

[ttexta]

lol, nice find - or did you write it o.o assuming your not Krypto

found this rather interesting

[l0calh0st]

Found

[shadow.prx]

lmao i loved this bit so true


Wrong:
<marquee>Look at me!</marquee>

Right:
Just don’t use it.

[rapid-ddldotcom]

its nice

[Royal King]

Thank you

[Ornlu]

lmao i loved this bit so true


Wrong:
<marquee>Look at me!</marquee>

Right:
Just don’t use it.

lol all the points are right but not this one man
even if its not a standard, who cares
we will have to add shitload of crap js to achieve BLINK

[skado]

nice tips

[Jumbo]

Thanks