Semantics, Accessibility, & SEO

Semantics, Accessibility, & SEO

Semantic Markup is Key for Accessibility and Search Engine Optimization

A Semantic markup and css file are key concepts for making the content on web pages viewble by everyone including people with disabilitys. All HTML code is made using headings some examples include headings (<h1> – <h7>), paragraphs (<p>),
lists (<ul>, <ol>, <li>),
and a couple levels of emphasis (<em> and <strong>).
HTML5 and CSS3 add more tags for semantics including:
<main>, <nav>, <aside> <header>, <footer>, <article>, and <section>.

Semantically marked-up html should not use plain <div>s with classes or ids
named like nav, header, or div

Semantically marked up content is read in the order that you input it.
It can be styled to be attractive to those with good vision and
easy on the eyes for people with vision impaired by refractive or macular issues.
CSS allows content to be placed on the page the best way for people who can see, while the HTML is organized the
best for ‘web page readers’ used by blind people. Search engines like Google can’t see the pages,
and semantic markup helps them to index the content to lead people to the desired pages.

Semantic Markup

Semantics the use of meaningful language. This mean when doing web development, the developer should uses tags and identifiers. Developers use tables and tags to format their web pages and so if someone was looking at code or trying to read the page, the tags didn’t necessary show what they were used for. Web pages are written using tags with their proper tags such as h1, h2, h3, etc being used for heading and p tags being used for their paragraphs.

Semantics are important with SEO because search engines need the semantic markup so that they can understand what a website means. So it appears when someone searches for the site.


Section 508 of the Rehabilitation Act made it mandatory for Federal agencies to make their electronic and information technology information accesible to disabled people.

Accessiblity for HTML and the web should be made with disabled people in mind. People with disabilities have to use assistive devices like screen readers this divice can read the contents of the page out loud so that people without sight can still view web pages. People with mobility impairments that cant use their hands have to use voice command to speak to the computer.

The most important feature when considering accesibility is a good design that allows multiple methods of navigation. This includes making sure that people are in mind when developing not only looks of the web page. This should include good navigation so that people with disabilities could navigate the web page.

Search Engine Optimization

Honest markup is used to detect abuses like hiding tags or text colors and backgrounds.The best way to get in the top of the search engines is by using semantic mark ups. Since web crawlers can detect abuse, if you dont use semantic mark ups or invalid tags is could hinder your results. Semantic tags makes your website more usable to all, disabled or not, Makeing it more likely to show up higher in the search. You should also put relavent information in your web page people want information that is current. Not only should you have relevent information you should also keep your web page up to date with current. This means updating your web page reguarly. Metadata is also a big help to search engine optimization. If you have these features in your web page you should recive more viewers and be higher up in the search engine.

Valid HTML & CSS

None of this works reliably unless the HTML is valid. Invalid HTML puts browsers ‘quirks mode’ and confuses
web crawlers and visually handicapped folks.

Valid HTML & CSS goes hand and hand with semantics. By using proper HTML tags and proper CSS you give the users a better experience and can cater to all people.

This page was created from W3Schools’ Responsive Web Design tutorial.

Scroll to top