This article gives you an introduction to why semantics are important. It doesn't contain much code samples, but it does provide you with an insight in why standards and CSS are important on the modern web.
When the first web sites were built, there were only very few browsers. Internet Explorer, Firefox, Opera, Safari, all of them didnâ€™t exist. All there was, was a text browser. It just displayed the page as it was put on the server.
Nowadays, things are different. There are a lot of browsers (IE, Firefox, Mozilla, Netscape, Opera, Safari, Konqueror, etc.) and they all have different ways of rendering content. Because the most web designers and web site owners want to serve as many visitors as possible, standards were made up. Basically, a standard is an agreement between all parties, for example: render as bold text.
In the beginning, there were few browsers. Netscape was world-famous, until Microsoft pushed their Internet Explorer via Windows 95 (and higher). Netscape was pushed out of the market, and Internet Explorer dominated. IE, however, sometimes ignored the standards or just rendered things differently.
Because most webdesigners only tested in IE, other browsers were left out. This was fine, however, as there were practically no other browsers. Various techniques were used: spacer gifs (a transparent pixel stretched to align content), marquee-tags, various other proprietary tags, ActiveX. A lot of these techniques were Microsoft-only and only rendered by IE.
Pages were aligned with tables and formatted with . It looked great on screen, the source could look good too, butâ€¦ other browser came. And search engines. And mobile devices with web browsers. A human can look at text and tell whatâ€™s more important and whatâ€™s not. Google doesnâ€™t have eyes and needs other techniques. The screen resolution of a PDA is only 320×240 (or in rare cases 640×480), using a normal page on such a tiny window would mean the user would have to scroll a lot, and pay excessive bandwidth bills (when using WAP, GPRS, EDGE, UMTS, â€¦).
Then, the modern day came. People started using the tags for what they where, hX-tags for defining headers (h1 through h7), strong for bold text, em for italic text, tables for tabular data only, etc. All formatting was put into external files called â€œCascading Style Sheetsâ€, CSS. Putting the formatting (how big should the menu be? What width and height?) into a separate file has a few advantages: – It means less editing of files when a tiny bit of the layout changes. For example, you build a web site for a customer and give all documents (over 100!) a green background. You donâ€™t work with a CMS or authoring tool, but with Notepad. The customer wants the background to be red instead: youâ€™d have to edit 100 files. – It saves you bandwidth: the CSS-file is cached on the client, meaning the browser wonâ€™t ask for it on every page visit. Only on the first visit, and when the cache â€œexpiresâ€. By default (depending on server configuration, of course) such a file is cached for a week.
Suppose you use 200 bytes for aligning your menu, and the visitor browses all 100 pages. It would generate 200 kilobytes of data, just for aligning the menu. Now, replace 200 bytes with 20 bytes, and 400 bytes of CSS. The visitor would request the same 100 pages, it would generate 20 kilobytes for the HTML for the menu, and 400 bytes in CSS.
Now, say you have 50.000 visitors doing exactly the same thing. It would generate rougly 10 gigabytes of data, while the CSS-version only generates about a gigabyte of traffic. It would save you 9 gigabytes of data traffic, reducing costs.
Google benefits from this too: by using header-tags (<h1>) Google can decide whatâ€™s the most important part of your page: the title. In an article, <h2>-tags define subtitles. A paragraph (<p>) is meant for the text that goes with a header. How to tell if the code youâ€™re writing adheres to the standards? There is an online validator at http://validator.w3.org, you just give it your HTML (either by giving your URL, uploading your file or by copy/pasting your code) and it will tell you exactly what you are doing wrong. If you make no mistakes, you will get a happy green bar telling you your page is valid. If itâ€™s invalid, fear the red bar of doom!