SEMANTIC HTML MEANS USING HTML TAGS FOR THEIR IMPLIED MEANING, INSTEAD OF Using (meaningless) Div and Span 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 instead of Y instead of , and so on, 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 headers and subheaders, your page will be considered more profitable (and ranked higher). Also, it is much shorter and cleaner.
This works both ways: don’t use header tags for anything except headers, especially not to increase font size or delineate your search engine keywords. This way the structure of your page can be parsed (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 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 to wrap it around the text and input field like: Name: tag >or can be used with by attribute like this: Name: tag > .
Why use the tag tag instead of
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 the tables still have 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 abstract 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.
Lisa
Lists are the new tables. While tables are meant for data grids, lists are meant for lists of content. This is great for us, because most web pages are essentially lists of different things. For example, take a look at this site. On the first page, I have a list of blog posts in the center. On the sides, I have lists of links (archive, categories, etc.), and the sides themselves are lists of lists. If I had usage tables, I WOULD have been saying “This thing on the left has something to do with this thing in the middle”, but it really doesn’t. When using lists, I simply say “this is a list of elements 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 split 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 design. You can just put a ID Prayed class on the outer label (eg. ), then style both the outer and inner tags. labels
conclusion
Try to use the full variety 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 for people, but also for screen readers, search engines, and other programs and tools.