Semantics: The original way of doing presentations

Have you heard of semantic coding? If you have been reading a lot about web standards and accessibility, you might have read about it. Okay from here the gurus can stop reading about this but for some who do not even know the relevance of semantics on their documents I suggest you take a little time reading this one, it might change your perspective towards creating more meaningful code rather than just the normal and most commonly used way of presentation data.

Alright, semantics what is it by definition. Quoting from Reference.com semantics in general, the study of the relationship between words and meanings. The empirical study of word meanings and sentence meanings in existing languages is a branch of linguistics; the abstract study of meaning in relation to language or symbolic logic systems is a branch of philosophy. Both are called semantics. The field of semantics has three basic concerns: the relations of words to the objects denoted by them, the relations of words to the interpreters of them, and, in symbolic logic, the formal relations of signs to one another (syntax). O_o well as far as I understood, (and you can think of your own interpretation :p) semantic means describing a piece of object. The way I look at it, it should have two components here. The one describing an object and the object itself.

Web standards are inevitable. Whether we like it or not sooner or later we are going to embrace them. So back to semantics, what`s semantic it got to do with the web? You seen presentation right? Well, at least you’re probably aware that you website is written in HTML. I`d be damned if its not ;p. HTML are good example of presentation. (We`re talking web here you might think PowerPoint is the only thing that does presentation ;p) Originally HTML is created to describe the content of the document. Along with it are mark ups to describe how a document should be displayed. So what’s exactly the difference between the two? And how do you identify if you are actually doing it the semantic way of coding.

Consider this example:

You want to put a title on your web page. You want it big and bold. So you start making the mark up like this

<font size=+3><b>Welcome to my Website</b></font>

You visually get what you want, you got your title large and bold to look like a heading but there is actually nothing there that tells me it is a heading does it? Well I can consider now that you told me that you actually intended that as a header. Okay fine. But what if a computer reads that? There is nothing that identifies it as a header. The computer is unable to identify the mark up the way you intended it to be. You failed to present the data properly semantically speaking ;p

To fix that, and to give meaning to what we are trying to accomplished, we can use the mark up <h1>. This is why mark ups are created in the first place so we will use it instead.

<h1>Welcome to my Website</h1>

You meaningfully get what you want, never mind the exact size of the font. Whats important is you’ve used the markup properly and meaningfully. So when a computer stumble upon your code, it can tell that this one is your heading ;p.

Importance, Relevance, Application, Significance (Pick One!)

• If you`re on the adsense program of google, you might want to do semantic coding. Google Bots is not human you know ;p It tend to improve your placement on the web search results. (Hmm, maybe google bot understand my website when comes around and crawl on my pages )
• Your screen is not the only way of presenting data to your visitor. Some of them are visually impaired and they rely on speech engine to read pages for them. Semantic coding improves accessibility.

Those are only two of the many benefits of semantic coding. Some of them are actually waiting for you to discover.

A couple of days ago, I was chatting with some of my friends and yea we talked computers and websites. He points me to a website he created and he is a little confused why the border on the images remains even with the border attribute is set to 0. So I did a little checking as to my curiosity is starting to take over me again. I notice that the image is inheriting some of its style from its parent holder. One thing I wont miss noticing is the over usage of the selector class in CSS. Alright we must admit, class selector is a powerful selector. CSS just gave class selector too much power that if use incorrectly it can lead programmer away from semantic coding. I mean its not bad using the class selector, but using it everywhere is not really a good idea. So I suggested using Hierarchal way of doing CSS instead of class. As for me I`ve set a rule to use it sparingly.

Okay so here the question, What if I want to use the heading but it doesn’t give me the correct font size that I needed? I want to use font mark instead to get the exact font that I want. You can use CSS to style up you mark up without getting away from semantic coding. You can use unordered list to create links, or set of items and things like that. Then later on you can set the style of these mark ups using CSS. So it’s like this, you create the code meaningfully (semantic coding) and then you put style using CSS to visually enhanced your data.

Well I guess it boils down to who you are presenting with and does your audience even care? Hmm, I wonder if div and span mark ups are semantic ;p