Semantic markups for headings, paragraphs, lists, data tables, etc have confused programmers in the past, but modern techniques now offer better tools for improved semantics. Newer versions such as HTML 5 ensure that authors comprehend the exact meaning and implications of their mark ups to make their web pages much more functional.
You can start out by checking HTML elements in great detail as well as ID and class names since they will help you a lot provided you make minimal use of them, keep their names at their shortest possible, and try to firstly opt for ID and class names that are functional before opting for generic ones.
In addition, you also need to closely examine the effects of “strong”, “b”, “em”, and ”i” elements since previously authors did suggest replacing “i” and “b” with “em” and “strong” for being too presentational. However, you should use them depending on their importance for your specific requirements.
Several elements that you should stop using as they are no longer maintainable as presentational markups are “s”, “u”, “font”, etc. You can employ style sheets to take care of them.
You should also ensure that you monitor the semantics of each page and one simply way is to disable CSS to learn as to how screen readers infer it. For browsers such as Firefox and Chrome, you can just utilize the Web Developer Toolbar extension for limited functionality in identifying problems related to CSS.
You can also use the Semantic Data Extractor from W3C to further understand the importance of your specific HTML codes. Engage in user testing and peer reviews to further understand accessibility and best coding practices to further improve your page.
Your page can enjoy several benefits with appropriate semantics that comply to html specs and you should utilize all available tools to ensure that your page adheres to the latest guidelines.