Semantic HTML

What is semantic HTML?

HTML is used to structure the webpage
From the previous lessons, you learnt that texts in any web page house in various HTML elements. In a web page, there exist different types of content like heading, paragraphs, image, lists, table etc. These different types of contents are surrounded by different types of HTML elements. Each element is defined to hold specific type of texts. The element which is defined to specify the headline should not use to specify the paragraph and vice-versa. This is also true for all other elements. That’s why it is said that HTML is used to add the meaning of texts and it structures the webpage.

HTML elements could be abused
Unfortunately, you can’t use elements meaningfully and still your web page could be displayed identical to the one which uses correct uses of elements. For example, you can use paragraph element to define the headline and use CSS to make the paragraph text look like headline. It is the CSS that controls the presentation of the text.

HTML elements should be used semantically
Using the HTML elements arbitrarily and applying CSS to display text correctly in the browser was not the intention to define elements. HTML elements should be used semantically. According to the Wikipedia, semantics is the study of meaning. It focuses on the relation between signifiers, like words, phrases, signs, and symbols, and what they stand for, their denotation. In the same way, an HTML element should be select in a way that best describes the meaning of the content it surrounds.

Why semantic HTML is important?

• Meaningful, cleaner code structure
  In semantic HTML, you have to select HTML elements meaningfully. It structures the content better. And, as a whole, the code looks very clean.
• Lighter code structure
  Semantic rules help you to get rid of using extra HTML codes. It also prevents you using styling in the HTML. As a result semantic codes become lighter weight than the non-semantic HTML codes.
• Easier code styling
  As elements are used properly and consistently, it becomes easy to style the page.
• Faster page loading
  As semantic coding requires less coding it becomes lighter weight, hence this page loads fast in the browsers.
• Easier code maintenance
  As elements in semantic codes express the meaning of the content properly, it becomes very easy to edit it in future. Even, other developers can easily understand the code.
• Better accessibility
  Semantic HTML is better accessible by the technologies which help disable visitors to understand web pages. Browsers can easily follow semantic codes.
• Search engine friendly code
  Robots from search engines like Google, Yahoo, Bing see your website without styles. These robots try to understand page content using tags. Semantically written HTML keeps the right contents in right elements which help search engines to better understand your content. As a result, semantically written code get better ranking in search engines.

How to select HTML elements semantically

When selecting an HTML element to use semantically consider the following guidelines-

• Select elements purposefully
  Each element of the HTML is defined for a specific purpose. When using an element in your coding, consider if this element best serves your purpose. Ask yourself – “Will this element best describe the content? If not, select the better one”.
• Don’t be verbose
  You can write your same HTML document with lots of elements. But it’s not a good practice. You should select as many elements as are enough for the purpose. It’s also no good using semantic elements excessively. Lighter coded page takes faster loading time, gain better ranking in search engine too.
• Repeat elements consistently
  You already select an element to describe a content. Later in your document, to describe similar content you should use that same element. Be wise in selecting element and be consistent in it. It will help future update easier.

HTML moving towards more semantics

HTML had been using few years before CSS was introduced. Prior CSS, some HTML elements were used to style web pages. After introducing CSS, it has been becoming best practice to separate the styling from HTML to css.

HTML5 removes some elements as those are more presentational than semantics. For example the big element. Before HTML5, it was used to make text size bigger which can be accomplished by CSS.

HTML5 also redefined some existing elements to make those more semantic. For example the i element which previously was used to make text italic. In HTML5, the meaning of this element has been changed. According to the W3C, it is now defined as follows-

“The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.”

In the later lessons you’ll find lots of HTML elements with their meanings and usages. HTML5 also introduces some semantic elements. You’ll find all later in different lessons.