Semantic HTML
means using HTML tags for their implied meaning, rather
than just using (meaningless) div and span tags for
absolutely everything. Why would you want to do this?
Depending on the tag, the content in the tag can be
interpreted in a certain way. Here are some examples.
Header tags
If you use < h1 > instead of < div
class="header" >, and < h2 > instead
of < div class="subheader" >, et cetera,
Google and other search engines will interpret your
headers as being important titles in your page. This
way, when people search on the words in your headers
and sub-headers, your page will be considered more relevant
(and rank higher). Plus, it's much shorter and cleaner.
This works both ways: don't use header tags for anything
except headers, especially not increasing your font
size or outlining your search engine keywords. This
way, your page can be parsed for structure (you can
do this with the W3C HTML Validator). This structure
can then be used by screen readers or other tools to
build a table of contents for your page.
Form labels
The < label > tag is so sadly forgotten.
It's not immediately clear what the point of using it
is, so very few web pages take advantage of it. The
label tag is used to identify a label for an input field,
for example "E-mail Address". It can either be used
be wrapping it around the text and input field like:
< label >First Name: < input name="fname"/
>, or it can be used with the for
attribute like so: < label for="fname" >First
Name: < input id="fname" name="fname" />.
Why use the label tag instead of
? Well, it's shorter and cleaner.
But it also let's screen readers and other tools identify
the text associated with an input field. Without using
the label tag, it can be very difficult for some people
to know what is supposed to go into your form fields.
Tables
These days, everyone's moving away from using tables.
This is great because tables aren't intended for structuring
the way your web page looks. But tables still have
a very important purpose. Any time you need to display
data that would go in a spreadsheet, tables are here
to help.
When using tables, there are a number of tags and
attributes that aren't widely used, but are very important
for accessibility. Use the summary attribute
to give a longer summary of the data in the table.
Use the < caption > tag to give a brief
title to the data. Use < th > tags to
identify the column and row headers in your table.
Then, you may want to use the headers attribute
on the < td > tags to identify which
headers apply to that cell. For more examples and
details on accessibility with tables, see the W3C's
Accessibility Guidelines.
Lists
Lists are the new tables. Whereas tables are intended
for grids of data, lists are intended for lists of
content. This is great for us, because most web pages
are essentially lists of different things. For example,
look at this site. On the front page, I have a list
of blog entries in the centre. On the sides, I have
lists of links (archive, categories, et cetera), and
the sides themselves are lists of lists. If I had
used tables, I would've been saying "this stuff on
the left has something to do with the stuff in the
middle", but it doesn't, really. By using lists, I'm
simply saying "this stuff is a list of items that
have something to do with each other", which they
do.
You have three types of lists to choose from, but
choose wisely. There are Ordered Lists (< ol
>), Unordered Lists (< ul >),
and Definition Lists (< dl >). Only use
Ordered Lists when the entries have some kind of order.
Use Definition Lists any time you need name/value
pairs, or when you need to break your list up into
sections. The rest of the time, Unordered Lists are
a safe bet.
Lists not only give structure to your page, they're
incredible handy for styling. You can just put an
id or class on the outer tag (eg. <
ul >), then style both the outer tag, and the
inner < li > tags.
Conclusion
Try to use the full variety of HTML tags whenever
possible. Sometimes you'll be stuck with using <
div > tags, but try to limit them to whenever
you can't find a suitable HTML equivalent. At the
same time, try to avoid using HTML tags for anything
except their intended purpose. By doing this, your
HTML will be cleaner, and its structure will be more
readable and understandable -- not just to people
but to screen readers, search engines, and other programs
and tools.
Jesse Skinner is a freelancing web developer,
passionate about the potential of the Internet to
change the world. On his blog, The Future of the Web,
he shares HTML, CSS and JavaScript tips, and discusses
anything of interest to standards-loving web developers
and designers.
To read more, visit:
http://www.thefutureoftheweb.com/
|
