Semantics Markup

Semantic Markup is Key for Accessibility and Search Engine Optimization

'Semantic markup' and 'separaiting style from content' are key concepts for making the content at websites understandable by blind people, search engines, and everybody else. It's operationalized in HTML by limiting markup in content to 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 menu!

Semantically marked up content is read in the order it appears in the document. 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 or Bing can't 'see' the pages, and semantic markup helps them to index the content to lead people to the desired pages.

Semantic Markup

To begin any website there has to be a tier of markups that gives the website a structure and shape which is easily recognizable to the computer and abides to HTML rules. To begin, we have to insert the type of document we want:

We begin by writing <!DOCTYPE> which is the instruction that tells the web brower what type of document it is. This is not considered an html tag, rahter its that allows the browser to render it correctly

Since we are concerend with semantic markup, a doctype is not considered a semantic markup rather its non-semantic since it tells nothing about its contents. The following are the tags and the brief descriptions of the meaning of the semantics behind them

<header><header> The header tags describes the header or the introductory content or even set of navigational links

<h1>-<h7> These are called header tags that give a title before a new section or paragraph. For example h1 tags are the biggest and as the number goes up, the font decrease in style

h1 tag


h2 tag


h3 tag


h4 tag


<p></p> Defines a paragraph. After each set of paragraph tags are open and closed then then there is almost a break in line for the next paragraph to be written.

<ul></ul> Is an unordered list to make lists, for exampe:

  • Apples
  • Banana
  • Orange
<ol></ol> gives an ordered list which are number, for example
  1. Apples
  2. Bananas
  3. Oranges

<em></em> This is the empahis tag, which italicizes a word or sentenece to place and empahises for example:

The trip to New York was amazing and i would totally> do it again.
New York was amazing.

<strong></strong> This is the strong tag which is used to place an empahsis on words but makes a bold font, such as:

Please do not touch the chemicals in the lab. We are not liable

<pre></pre> This 'pre' tag means preformatted texxt which displays the font in a fixed-width and it preserves both spaces and line breaks, for example:

I can write a sentence with     huge line breaks    
and random spaces
and it will be displayed on the browse.Or i can keep writing until it goes to the edge.

Section 508

Section 508 of the Rehabilitation Act ties into semantic markup.This is a federal that states that every electronic and information system created and maintained needs to be accessible to people with diabilities. People suffering from disabilities have machines that reads out the content on a webpage therefore allowing them the same accessibility as everyone else. There are plenty of devices crreated to aid in this issue such as Keyboard only devices for individuals that scannot use a mouse, screen readers, screen magnifiers etc.

Therefore semantics plays a huge role in accessibility across the board and this is why there is a strong emphasis on proper usage. An example of proper semantics is when an impaired indivual uses one of the screen reader or voice only devices to smoothly navigate from one page to another.

Search Engine Optimization

Google's guidelines require 'honest markup' and their web crawlers now detect abuses such as hiding tags under images or text the same color as the background. The best way to get top placement is follow through with the regulated and proper sematic markups. The use of sementcs not only makes it easier for web crawlers to realize your webpage is fuctional but it becomes user friendly to everyone, including the disabled.There are many ways to increase optimization and another example can be to use information thats currently trending or continually being ahead of the game and updating your code and website. With a properly structure website, web crawlers can recognize that this page has high traffic pushing through and remains active for users, and therefore further optimizing it.

Valid HTML & CSS

None of this works reliably unless the HTML is valid! Invalid HTML puts browsers 'quirks mode' and confuses them. This will lead to many errors in your code and ultimately leading to a very slow load time. One way to continuosly reassure yourself of your code if by using website that validates HTML codes. There are many out there and they can specifically tell you issues in semantics, improper tags and violations down to the exact line. This can be very convenient and save time for adjusting the errors quickly. And again, this will also make it easier for people to access it via screen readers or magnifiers.