Understanding Semantic HTML and CSS

If you are involved in web development to any degree, whether it be design or programming in general, you will know exactly what I am talking about if I mention terms like HTML, formatting tags, CSS, or even URL. However, for newcomers to the field, you may not know what I mean when I tell you that you need to learn how to code with proper semantic structure.

Up until a few years ago even I didn't know what this meant. I have always known that when you are coding a website in HTML, you need to learn proper formatting and work with a nice, clean structure. Later on I found out that this is what coding with proper semantics is: Coding markup intelligently, and logically. I picked this phrase up from the book "The Zen of CSS", written by Dave Shea and Molly E. Holzschlag. It is a great book and I highly recommend it to anyone who has the desire to learn how to create better and more structurally sound markup. In this book, the authors discuss the factors of coding a website for appearance against the factors of coding for genuine semantics.

At first this can be confusing, as well as deceiving for newbies just learning HTML. Some newbies don't even know what CSS is - Let's hope this is not you... But in case it is, CSS means "Cascading Style Sheets".

CSS is used for the overall design of a website. If you have never heard of CSS, it can be a little overwhelming: Why should I use CSS when HTML already has built-in formatting options for fonts, tables, alignment and everything else I'll need to design a website? The answer is actually very simple. Professional web designers use CSS because it thrives on the elements of true programming - Using a variable and assigning it to particular elements so that when you want to change those elements, you only have to go to one place to do it, rather than multiple places on multiple pages. This means that it is possible to modify less than five small fields in your CSS code and literally change the entire look of your website. Using variables, in most cases, also means less formatting tags which, in return, means that your page will also load quite a bit faster.

OK - So by now you know what CSS is (hopefully) and understand why you should use it. Now you may be wondering what it has to do with my original thought of proper semantics in the first place. The beauty of CSS is that it won't work correctly unless your html markup is organized and well structured. It is like a virtual reward for having the decency and patience to give your website a foundation of great structure.

When you are coding the markup semantically, you are purely describing the structure of your content, rather than writing the code for formatting purposes. You will assign how your content actually looks later on when you code the CSS. This way you can create "skins" and layouts much easier and your webpage will performance at top speed.

When I think about CSS, it reminds me of the scenario in the film "The Matrix" when Neo asks Morpheus, "You mean I can dodge bullets?" and Morpheus calmly responds, "No. I am saying that when you are ready... You won't have to". To explain my theory behind this: A lot of newbie web designers use html tables in places they really don't have to. As a matter of fact, sometimes they use them in places when they SHOULDN'T be. There is a lot of markup that makes up a table - To make something that looks the same, functions even better, and with a considerably less amount of markup is ideal.

With exception to a very small percent, CSS provides more options than the built-in HTML formatting tags do. A great example of this is how you can formulate dashed lines with HTML in combination with CSS, but using HTML alone can only make solid lines with HR tags. With CSS you can position things using exact pixel variations through divisions, making content appear to be withheld in the boundaries of a table, without having the stress of opening and closing TR and TD tags every other line. Don't get me wrong, tables do have a time and a place but if proper semantics don't call for it then don't even bother.

The main thing to remember is that, except for unique situations that happen occasionally, HTML is mainly used for structural purposes and CSS is always used for design purpose. Make semantics a priority and you'll have a superior website!