This page looks at some of the HTML tags of fairytale worlds and prehistoric times. Bad, nasty, downright ugly little things that belong to outdated HTML standards, random proprietary nonsense that only half-work in one sub-version of one browser or tags that have simply been superseded by newer tags.
Some have suggested that although the approach of HTML Dog to teach standards-based HTML and CSS without making a song and dance about the standards is perhaps a good one, but by doing so, users (beginners in particular) may come across different approaches and bad practices elsewhere without knowing that there is anything wrong with them. So here’s HTML Dog’s answer: A guide to what not to use.
HTML has attempted to move away from the presentational and towards the meaningful, leading to a philosophy of separating content and meaning (HTML) from presentation (CSS). This general approach tends to lead to much leaner web pages, because a single set of presentational instructions (in an external CSS file) can be applied to many pages. This also makes the site much more manageable because global changes can be made from a single source.
Some of the ‘bad tags’ are simply presentational tags (such as small) that could be replaced with something meaningful or simply with CSS. Others may not only be presentational, but unnecessarily bulky (such as the font tag) or hideously detrimental to usability (such as blink).
These are some of the most common tags you might come across that have better alternatives:
- b could be used to make an element bold. Using strong (meaning strong emphasis) instead adds meaning, or to just add boldness, font-weight: bold in CSS does the job.
- i could be used to italicise an element. Using em (meaning emphasis) instead also adds meaning or font-style: italic can be used to just add the presentation.
- big could be used to make big text. Using headings instead (h1, h2 etc, when text genuinely is a heading) adds meaning, or simply using the font-size property in CSS gives more control.
- small could be used to make small text. CSS (font-size) once more gives more control.
- hr could be used to show a horizontal rule. It is unusual to use hr in a CSS designed page anyway; properties such as border-top and border-bottom or even just plain old images do the job much better.
Those tags mentioned above are all compliant with the latest HTML standards but they don’t apply any meaning to content, which all good tags should. They could be more useful but they aren’t particularly harmful, and might easily be mistaken for innocent butter-wouldn’t-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.
- u could be used to underline elements. It remains that underlined text is still associated by many with links. This is why this tag died a long time ago – you really don’t want to be underlining non-linking text.
- center could be used to centre one element within another. The CSS property text-align allows values of not only center, but left, right and justify as well.
- menu could be used to create a menu list. It does pretty much what ul does, but as an ‘unordered list’ is more general, ul stands tall over menu’s corpse.
- layer is similar to a div element positioned with CSS. These only work in old versions of Netscape. So not very useful then.
- blink or marquee. Just say “NO!” kids. They are supposed to do exactly as they say, but have very limited support and were surely only ever intended to be very, very sick jokes.
- font, which could be used to define the font name, size and colour of an element has gained a deserved reputation of being the notoriously mischievous evil goblin lord of Tagworld. Old sites (even some new ones) have font tags splattered all over their pages like a plague of termites. Much of their proliferation has come about from web authoring software, placing font tags around every element that the web author applied colour or size to. Whereas a font tag needs to be applied to every occurrence of an element (say, every time you use a p element), with CSS you can apply properties to every occurrence of an element with just one single little line of code for your whole web site. Using this method, not only is the page weight substantially lighter than an equivalent font-tag infested page, but changes can be made more easily because all you need to do is change one line of CSS rather than every instance of a font tag. This also increases the likelihood of maintaining a consistent design across your site. font tags and the inappropriate use of tables are the two most common causes of unnecessarily bloated pages.
Attributes
So you might think you’re using the good tags, but there are a few pesky parasitical attributes lurking about that might turn them sour.
- name could be used to assign a name to an element, which is perfectly acceptable in form elements such as input, but elsewhere name’s job had been replaced by the id attribute.
- text and bgcolor could be used to specify the base text colour and background colour of a page within the opening body tag. The CSS color and background-color properties can do this just as well when applied to the body selector.
- background could be used within the body tag to specify a background image for a page. CSS manages background images much better with properties such as background-image.
- link, alink, vlink could be used within the body tag to specify the colour of links (non-visited, active and visited). CSS baby – :link, :active and :visited all do the job.
- align could be used to align the content of an element (such as <div align=”center”>Stuff</div>), but, like the center tag, the CSS text-align property is the new boss.
- target could be used to open a link in various states, most commonly in a new window (such as <a href=”wherever.html” target=”_blank”>Help me</a>). Sounds nice, but you’re not doing your site any favours. Users don’t expect things (such as new windows) to appear as if by magic and the most commonly used navigational tool is the browsers ‘back’ button, which won’t work if you open a link in a new window. It’s invalid and it’s inaccessible.
Presentational attributes for tags such as width and height for images and cellpadding and cellspacing for tables remain due to the frequency that different values need to be applied different elements. They aren’t the perfect solution, but if you have a page with a large number of images or tables, you may have no other sensible choice than to use them.
The most baffling presentational attributes belong to the textarea tag where not only are the cols and rows attributes valid, they are required in the latest HTML standard.
Good tags, bad use
To get in to your house you might be able to get down on your knees and squeeze through that little doggy door but wait! There’s a big ol’ human door emblazoned with a device called a door handle! Wow! Look – the door’s, like, just the right size for a human to fit through.
The collection of HTML tags (the good ones) was designed for a specific reason and believe it or not (believe it), when you use them for the right reasons, you’ll get better results.
Web pages are much more accessible to users with disabilities when the HTML is semantic, as screen readers will often emphasize a list when it encounters a ul tag or a heading when it encounters an h1 or h2 tag for example.
The most misused HTML of all is tables. Tables are commonly used for layout, but they should only be used to display tabular data, as they were always only intended to. The non-table layout method isn’t some kind of Zen Buddhist quest for true geek enlightenment, there is a real practical benefit of not only dramatically reduced page weight, but also being easier to maintain or redesign.
Sometimes designers will use some of those tags and attributes mentioned here (particularly tables for layout) to achieve a transitional design – one that will support older browsers (in particular Netscape 4) as well as modern ones. Tables will indeed allow better presentational control over the CSS inept Netscape 4, but its users are miniscule in number and decreasing while those to whom table-layout would be a great disadvantage – mobile device users – grow in number. The advantages of table-free design mentioned above far outweigh the disadvantages and should result in pages that, although minimally styled to a minority, retain full functionality in all browsers.
Frames
Goldilocks thought it would be a really good idea to help herself to a bowl of porridge but then three large carnivorous mammals showed up and threw her out of a window. Frames are bowls of porridge that belong to bears. They might look nice, but it would be quite perilous to go anywhere near them.
Most web sites do not use frames and in general web users are used to a single document as a page.
But if, for some reason, you want to prevent users adding a specific page to their bookmarks or if you want to prevent them recommending a specific page via email or instant messaging or if you want to add a whole other level of complexity to users with disabilities using screen readers who will need to navigate between frames on top of navigating through a page or if you want to confuse the hell out of search engines, go ahead, use frames.
In general, frames do nothing but add complexity and subtract usability.
If you follow these rules of thumb, you shouldn’t go far wrong:
1) If the tag or attribute name even so much as whispers anything suggesting presentation, don’t use it. That’s CSS’s job. And CSS does the job better.
2) Use the tag to do what its name implies. Tables are for tabular data. Headings are for headings. Etcetera etcetera.
3) When you’ve got specific content, use the appropriate tags. Lists for lists, headings for headings yada yada yada.
iZkin 
留下评论
Comments 0