Redefining a Blog using Semantic Markup

Redefining a Blog using Semantic Markup

“You never start with a blanc page, do you?” I was asked at this morning’s breakfast table. Well… my answer was: “Yes, we do!” and promptly that’s what I started out to do today, continuing from yesterday’s post HERE and following the next basic exercise in “How to learn HTML5 and CS3″: Redefining a Blog using Semantic Markup.

Redefining a Blog using Semantic Markup exercise to learn HTML5 and CSS3

 

Redefining a Blog using Semantic Markup

“Redefining a Blog using Semantic Markup” is first of all about getting rid of the ‘divitis’ syndrome – meaning the usage of div tags – while exploring the elements that create a simple blog structure containing a typical header with a horizontal menu (navigation) underneath it. This is followed by the main section that contains the content in form of articles, that may each have their own header and footer as well as an aside (which may be a pullquote as in my example here). To this we add a sidebar with additional navigation. The page typically ends with a footer for the copyright note and possibly further information like Home, About and Privacy.

Redefining a Blog using Semantic Markup Exercise

Starting out from a blanc white page on my PSpad, I simply followed instructions and tried to understand what I was doing, what was known and where the differences were – creating an index.html page and a style.css – and getting the desired result. Nothing special, nothing designed to look great yet – just an exercise where “Learn by Doing” is what counts.

Another interesting difference I observed: this is all that’s needed at the top of the html page: <!DOCTYPE html> … talking of lean management!

Bianca Gubalke Showcase Image

I will certainly continue the journey…

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,