As someone who as been through all the teething pains of html up to date I have noticed quite a few things. The first is that web designer & developers care little about content, its just another blob to move around. Their documents semantically mean nothing. There is no logical structure to it once you remove the styling, even now with such a high conscience of the need for a semantic structure they still fail. I think they fail because previously they did what it took to get it to look right using the wrong and I assume simplest means. Now we cater our content to SEO, snake-oil merchants concoct these elaborate tales of why you need a shit structure in your code. For instance according to the rule your company name should not be an H1 tag it should be some superfluous tag because the h1 is reserved for the page title such as say “about us“.
I think that is ridiculous to change the meaning and hierarchy of the content to allow a search engine to better find your pages. The content is what it is and shouldn’t be massaged to suit each flavoured search engine. When you look at a book you don’t see the name of the book on the cover changed to some saucy name which is featured in the book. The book title is always on the cover, it is always the H1 tag, then each section has a title which is your H2 tag and then each chapter has a chapter heading which is your H3 and you finally have in context headings which your H4 tag satisfies. I’m not going to go down into H5 and H6 now.
So now my thinking is if everyone uses the right structure it would make sense for the search engines to give as much priority to the H2 tag as it does to the H1. The H1 is the where am I and the H2 is what is this. Is this making sense, I hope so.
The next part is the content tags such as blockquote, p, address, strong, em, underline, ul, ol, dl, br, img and a these tags are used for content. You don’t substitute a p for a div with styling or a strong, em or underline with a span with styling. Once you remove the styling that content looses it’s meaning. A p cannot contain an address, blockquote, ol or ul these are specialised p’s, a p can only contain a span, strong, em, underline or a. Don’t use the br for anything other than breaking a line, don’t use it to space things that is where the style sheets comes in.
Here is semantically correct html body, with everything in its right place.
Our products are awesome cras cursus feugiat metus rhoncus tempor. Integer
nibh nunc, dignissim eu consectetur bibendum, blandit eu mi. Sed nec mi non
nunc sollicitudin pretium in sit amet tortor. Morbi eget diam vitae ligula
pellentesque porta ac eu nisl.
Widget
Morbi eget diam vitae ligula pellentesque porta ac eu nisl.
Feature 1
Feature 2
Nam vel turpis nec libero imperdiet rhoncus. Integer cursus
dui quis sapien malesuada quis mattis nisl molestie.
details
Woblet
Morbi eget diam vitae ligula pellentesque porta ac eu nisl.
You get the point I hope. It’s pretty simple actually if your document makes perfect sense without styles or attributes then you have done it right. With the example at content level it doesn’t matter whether or not you will be using vertical or horizontal navigation. It won’t matter whether or not the products will be side by side in little rectangles. That only matters when it is styled and as the code is here – with the addition of some classes and perhaps a div or two – you could easily achieve your styling objective without removing the meaning. A div used correctly will not affect your meaning at all for instrance we could make the following changes and it will still render the exact same way when styles have been switched off.
Our products are awesome cras cursus feugiat metus rhoncus tempor. Integer
nibh nunc, dignissim eu consectetur bibendum, blandit eu mi. Sed nec mi non
nunc sollicitudin pretium in sit amet tortor. Morbi eget diam vitae ligula
pellentesque porta ac eu nisl.
Widget
Morbi eget diam vitae ligula pellentesque porta ac eu nisl.
Feature 1
Feature 2
Nam vel turpis nec libero imperdiet rhoncus. Integer cursus
dui quis sapien malesuada quis mattis nisl molestie.
details
Woblet
Morbi eget diam vitae ligula pellentesque porta ac eu nisl.
Feature 1
Feature 2
Nam vel turpis nec libero imperdiet rhoncus. Integer cursus
dui quis sapien malesuada quis mattis nisl molestie.
details
So now we have content, and a potential structure for our page. The next that needs to happen is the design needs to be applied that would be all the images, colours and so on important for the design but not important in terms of raw information. Doing it in this way as described allows you to branch and get a very good print document with very little effort.
So everything said above summarises to this:
Content and it’s hierarchy is the most important get it first
Create a structure, a sort of framework which can be modified with styles.
Apply the visual design over the content and structure
General note on naming of ids and classes the ids need to concisely explain what THAT element. The classes in each step needs to again concisely explain what is being defined, because a class is abstract you can have multiple on a page as long as they mean the same thing and do the same thing on the same type of tag. A class Product on a UL should mean the same on an LI and if it is intended to behave differently then name it so such as Products on a UL and Product on an LI
You should never have your content in all lower case or all upper case this should be taken care of with styling you content should be as natural as possible.
I am aware that what I am saying here is very basic stuff – very basic – but I have never seen it done right. Very rarely do you see a perfectly formatted document, not even the guys who preach it. The reasons I hear why guys don’t do it right is because they say they don’t have time to mess around with this, the irony is doing it this way makes the creating part way faster and maintaining way easier. The most important thing remember though is always get content first, you need it to make you information architecture and interaction design decisions as well as your visual design. If you design something without context, then its art not design. The meaning of the design is then removed from the thing it self and in all cases on the web that thing is information and the delivery there of.
Write the code right
As someone who as been through all the teething pains of html up to date I have noticed quite a few things. The first is that web designer & developers care little about content, its just another blob to move around. Their documents semantically mean nothing. There is no logical structure to it once you remove the styling, even now with such a high conscience of the need for a semantic structure they still fail. I think they fail because previously they did what it took to get it to look right using the wrong and I assume simplest means. Now we cater our content to SEO, snake-oil merchants concoct these elaborate tales of why you need a shit structure in your code. For instance according to the rule your company name should not be an H1 tag it should be some superfluous tag because the h1 is reserved for the page title such as say “about us“.
I think that is ridiculous to change the meaning and hierarchy of the content to allow a search engine to better find your pages. The content is what it is and shouldn’t be massaged to suit each flavoured search engine. When you look at a book you don’t see the name of the book on the cover changed to some saucy name which is featured in the book. The book title is always on the cover, it is always the H1 tag, then each section has a title which is your H2 tag and then each chapter has a chapter heading which is your H3 and you finally have in context headings which your H4 tag satisfies. I’m not going to go down into H5 and H6 now.
So now my thinking is if everyone uses the right structure it would make sense for the search engines to give as much priority to the H2 tag as it does to the H1. The H1 is the where am I and the H2 is what is this. Is this making sense, I hope so.
The next part is the content tags such as blockquote, p, address, strong, em, underline, ul, ol, dl, br, img and a these tags are used for content. You don’t substitute a p for a div with styling or a strong, em or underline with a span with styling. Once you remove the styling that content looses it’s meaning. A p cannot contain an address, blockquote, ol or ul these are specialised p’s, a p can only contain a span, strong, em, underline or a. Don’t use the br for anything other than breaking a line, don’t use it to space things that is where the style sheets comes in.
Here is semantically correct html body, with everything in its right place.
- Feature 1
- Feature 2
Nam vel turpis nec libero imperdiet rhoncus. Integer cursus dui quis sapien malesuada quis mattis nisl molestie. detailsWoblet
Morbi eget diam vitae ligula pellentesque porta ac eu nisl.- Feature 1
- Feature 2
Nam vel turpis nec libero imperdiet rhoncus. Integer cursus dui quis sapien malesuada quis mattis nisl molestie. details © 2009 Acme Co.You get the point I hope. It’s pretty simple actually if your document makes perfect sense without styles or attributes then you have done it right. With the example at content level it doesn’t matter whether or not you will be using vertical or horizontal navigation. It won’t matter whether or not the products will be side by side in little rectangles. That only matters when it is styled and as the code is here – with the addition of some classes and perhaps a div or two – you could easily achieve your styling objective without removing the meaning. A div used correctly will not affect your meaning at all for instrance we could make the following changes and it will still render the exact same way when styles have been switched off.
So now we have content, and a potential structure for our page. The next that needs to happen is the design needs to be applied that would be all the images, colours and so on important for the design but not important in terms of raw information. Doing it in this way as described allows you to branch and get a very good print document with very little effort.
So everything said above summarises to this:
I am aware that what I am saying here is very basic stuff – very basic – but I have never seen it done right. Very rarely do you see a perfectly formatted document, not even the guys who preach it. The reasons I hear why guys don’t do it right is because they say they don’t have time to mess around with this, the irony is doing it this way makes the creating part way faster and maintaining way easier. The most important thing remember though is always get content first, you need it to make you information architecture and interaction design decisions as well as your visual design. If you design something without context, then its art not design. The meaning of the design is then removed from the thing it self and in all cases on the web that thing is information and the delivery there of.