Line25

You’re Doing it Wrong: Common HTML Tag Misuses

Read the full post

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.

Misuse of the <br> tag

The <br> HTML tag

How not to use the <br> tag

A common misuse of the <br> tag is to use it to create spaces or gaps in your content. WYSIWYG editors are notorious for injecting multiple line breaks or empty paragraph tags.

How to properly use the <br> tag

The <br> is used to insert a line break in a sentence. Examples might be to correctly lay out an address. Use paragraph elements to split up your content and use CSS margins to alter the spacing between them.

Misuse of the <div> tag

The <div> HTML tag

How not to use the <div> tag

When we first get to grips with HTML and coding in CSS we often get carried away with our divs and surround almost every page item with its own div tags.

How to properly use the <div> tag

The <div> tag is perfectly acceptable to use to define the main page structure, but always try to use more suitable tags for your page elements. Paragraph tags, ordered/unordered lists and definition lists can be more semantic choices.

Misuse of the <small> tag

The <small> HTML tag

How not to use the <small> tag

The <small> tag is often wrongly used as its name suggests, to create text that’s small in size.

How to properly use the <small> tag

CSS should always be used for presentational styling, so use the font-size CSS property to control your text sizes. The <small> HTML tag is reserved for defining “smallprint” or legal text.

Misuse of the <hr> tag

The <hr> HTML tag

How not to use the <hr> tag

The use of the <hr> is pretty rare these days, but when you do see it you can guarantee it’s being misused as a presentational line between sections of a page.

How to properly use the <hr> tag

These days the CSS border property is the correct solution in most situations, however the <hr> tags still has its use in specific situations when defining layouts containing copy such as book chapters or poetry stanzas.

Misuse of the <title> tag

The <title> HTML tag

How not to use the <title> tag

In most cases the HTML <title> tag (not the attribute) is misused in two extremes. It either contains no valuable information, or it’s packed full of endless keywords for “SEO”.

How to properly use the <title> tag

The <title> should accurately but concisely describe the contents of the page. It’s important to include keywords that relate to the content as it is recognised by search engines, but it shouldn’t be abused.

Misuse of the <img> tag

The <img> HTML tag

How not to use the <img> tag

The misuse of the <img> is actually more to do with the misuse of its alt attribute. Often the text within the alt attribute is completely irrelevant (if it exists at all!).

How to properly use the <img> tag

<img> tag alt attributes should contain an accurate description of the image. If the image is being used as a link give an insight to where the link will go. If the image has no importance an empty alt attribute is acceptable.

Misuse of the <label> tag

The <label> HTML tag

How not to use the <label> tag

<label> is another tag that is often left out altogether rather than being misused. When it does appear it rarely includes the for attribute.

How to properly use the <label> tag

Use the <label> tag to relate a field to its descriptive label. For extra usability points add the for attribute to allow the user to click the label to activate the relevant input field.

Misuse of the <address> tag

The <address> HTML tag

How not to use the <address> tag

The name of the <address> wrongly suggests that it should be used to surround a postal address on a contact page.

How to properly use the <address> tag

The correct use of the <address> tag is to define the author or owner of the document. Therefore it’s usually wrapped around their name along with their contact email address or telephone number.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

