“You have to use the right tools for the job!” - Bob the Builder
That is one of my battle cries. I once went on a rant, my daughter (5 yrs. at the time) stood by and listened as I went on about misuse of tags to her mother who knows some HTML. Well Jessie looked at me and said “You have to use the right tools for the job! Right Dad?”, you can tell she was a big “Bob” fan.
But it is the truth for web design too. Accessibility is supported by little things like logic and standards. Most all out tags have a meaning, this meaning is often a specific action in a browser or screen reader. So by using the wrong tag for the job you disturb the logic and semantics of the site and make it harder to use.
Again I will be adding to this as time goes on, so keep checking back, I may have learned something new or remembered something.
HTML Attributes: The W3C has pretty well done away with many HTML Attributes like background colors ad borders etc. All formatting should be done using CSS. This allows you freedom for doing more things like dotted borders that HTML does not allow, you can change something site wide quickly and easily. You make your pages smaller and faster.
H1 - H6: These have a meaning, they are headers, like chapters and sub chapters in a book. They do not exist so you can have a bold text of a certain size. They tell the user agent that all text following this word are under it in the scheme of things. This word hints at what the following text is about.
So logical markup of the page makes the site more usable and accessible to everyone. If a word or phrase describes the following text, then use a header and not just bold text tells a non-visual surfer nothing.
Also it has a logical order, H1, h2, H3… do not use H4 in the middle of a page because it is the size you are looking for! Use CSS to make the correct header the size you want! Also you should never have a H3 without a H2 preceding it before H1. According to the specs you can in fact start with a H3 tag for instance as long as no earlier tags are used. So you can mark up with H3, H4, H5 & H6… the question is why would you want to? There is no logical reason to start with anything other than an H1.
Now it is sometimes argued whether a page should have 1 or multiple H1’s, this is not provable either way. Tendency seems to suggest most developers feel each page should have only 1 H1 that describes the page. Under it you can then have multiple H2 with multiple H3… as you need.
Others argue that content can/should have a H1, but Navigation is a separate area, so can/should have a H1 as well. These are reasonable arguments so the battle rages on. I prefer single H1 describing the page.
Also it is rated high with Search Engines when the best Keywords are included with the page title and the H1, it increases the ranking. Often my H1 matches my Page title, but that is not required.
Just remember to use headers in a logical manner where and in the order the are meant to be used and format them with CSS.
<I><B> vs. <Em><Strong>: Here you will hear many argue not to use I and B any more as they are depreciated. More correctly, use them right. I & B are both visual tags. They are of no use to blind users to highlight important text.
So if you wish to highlight a word and say that this word or phrase is more important then the rest, use either <em> (emphatic) or <strong>, this reacts with a screen reader and this word sticks out audibly from the rest.
Now some argue that <em>, which is usually visually italic, is harder to read for those with poor vision, so it should not be used often and mostly one should use <strong> which is shown bold.
If you wish to highlight words for some reason (studies show that when a first paragraph is shown bold it gets more attention from the reader) but that word is not more important, so you wish it to be only visually bold, then it is fine to use <b> instead, as a extra emphasis to a word with no real meaning could be confusing as well.
<Blockquote>: one of the most misused tags I see. Often used for formatting. Again it has a meaning to a screen reader, it says “the following long block of text is a quote” and is confusing if it is not a obvious quote. It is also used together with the cite attribute <blockquote cite=""> with a reference URL to whatever web site is being quoted from. Again you can/should format it with CSS. However the cite attribute has never been supported by user agents and so the info is not easily available to the user unless they look in the source code.
<Q> & <blockquote> it should be noted are per standards required to insert the needed ” quotation marks. That is to say we should simply write <q>bla bla bla</q> and the browser would add “bla bla bla”. But as usual this is definitely a no go in IE (IE 7 and below for now), so if you use the <q> element, a standards browser should install the “” for you, but IE will not and the text will not stick out. If you insert the “” for IE a standards browser will show “”bla bla bla”". That is why many developers simply use “”in the code rather than the quote element. Firefox, Safari and Opera will show quotes in the fist and double quotes in the second example. IE will show no quotes and single quotes.
Example 1: I have added no quotes, standards compliant browsers will show quotes, IE will shown none.
“Example 2: I have added quotes, standards compliant browsers will show double quotes, IE will shown single.”
<Cite>: the cite tag would seem to be just another version of quote, but it is meant to be used with the quote tag. Cite is literally the credit to the person being quoted:
As <cite>Harry S. Truman</cite> said,
<q lang="en-us">The buck stops here.</q>
Lists: Also commonly not used correctly. best example is a Navigation bar. What is it? A list of links right? So why not use the list item? It is logical right?
Well usually it is not use due to the bullets, but now with CSS those can be removed and the list laid out horizontally. It also makes formatting rollovers etc much easier by defining the <ul> and <li> rather than having to use classes.
As for which list to use, for purity, most would say that an ordered list is correct as it numbers the links in order of priority. others argue that the order you choose to place your links implies priority and therefore an unordered list is fine. It really does not matter, but unordered lists are more common.
Also do not forget Definition Lists. These are a list of Definition terms (DT) and definition definitions (DD). The DD defines the DT. Clear use would be for instance a glossary of terms. However it can be effectively used as a format for sitemaps, The site page name would be the DT, and a page description is the DD. I have written about this in more detail in my: Lists, more than just Bullets
So use lists where you need them, it makes the site logical and more attractive to search engines.
<P>: I should not have to even mention this, but even today you will still find people writing text in a DIV for instance and using multiple <BR> tags to space them. Why? I have no idea, it is beyond me. So just use the Paragraph tag as that tells the user agent that it is in fact a Paragraph… logical.
<BR>: There is a use for this and it is not making space. There are times when you want to manually break a line at a specific place. A good example of it’s use would be lines of a poem that need to be broken at specific points. There is some discussion as to whether BR is a visual tag or not, I believe it is not, the effect it has breaking lines is visual, but the tag itself should not be considered visual.
<Address>: I have dedicated a separate post to another misused tag, the <address> tag and it can be read at: Fun house mirrors and the Address tag.
<Code>: is a tag meant for code clearly. The problem with this tag is that it ignores white space and brackets, anything you use code wise will be read as source code, so you must break it out by coding the brackets with < & > so it is not read as source code. For minor work this is fine. But when you wish to use more complicated code or scripts? Then you can embed the code in <pre> tags and embed that then in code tags. This way it is still recognized as code.
<Pre>: protects white space. It means preformated and results in a ticker type type of font and all white space like indentions are protected so the code still makes sense. Semantically it makes sense as it simply days this text is preformated in a manner the author chose and when embedded within the Code tags it says that text is code.