Design Template by Anonymous

Semantics

Now that we've learned a lot about some conceptual accessibility best practices, we are going to cover a specific aspect of accessibility that you can implement in your code, semantic elements. Semantic elements clearly identify their meaning to coders and users, for example, <img>, <table>, and <figure>. Following HTML semantic best practices is an important aspect of accessibility. Accessibility options like screen readers and keyboard navigation rely on properly used semantic HTML tags to work optimally. There are other benefits as well, HTML semantics can improve SEO and make code more readable. See below many less obvious examples that you should be applying to all HTML code:

• <article> article elements specifies independent self-contained content like social media posts or comments
• <header> header contains introductory content or navigation
• <footer> footers include contact information, navigation, and copyright information
• <nav> nav uses href to create a navigational system for the website
• <aside> aside defines content placed in a sidebar, the content should be somewhat related to the content it surrounds
• <details> details specifies additional information that can be opened or closed. It is often used with a widget
• <summary> the summary tag defines a heading for the <details> element. Summary should be the first element of the details tag
• <section> as the name implies, the section tag defines different chunks of content or sections of a page