Semantic HTML means using HTML tags for their implied meaning, rather than using div and span (nonsense) tags for absolutely everything. Why would you want to do this? Depending on the tag, the content of the tag can be interpreted in a certain way. Here are some examples.

header tags

If you use rather and rather , etc., Google and other search engines will interpret your headers as important titles on your page. This way, when people search for the words in your headings and subheadings, your page will be seen as more relevant (and will rank higher). Also, it is much shorter and cleaner.

This works both ways: don’t use heading tags for anything except headings, especially so you don’t increase the font size or outline your search engine keywords. In this way, the structure of your page can be analyzed (you can do it with the W3C HTML validator). Screen readers or other tools can use this structure to create a table of contents for your page.

form labels

Tea etiquette 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 tag tag is used to identify a label for an input field, for example, “Email Address”. It can be used to wrap it around the text and input field like so: Name: tag >or can be used with for attribute like this: Name: tag > .

Why use tag tag instead of

? Well, it’s shorter and cleaner. But it also allows screen readers and other tools to identify the text associated with an input field. Without using the tag tag, it can be very difficult for some people to know what is supposed to go in the fields of your form.

tables

These days, everyone is giving up using tables. This is great because tables are not meant to structure the look of your web page. But tables still serve a very important purpose. Anytime 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 are not used much, but are very important for accessibility. Use the summary attribute to give a longer summary of the data in the table. Use the label to give a brief title to the data. Spent labels to identify the column and row headers in your table. So you might want to use the headers attribute in the labels to identify which headers apply to that cell. For more examples and details on accessibility with tables, see the W3C Accessibility Guidelines.

liza

Lists are the new tables. While tables are intended for data grids, lists are intended for lists of content. This is great for us, because most web pages are essentially lists of different things. For example, check out this site. On the first page, I have a list of blog posts in the center. On the sides, I have lists of links (file, categories, etc.), and the sides themselves are lists of lists. If I had used tables, I would have been saying “this thing on the left has something to do with the thing in the middle”, but it really doesn’t. When using lists, I simply say “this is a list of items that have something to do with each other”, which is true.

You have three types of lists to choose from, but choose wisely. There are ordered lists (), unordered lists () and definition lists (). Only use Ordered Lists when the entries have some sort of order. Use definition lists whenever you need name/value pairs, or when you need to divide your list into sections. The rest of the time, Unordered Lists are a safe bet.

Lists don’t just give your page structure, they’re incredibly useful for designing. You can just put a ID gold class on the outer label (eg. ), then style both the outer and inner tags. labels

Conclusion

Try to use the full range of HTML tags whenever possible. Sometimes you will be forced to use tags, but try to limit them to when you can’t find a suitable HTML equivalent. At the same time, try to avoid using HTML tags for anything other than their intended purpose. By doing this, your HTML will be cleaner, and its structure will be more readable and understandable, not only to people, but also to screen readers, search engines, and other programs and tools.

Leave a Reply

Your email address will not be published. Required fields are marked *