Accessible Content

People visiting a website will have different abilities and be using different devices so it is important to take this into consideration when designing a page.

A site should provide basic functionality that can be used by all devices and the text should be of an appropriate size, font, and colour contrast with the background so it can be read easily.

Semantic vs Non-Semantic Tags

If the name of an HTML tag describes the meaning & purpose of the element then it is considered semantic. Non-semantic tags are generic containers that do not provide any specific meaning about the content they contain.

Using a semantic tag over a non-semantic tag makes no difference on the page visually but is important to improve the readability of the code and helps with accessibility and search engine optimization.

Examples of semantic elements

• <header>
• <nav>
• <section>
• <article>
• <footer>

Examples of non-semantic elements

• <div>
• <span>