Here are my notes from lecture by Marko Mrdjenovic: Jaz sem POSH, pa ti? at @kiberpipa @wwwh.
What’s POSH and a short history?
Years and years ago (before 1999), we had “shinny happy tables”, everything in HTML that dealt with advanced layout had to be done in tables since they didn’t undrstand anything else. We had to use lots of spacer GIF‘s to make it look right.
Then one day Jeffy Z. started thinking about building layouts with CSS, so we had to burn our tables.
That’s how POSH got invented.
Then Microformats got invented and being pushed around at different conferences. People realized that until we can actually code HTML, microformats won’t do us any real justice
POSH – Plain Old Semantic HTML
5 Rules of POSH:
- Validate your code. Until it validates it’s not proper HTML.
- No tables. Unless it’s really tabular data, you don’t get to use it.
- No bed and breakfast. A lot of HTML is done in <br>, <i>, <b> and other tags that are meant to make things look certain way. Get rid of it.
- No anorexic anchors. Don’t use anchor placeholders for moving viewport around. New browsers can jump to an specific ID in page.
- Semantic classes. Don’t name your classes “blue” and “green”, but rather tell what they mean.
Unfortunately, that’s not all:
- <div> and <span> are almost most important elements if you take a look how fast they appear in HTML standard. They’re defined as “generic language style containers”
Wouldn’t it be great if we would get rid of them too? They really don’t tell us anything about the content that they hold.
There are some exercises you can do:
- When you see a photo, you start thinking about the way you would express the image with HTML tags.
[long discussion about how to tag a number of different photos]
- In HTML5 you almost won’t need to use DIV and SPAN anymore as we get many new elements that give meaning to these things.
- If you use more then 40% of <DIV> and <SPAN> tags on your page, you’re probably doing something wrong.
- Lets use less elements. Instead of starting with elements, write content first.
I like the <div> tag, it means “division in page” and that's clearly semantically relevant because it tells whomever is reading that the page is divided into different sections, just like a book has chapters for instance.