MDN
Documentation
Why is semantic HTML important?
MDN explains to us the importance of learning semantic HTML and using the correct Hyper Text Markup Language elements to make sure that we are creating accessible applications. There are several benefits to making our applications with semantic HTML, additional to them being accessible we can also create easier to maintain apps, smaller apps with a lighter file size and applications that perform better in terms of SEO.
What makes good semantics?
You're probably wondering what it takes to make semantic HTML or you're thinking how do I know if my HTML is semantic. Well, here are some of the top things to remember when writing your code:
Text content
Using proper content structure means your application will be more accessible as it will allow a user with assistive technology like a screen reader to navigate your website in a meaningful way. Content structure refers to using headings, images, lists etc for their intended purpose.
Avoid abbreviations & acronyms
Users with cognitive disabilities will struggle reading and processing slang terms and acronyms. Abbreviations or the use of characters like dashes can be equally difficult for screen reader users to understand.
Page layouts
Seemingly the days of building web layouts purely with a table have gone however it's important to think about the structure and layout of your application before starting. You should use header, navigation, main, section and footer tags appropriately and try to avoid nesting these in layouts like tables.This blog continues to talk about being considerate when using buttons, links and images. All of these are incredibly important in more ways than you may expect. Everyone should be focusing and thinking about accessibility when developing applications. We all have a responsibility to develop inclusively so this blog is well worth a read.