This is exactly where beginning web designers should first when designing a standards-compliant, professional web site. This is the topic that separates the well-designed from the other guys. And it is fairly simple. Use semantics in your site!
Let’s take the Google search engine for example! It spiders your page for the most important details to list first on its search pages when users enter a query. That’s right – what pops up is up to you.
This is an example of what pops up for our web site at Voxxit Designs. We use site semantics religiously! When we use the <h1> tag on our page, Google will automatically render this as much more important than <h2> or <p> tags, therefore placing it before the rest of the information on the summary!
While this site has a very nice site, it could be made better by using the <h*> and <p> tags, which would place the content most important to the site’s popularity up on the summary of the site in Google.
Why Bother?
Semantics in your web page project will help you in the long run. Using CSS, you can easily define font attributes to your <p> and <h*> tags so that you don’t have to use an abundance of unnecessary code in your pages. Here are a few examples:
Without Semantics:
<font face=”Verdana, sans-serif” color=”#000000” size=”9pt”><strong>Hello</strong></font>
Per-Page CSS Semantics:
<h1 style=”font: bold 9pt Verdana, sans-serif; color: #000;>Hello</h1>
Using per-page CSS, we could incorporate semantics in our design. Also, if your site has a lot of content, a lot of visitors, and a lot of money spent on your bandwidth bill each month, this small reduction in code could help your page tremendously. Now, hold on to your seats for this one!
Per-Page CSS Semantics:
<h1 style=”font: bold 9pt Verdana, sans-serif; color: #000;>Hello</h1>
Site-wide Semantics:
<h1>Hello</h1>
For those of you that have no idea what I just did, but would like to know how, I simply used a file outside of the actual HTML document, called a CSS style sheet, and included it in the page with one line of CSS code compared to hundreds or thousands of lines of needless HTML code.
CSS code is as simple as the following:
h1 { font: bold 9pt Verdana, sans-serif, color: #000; }
This will serve the h1 attributes to the h1 tag where it is used on every page that you include the CSS file on. There are many resources on this site and others about CSS, and you should utilize them!
Pros of Semantics
I have helped companies that serve hundreds of thousands of page views per month reduce their bandwidth bills by just incorporating semantics. It is a wonderful tool for web designers, and to grasp this concept will give you that professional image that many only wish they had.
All in all, using semantics in your designs will not only help you with future-proofing your site, but will also allow your visitors to easily find you on Google (as well as other search engines) and will save you considerable amount of time and money when serving a site to the public.
More Web Design Basics: 
