Introduction to semantic markups in CSS

Before u get to know more about semantic markups, i would like u to briefly refresh u on style sheets and its advantages.

Introduction To Style Sheets:

A style sheet basically is a part of the web page design that is used to define user defined styles for basic HTML tags that are used on the webpage. Making Style sheets allows the programmer to reuse these styles whenever they are required. For Example: In certain websites the basic background design and the links on the page remain common to all the pages belonging to the site. therefore a predefined style can be created for the body tag so that whenever a body tag is used the same style is applied to the page, this makes the website design simpler and saves valuable time in the design.
These style sheets can be the part of the program code itself called the inline style sheet, It can be defined between the style tags(defined before the body starts) where it is called internal style sheet and it can also be defined on a new page with a file extension .CS then the style sheet would be called an external style sheet. There are different advantages to using these three mathods in defining style sheets.
For more: http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.w3schools.com/css/default.asp

Introduction to Semantic Markups:

Semantic in literal sense refers to the aspects of meaning, Therefore in general Semantic markups are definitive terms of the program code. In Other words semantic markups are to provide information about the content of the page. Using semantics the programmer gets the benefit of describing the data in the code. So this helps other programmers who look into ur source to get information of the code.

For Example:

This blog is created as an exercise to learn more about HTML

If we want to print the above given line as a heading on the page we could write a code like this:

<font face=”Arial” size=”8″><b><i><u>This blog is created as an exercise to learn more about HTML</b></i></u></font>

But this only means that this is some plain text that is in arial, with size 8 posted as bold,italic and is underlined to get some attention.

If it were written like this:

<h1>This blog is created as an exercise to learn more about HTML</h1>

Now this provides information of the content meaning that this line forms the heading of the content to come. This is actually the use of semantic markups.

Advantages:

* Provides information of the content.
* Search Engine Optimization.
* Ease of Updating, Maintenance becomes easy.

These are some basic advantages that can be associated with semantic markups. Some key elements that can be used to provide information about the content are mentioned in some other blog. Please refer: http://blue-anvil.com/archives/guide-to-semantic-mark-up

I hope the information provided by me will be useful for beginners who want to understand the need of semantic markups.
For all those who don’t know this is my first blog. I hope to write a few more when i receive some positive replies. Critics are welcome.

Like the Blog post? Subscribe to the RSS Feed by Email.
Rate this Blog? Click here!.
Kunal