Invision Power Services: Invision Power Services -> When semantics is easier said than done

The IPB3 skin designing is well underway, and thus far, is nicely semantic and valid. Headings are used where they should be, and divs don't litter the code.

That said, being semantic - in some cases - is easier said than done.

Take for example the post block. Semantics dictates that this should be a p tag - or more correctly, several p tags as necessary. This is how I coded the skin, and it works fine... until you consider it further. The problem is, the post block contains user-generated data. It's very difficult indeed to ensure that user-generated data remains valid. I'll use a list as an example. Imagine this is how a (bbcode inserted) list appeared in my nice, semantic post view:



The p tag should be closed before the list, and reopened after the list, since p tags can only include inline elements. But how should this be implemented? The obvious answer would be to have the BBCode start with a closing p tag, and end with another opening p tag to continue the post. For most purposes that'd work fine. But what if a post is exported by RSS to another site? What if one skin on a site has used a div for the post? Suddenly you've got a random </p> in your content.

And this is the problem. There's no guarantee that a post will be written or viewed as a designer might intend. A p tag with block-level elements inside will break (not to mention be invalid). I'm not suggesting that this problem is absolutely insurmountable - I'm sure with a lot of work we could come up with some intelligent skin logic that figures out when it should close individual tags and so on. But is that worth it? I'm not sure it is - which is why I'm now using a div tag as the post block. It's not 100% perfect in terms of semantics, but it's a whole lot easier to deal with technically.

Semantics are an important goal in modern web design. But sometimes, it really is easier said than done.

Footnote: Ironically, you'll notice that the text in this entry appearing after the code block has lost its formatting. This is because when Blog was designed, p tags were used for the entry. This nicely illustrates the problem! In the next release of blog, those p tags will also be changed to div.