HTML Semantic Structure
advertisement
HTML Semantic Structure Kevin Erickson Definition HTML semantic structures, in easy to understand terms, gives meaning to the information on the webpage. Semantic structure is not meant to define its appearance, it is meant to define its content. Purpose • The proper HTML semantic structure of a webpage is very important. • HTML markup language is never to be used in the design of your site. • For example, <p></p> should never be used to create breaks in the page. Those tags are meant for content. • For proper breaks in a page, <br> should be used. Purpose • Another very important structure element to remember is the emphasis desired for a word or phrase. • If you want to have a word in boldtype you should use <strong> instead of <b>. • Why, because you are “defining” the content. • The same goes for italicizing. <em> for emphasis, not <i>. Why does this matter? • The usefulness of proper HTML semantic structure is key to having an accessible website. • What does “accessible” mean? • It means that your page can be accessed by humans and/or machines. • Screen readers will be able to understand your page. For example, a text-to-speech application will correctly read aloud the emphasis of a <strong> tag. It would not be able to do the same with a <b>, bold, tag. Why does this matter? • It will streamline a web search engine’s ability to know what is in the content of your web page. • If you use HTML to assist with the design of your page, the extra code will only slow the engine’s ability to read the content of your page, or the “meaning” of your page. Other uses: • It is important to use proper semantics with any images you use in your webpage as well. • Alternate text, “alt=“ will help visually impaired users understand what the image is as it is read by a screen reader. • It will also be beneficial to a search engine as it searches all of the content in your code. • The descriptive words you use with your images will help “define” the content of your page and increase your hierarchy in a search engines findings. • Proper use of <header>, <nav>, <body> , and <footer> is key to the content of your website. Summary • The proper use of HTML semantic structure will benefit both humans and machines. • The visibility of your website will increase as you follow these rules. • Web developers outside of your circle will be able to easily understand your HTML markup. • Developers will understand what you are doing and why you are doing it. • Your website will stand the test of time as you follow the widely accepted semantic structure of HTML markup.
