Web Semantics

When dealing with HTML tags you'll find tags such as “headings” and “paragraphs”, bullet lists, numbered lists, and the first page filename is “index”... does that make you think of something? That's right: typography!

Coding for the web in early years

In its early stages, the web was really different from what we see today. Take our current web, strip all the graphics and design from it, get rid of all interactivities (there wasn't any JS) and also remove all the images. What remains is pure content, in textual form. The web was a place of knowledge exchange and took the form of books, with all their elements and characteristics, as a way to organize content. There was an index, containing the page reference of the various topics, and these were organized into chapters and sub-chapters, each of them containing text paragraphs.

Keeping this in mind you'll begin to see through the veils of front-end and back-end, tapping into the soul of what is contained in the screen: the content. When designing the page structure try thinking: "if I remove all the stylesheets, all the bells and whistles, what will I see? Is my content organized correctly? Could I read all the contents as if I were reading a book?" If the answer is yes then congrats! You've structured a well-formed page!

If not, try to apply a typical book structure. Titles, or headings, give a clear clue of content hierarchy. You should be able to understand when you're reading a chapter or a sub-topic since they're introduced by a different kind of heading. Organize your content accordingly: you'll help yourself design and code, your reader and whatever device consuming it to understand and make better use of it.

Tag styles, styling tags

All the HTML tags represent a very specific type of content organization element. Learning new tags and using them properly is like widening your vocabulary. Your code will convey more meaning over the content.

A tag already has its own styles, that... well, rarely are cool enough to be used “as-is” on your page. But don't be tempted to use a tag only because it's rendered in a way that looks more similar to what the design requires. Use the right tool for the right job. It may require a couple of CSS declarations more, but what you'll have back is way more important. You'll be able to better let devices and technologies understand what each element is supposed to mean.

More study, more work but...

Coding and programming are all about keep learning, choosing the best approach for a task, and constantly refining techniques, to obtain more efficiency or computational capabilities. Semantics requires added comprehension of the tags we all use, but this additional effort can literally give you the ability to perceive a whole new meaning when structuring a document.

This is the beginning of your semantic web learning path, young padawan, happy learning!