Skip to content

ivan

Resume

Most Common HTML Mistakes

If you are still new to web design and web development, you must be familiar with HTML code. As I am writing this, the new HTML standard is HTML5. Read my article HTML5 the next generation of web to know more about the HTML5 standard.

If you are still new or still learning to code HTML, here are a few of the most common mistakes in HTML code that you might make:

  1. 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 work out the way you planned. It’s 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">
  1. Don’t use deprecated elements
    There are some old HTML tags and attributes which have been declared deprecated by the 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>
  1. Don’t use blink or marquee tags
    These tags have never been included in the official HTML standard of the W3C consortium. Apart from that, their use is considered 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.
  2. 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>
  1. 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 image content; you need to give an alt description about the images so Google knows what the image is about.
    Example:
<img src="Wrong.jpeg"/>
<img src="Right.jpeg" alt="Image description here"/>
  1. Don’t use line breaks to show a list
    If you want 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>
  1. Don’t use multiple line breaks
    The line break tag <br /> should only be used to insert a single line break in the flow of paragraph text to knock a 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 with CSS.
    Example:
Wrong line
<br/>
<br/>
Another Wrong line.

<p>Right line</p>
<p>Another Right line</p>
  1. Don’t use inline styles
    To reduce your HTML size, don’t add inline style to your HTML code. Instead add them in a CSS file — that’s what CSS is for.
    Example:
<h2 style="color:red;">This is wrong</h2>

<h2>Right</h2>
In CSS file put: h2 .red{color: red;}
  1. Don’t use the border attribute in HTML
    You can add border attributes in a CSS file and add them to your HTML as a class or id. Don’t add them as HTML attributes — it wastes bandwidth and results in 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;}
  1. Improperly close a tag
    This can be dangerous and the browser will misrender your website. Don’t forget it.
    Example:
<div>You forget to close the tag!.
<div>Good one.</div>
<img src="good.jpg" />
  1. Improperly nesting tags
    Bad nesting also produces misrendered HTML.
    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>
  1. Improperly close a quote
    This can be bad too — forgetting to close a quote produces misrendered HTML.
<img src="bad.jpg />
<img src="good.jpg" />