Benefits of Semantic HTML elements

The word “semantic” means the study of meaning, if you have semantic elements it simply means you have elements that have meaning . Semantic elements make your websites much more readable and accessible . Here accessible being the keyword in the sense that web pages can be much more easily interpreted by screen readers used by those that have impaired vision. They also better describe the meaning to the browser and the developers.

Some examples about semantic elements are <form>, <table>,<section>, <article>, <footer>, <nav>, and <aside> etc that clearly states the content is meant to display within their tags examples of non-semantic elements are span,p, and div tag that tells nothing about their content. We often needed a div tag when we need dividers of content that don’t require any specific or explicit meaning. Sometimes your web page will need div to create some space or structure or be used to style elements. Below is the typical layout of a semantic webpage.

When you create content for your website you should understand how the pages are structured and the benefits of writing content to fit that structure. There are three main reasons it’s important that your site is readable by both humans and browsers: Maintenance, Accessibility, and SEO.

Maintenance: Using semantic markup helps to maintain clear code, it is much easier to read at a glance than non-semantic code. Maintenance is one of the critical factors in writing good, standardized code. It becomes easy for different developers to work with the code without confusion since the code is logical. Another benefit of writing semantic HTML is the appearance of the content is more easily changed and updated.If you use semantic markup for all your elements you should be able to easily reference all of your base elements within your CSS directly with the tag.

Accessibility: Semantic HTML uses elements which is easier for both people and machines to read and understand. Well, many users depend upon a screen reader to consume their content. For those who do not know, a screen reader is an assistive technology that converts text and image content to speech or braille. For screen readers to understand your content, they need to scan it. By using semantic HTML, you provide the guidance needed to make sure your content is correctly transcribed to your audience. Also using semantic HTML benefits browsers without stylesheets, text browsers, PDAs, and search engines. It creates a clear hierarchy for the page that allows other tools and devices to properly serve up your content.

SEO: SEO(Search Engine Optimization) ensures your valuable content reaches its target audience. It enhances your website to increase its visibility to search engines. So using semantic HTML is equally important for machines as humans. Search engines weigh keyword importance by their placement in the HTML hierarchy. For example, keywords enclosed in an h1 tags are given more importance than those enclosed in a p tag. Also Using semantic HTML helps search engines rank your page using the most relevant and meaningful content on the page. If you want your content to be viewed by many people, it has to be able to rank on search engines!

Lastly, following web semantic markup practices and using structured and validated code will ensure your webpage to be more useful and visible in the future.

So that’s pretty much it!! Have anything to add.I would love to hear it in the comments below.