Write semantic HTML
Semantic HTML means using HTML tags for their implicit meaning, rather than using div and span tags (meaningless) 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 instead of , and instead of , etc., Google and other search engines will interpret your headings as important titles on your page. This way, when people search for the words in your headings and subheadings, your page will be considered 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 for headings, especially so you don’t increase the font size or describe your search engine keywords. This way, your page can be parsed by structure (you can do this with the W3C HTML Validator). Then screen readers or other tools can use this structure to create a table of contents for your page.
Form tags
Tea The label 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 “Email address”. It can be used by sending it around the text and input field like: Name: tag>, or can be used with the by attribute like this: Name: tag> .
Why use label tag instead of
Tables
These days, everyone is moving away from using tables. This is great because tables are not designed to structure the appearance of your web page. But the tables still serve a very important purpose. Whenever you need to display data that would go into a spreadsheet, tables are here to help you.
When using tables, there are a number of tags and attributes that are not widely used, but are very important for accessibility. Use the abstract attribute to give a longer summary of the data in the table. Use the label to give a short title to the data. Use labels to identify the column and row headings in your table. Then you may want to use the headers attribute in labels to identify which headings apply to that cell. For more examples and details on table accessibility, see the W3C Accessibility Guidelines.
Liza
The lists are the new tables. Whereas 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, look at this site. On the cover, 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 “these things on the left have something to do with the things in the middle”, but it really isn’t. When using lists, I simply say “this material is a list of items that have something to do with each other”, and they do.
You have three types of lists to choose from, but choose wisely. There are ordered lists (), Unordered lists () and definition lists (). Use ordered lists only when entries are in 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, messy lists are a safe bet.
Lists not only give structure to your page, they are incredibly useful for designing. You can put a ID gold class on the outer label (eg. ), then style both the outer and inner tag labels.
conclusion
Try to use the full variety of HTML tags whenever possible. Sometimes you’ll get stuck using tags, but try to limit them whenever you can’t find a suitable HTML equivalent. At the same time, try to avoid using HTML tags for anything other than its intended purpose. By doing this, your HTML will be cleaner and its structure will be more readable and understandable, not only for people but also for screen readers, search engines, and other programs and tools.
About The Author
