What are the benefits of using semantic HTML?

Question

Are there some noticeable outcomes in terms of performance or other aspects to follow semantic HTML?

Thanks

Answer 1

Additionally, using semantic HTML will be of benefit to users of assistive technologies such as screen-readers, which may alter the pitch or gender of the reading voice to signify important information or presentational information, or emphasis. For example, if information you want to be really emphasised is marked up as <em> for exmphasis, rather than simply bolded (you can still style an tag to be bolded in your CSS), a screen-reader will alter the inflection of that particular word to emphasise it.

As well as using proper separation of data and formatting making your code more efficient and more readable on-screen, using markup properly will not only signify visually that information is of a certain type, but will again benefit assistive technology users. For example if you have a list of information simply marked up as paragraphs, to someone who couldn't see the page there's no way of signifying that the information is related, whereas if your information is marked up as say and unordered list

or an ordered list
, visually it's easier for someone to read that information because it's clearly indented or has bullet points. For screen-reader users for example, when it comes to a list, the screen-reader will announce that the forthcoming content is a list.

It's like making use of the codeblock styling here on Stack Overflow - if you use the 'code' formatting to highlight any code in your post, it makes it clearer for everyone to read, and shows that highlighted text is infact code. HTML's just the same.