Semantics
What is semantics and why is it important for web design
Semantics is the study of language and the meaning/s behind words. In web design, this translates to using HTML to give meaning to the elements in your web site which can give users a better experience and make the site easier to navigate. This is especially important for making a site accessible for those who use assistive technology like screen readers.
How do we do this
In HTML 5, there are approximately 110 elements that have a meaning associated with them and 2 that do not, <div> and <span> (W3Schools, n.d.). These elements act as landmarks for screen readers and each has a role associated with it.
Headings
The use of correct headings is essential for semantic markup. This forms the basic structure of your website. Just like visual web users, people who use screen readers can understand the structure of a page when correct headings are used. If you want to skip one level of heading in your design, you have the option to make it a hidden heading using a CSS class .sr-only, that way the page will still read correctly when used by a screen reader.
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
Tags
Some common tags/elements/landmarks to use to differentiate the parts of your site are:
- <header> - Information about the website, associated with the role “banner”
- <main> - contains the main content of the webpage
- <nav> - navigation for the website
- <section> - defines a section within page or document
- heading tags - <h1> - <h6> - define the hierarchy of information
- <article> - separate, self-contained content
- <aside> - use for information that goes with the content but can stand alone
- <figure> - use for images, illustrations, diagrams, etc.
- <form> - contains a form
- <table> - an element that contains rows and columns, table structure
- <footer> - contains information about the site, i.e.. Copyright, logo, nav links, etc.