63 Comments

  1. Not sure I agree on the common misuse of the horizontal rule. It's fine to use it as a long break in a blog post, in order to indicate a shift in subject.

    • That sounds like a perfectly reasonable use to me. As for misuses you often see it used just to insert a line somewhere in a design, rather than it having a particular use as a HTML element.

  2. It should be noted that the for attribute in the label tag can be left out if the label tag is wrapping around the input element.

    Fx.

    <label>
    A radio button
    <input type="radio" name="radio" title="radio" id="radio" />
    </label>

  3. Marlou says:

    Thanks for this list.
    Is <small> still used in HTML5? I've actually never used the adress-tag before, shame on me. Should remember that one.

  4. Stephen says:

    We call the overuse of <div> tags "div-itis". Easy to get carried away with sometimes. Nice article.

  5. Laura says:

    Oh my gosh – I've been misusing the address tag for years! I feel like a moron!

  6. Thanks for these. I must admit that I do use the small tag for small text, rather than for legal text.

  7. Andrew says:

    Not sure I agree on the statement that in some cases an empty ALT tag is acceptable. From what I understand, an empty alt tag won't pass validation (but maybe I'm thinking of "missing" as oppose to "empty").

    But in any case, I can't think of too many reasons why NOT to put an ALT tag. You don't have to keyword stuff it to death… but the more opportunities to add content, the better. No?

    • Timothy McClanahan says:

      If you have an image that is nothing but decoration, there is a good chance it needs no alt text. A MISSING alt attribute will trigger a validation error, but if the alt attribute is there but empty, it'll validate just fine.

  8. Ryan says:

    "If the image is being used as a link give an insight to where the link will go."

    Isn't that what the title="" tag on the link is for? The alt="" tag will only ever describe the image in my code :)

    • Ash says:

      I am in agreement with this, stick the title on the <a> and keep the alt on the <img> to describe the image.

    • Rob Saunders says:

      Uh oh… that's wrong. Think about your markup as if you are blind (which essentially is what semantic markup is about… the visual representation may have no bearing on the meaning of the content).

      If you are relying on a screen reader to navigate, you don't actually care what the image visually displays, just what it represents.

      I remember looking at alt tags of one of the biggest news papers in Australia, and they'd alt-tagged an image link to an article about mature people exercising more as 'bowl of fruit with a man behind it'. It is what the image contained, but not what it represented.

      A very important and an easy mistake to make.

      • Gert says:

        You have the title tag to tell blind people what the image represents. The alt tag is to tell what it is.

        So if it's an image of a car, it's fine to say in the alt tag that it's an image of a Porsche 550 Spyder. The title tag is used to tell that it's the car where James Dean crashed in and died.

        And that's not only for blind people. If the images is removed from the host, non-blind users will also see the alt tex instead of the image. Then it's still perfectly acceptable to display the text Porsche 550 Spyder (or "image of silver coloured Porsche 550 Spyder") and still use the title tag to give some more information.

  9. Katie says:

    I always use CSS to make my font small for legal text, but now I will definitely use "small". Didn't know it even existed. Thanks

  10. Nick West says:

    I would add that the IMG tag is also misused by using it for style elements rather than setting those style elements as a background-image in the CSS.

    IMG should be reserved for user content. If the image looks out of place or weird when you disable your style sheet, it probably shouldn't be an IMG or you should consider cutting it differently.

  11. vijay says:

    Nice article, Thanks to point out the misuse of these tags. specially <div> tag which is overused by many designers, now we can use new and more semantic HTML5 tags like <article>, <header>, <footer> etc.

  12. Spencer says:

    This was a great refresher.

  13. I dislike designs that resort to using <br>, <small>, but maybe it's more of a pet peeve of mine.

  14. antjanus says:

    I'm pretty sure that the address tag is irrelevant today and for the purposes of SEO and parsing by services, one should stick to microformats :)

  15. Ali Rowan says:

    Thanks for the tips! As someone who remembers learning HTML from the all-mighty Neopets at the age of ten and wants to pick it back up legitimately this time, I found this exceptionally helpful in how digestible you've made the information.

  16. it's great resource, I have noticed I misused many tags. So I decide to re-study the css or html.

  17. georgecalm says:

    Nice list. Thanks!

  18. ardianzzz says:

    Yeah! validation nonsense without semantic code.

  19. Alex says:

    Nice list, but still even you are not using the breakline tag correct.

    Because the correct tag is <br /> and not <br>

    • Rasmus Lauridsen says:

      Only if he is doing XHTML.

      HTML defines <br> without closing the tag.
      XHTML on the other hand, being XML does not allow unclosed tags so it uses <br />.

  20. Kristan says:

    The <small> tag should not be used to make text small??

    *doh*!

    Poorly chosen tag name, that.

    • I'd be interested to read more specifically about the < small > tag, as rather than being for legal text I'm guessing that it was designed for using with disclaimer text (ie. any declarations at the bottom of the page, legal or otherwise). Would provide a slightly wider use for the tag.

      I must point out that I never use it though! :)

  21. Christian says:

    Back when XHTML started to get some visibility it included the promise of being able to create your own elements since it was a blend of HTML and XML. So I remember thinking (ten years ago) that if you created an element that was for surrounding a postal address on a contact page that element would very like be called . . . drum roll, please . . . ADDRESS. But people get on your case for using the ADDRESS element for marking up postal addresses but even with HTML5 there is no adequate mechanism for it apart from a generally messy combination of DIV and SPAN elements, such as the microformats generator churns out.

  22. Christian says:

    Speaking of HRs I see people use graphic elements on pages all the time that are just images inserted into the flow of the document when they should really be background images on an HR element.

  23. Excellent article as always.. The <br> tag is a pet peeve of mine ;)

  24. This was a great post. I was a good reminder of the complexities of web page design.

  25. Logo Blog says:

    Very nice beginning information! Great way of explanation! which i like most! i will look forward for a new lesson! thanks for doing this nice job!

  26. Tony says:

    Mistakes we all made in the beginning ;) I think….

  27. Where did you get the idea that "The <small> HTML tag is reserved for defining “smallprint” or legal text"?

  28. JimJ says:

    Possibly "misuse" is a bit extreme in a couple of cases, but generally a good article. Cheers

  29. how come u know about the <small> ?

  30. Excellent article. thanks for doing this nice job!

  31. Mike says:

    Great resource, so many times I see websites that are poorly built and I think you make your argument very clear.

    I also really don't like WYSIWYG editors that so badly encode pages, it breaks my heart! Ok maybe not that extreme, but still….

  32. Brad says:

    But..its so much easier to not understand them when its obvious they are self explanatory

    < / sarcasm off >

  33. Clain Dsilva says:

    Good article,

    I agree with the misuse of <BR> and <hr> tags.. I have seen many while I do a rework on already done websites.

    Another notorious one is use of "&nbsp;" to put more than one space.

  34. matiangul says:

    Thanks for lesson of semantic code. Great and short article.

  35. It drives me CRAZY when I see multiple <br> tags in a row!!
    <br><br>
    This was a good article. Thank you.

  36. D says:

    So…what, semantically, is a mailing address? Gotta admit I've been using <address>. It ain't a <p> or a <div>, etc… help?

    Great article!

  37. Majalah says:

    ocassionally I still use <br / > for dirty solution :D

  38. S3bY says:

    Great tips collection! A mine gold I might say for a beginner!

  39. Jo Cox says:

    Great article, never used the <address> tag before, you learn something new every day!

  40. Christie says:

    I'll admit.. I use the small tag to make small text when I am lazy :D

  41. W3Spor says:

    Thanks, useful information about correct coding… I need it!

  42. Useful article, I didn't even know about the <small> tag

Sorry, comments are now closed