phpBB goes all CSS / tablefree

[filburt1]

&bull; Designed by <a href="/?sid=3084747686841abdb8476b897fd67dcd">phpBB</a> &amp; <a href="http://www.subblue.com/">subBlue</a>
&bull; Header illustrations by <a href="http://www.vladstudio.com/">Vlad Gerasimov</a>
&bull; Hosting donated by <a href="http://www.osuosl.org">OSUOSL</a>

That's far from semantic.

[Cap'n Refsmmat]

In addition, This page is not Valid XHTML 1.0 Strict!

I believe that's due to their third-party advertisement script.

[filburt1]

Yeah, but the resulting output layout is irrelevant when CSS involved. The same layout as is provided by unstyled <dt> and <dd> tags could be achieved trivially using CSS applied to the <div> and <label> based code I provided.

My argument is that putting a form field label into a <definition term> tag and the form field itself into a <definition description> tag is fundamentally wrong and goes against the goals of semantic XHTML.

Not if interpreted as a form being a key/value pair listing. The definition term is the key (the input name), and the definition itself is the value (the input item). It's a system by which the terms are provided to the user, and the user provides the definitions themselves.

[Floris]

Sure you do...

<div id="formcontainer">
<form....>
<input....>
</form>
</div>

[Mazinger]

Yeah, but the resulting output layout is irrelevant when CSS involved. The same layout as is provided by unstyled <dt> and <dd> tags could be achieved trivially using CSS applied to the <div> and <label> based code I provided.

My argument is that putting a form field label into a <definition term> tag and the form field itself into a <definition description> tag is fundamentally wrong and goes against the goals of semantic XHTML.

I agree with that. You may never find <div> before <input ... > in normal pages...

In addition, This page is not Valid XHTML 1.0 Strict!

[cbiweb]

...putting a form field label into a <definition term> tag and the form field itself into a <definition description> tag is fundamentally wrong and goes against the goals of semantic XHTML.

Totally agree. And semantic is much more preferable than "but it can be done".

[Kier]

Yeah, but the resulting output layout is irrelevant when CSS involved. The same layout as is provided by unstyled <dt> and <dd> tags could be achieved trivially using CSS applied to the <div> and <label> based code I provided.

My argument is that putting a form field label into a <definition term> tag and the form field itself into a <definition description> tag is fundamentally wrong and goes against the goals of semantic XHTML.

[CyberAlien]

<dl>
	<dt>Username</dt>
	<dd><input type="text" id="username" /></dd>
	<dt>Email</dt>
	<dd><input type="text" id="email" /></dd>
</dl>

...but that seems to me to break semantics.

I think it doesn't.

Without styling it would render like this:

Username
    <input>
Email
    <input>

that looks rather nice. field name is on left side, input is on the right side. And if text is on both sides, not just inputs, then it also looks nice:

Variable 1
    Value 1
Variable 2
    Value 2

There is clear understanding where variable is, and where value is.

If you use divs it would look ok for inputs, but it would be a disaster for text:

Variable 1Value 1
Variable 2Value 2

So I think definition lists are the best way to go with such data like forums and topic lists. First item is <dt> so it is clear what part is main (forum name, or topic name), second and other items are <dd> as its a data describing item in <dt> (author, time, last post, replies).

P.S. english is not my main language and I'm terrible in explaining stuff, but I hope you get idea of what I'm talking about.

[Kier]

That's the nature of semantic XHTML - if something is a list entry, use <li> (list item), if it's a heading use <h1> (heading 1), <h2> (heading 2) etc.

The <dl> (definition list) tag is one whose use seems to be often mistaken. I haven't looked at the phpBB code so I can't comment on their use, but I've seen a lot of sites advocating the use of <dl>, <dt> and <dd> for form field labels like this:

<dl>
	<dt>Username</dt>
	<dd><input type="text" id="username" /></dd>
	<dt>Email</dt>
	<dd><input type="text" id="email" /></dd>
</dl>

...but that seems to me to break semantics. How is the label for a form field a definition term, and moreover, how is the form element itself a definition description? These tags should be used for their intended purpose, which is to list terms and their definitions, for example:

<dl>
	<dt>RAM</dt>
	<dd>Random Access Memory</dd>
	<dt>CPU</dt>
	<dd>Central Processing Unit</dd>
</dl>

I personally believe that the use of <dl>, <dt> and <dd> for lists of form fields is incorrect, and the code above should be more correctly presented as

<div>
	<label for="username">Username</label>
	<input type="text" id="username" />
</div>
<div>
	<label for="email">Email</label>
	<input type="text" id="email" />
</div>

Regarding <div class=...>, the <div> (division/divider) tag is by its very nature simply a container, as it does not describe its contents.

[Mazinger]

What I can get from looking at their code is that the code became very brief.

There are some variables which I cannot understand like; <li class=...> & <dl class=...>...

I was expecting only <div class=...>.

[Milado]

This releaves any way.

[Kier]

There is absolutely no doubt that semantic XHTML styled with CSS is the way forward and that the use of tables for layout purposes is yesterday's technique.

The vBulletin development team has done several experiments with this method of producing pages and we will be employing it for vBulletin 4.

However, these experiments also identified several points which mean that, as Wayne rightly pointed out earlier in this thread, there is no way that we can or will switch to an entirely CSS-driven template system for the vBulletin 3.x system.

Firstly, we aim to maintain backward compatability for the most part between versions x.y and x.y+1 and the change to an entirely CSS-based system would completely destroy this. We'd be looking at rewriting every single template from the ground up to achieve a semantic XHTML + CSS base.

Secondly, CSS lends itself to a very different way of laying out pages. Many of the interface elements in vBulletin 3.x simply cannot be reproduced using CSS alone without major hacking, and we'd like to avoid that. For this reason, we decided to stick with the current system for the time being and then start again with a clean slate for vBulletin 4.0, which will most likely look very different from the current 3.x style.

Thirdly, the vBulletin 3.x style is built around a fairly small group of CSS classes, each of which do little more than define background and foreground colors, text styling and in some cases some padding and border definitions. A style where the layout is controlled exclusively by CSS will require vastly more CSS classes and selectors. Take a look at the gargantuan CSS files used in the new phpBB system and it's obvious that the current vBulletin style editor would struggle to present all of this data in an elegant and user-friendly manner. Even now, the CSS editor page is overly long and unwieldy. When we go with a full CSS system we'll be looking to dramatically change the CSS editor to allow it to better deal with the inevitably larger number of items it will need to control.

So in conclusion the message is this: Semantic XHTML + CSS is good and you'll see it in use in vBulletin 4 but for the time being we have to stick with the current system.

[Chousho]

This is a bit interesting, but there's that saying going through my head:

"Put a rabid dog in a pretty package and it's still a rabid dog".


Maybe I messed up the quote somehow, but you get the idea.

[filburt1]

The "proper" way to code a page begins with separating your content from your layout. This involves using CSS to style your page and coding your page for content only, using proper XHTML.

The next step involves properly coding your XHTML content. While it's nice to have your code validate in W3C's XHTML validator, it's more important that you are coding your page in a semantically correct way. For example, you should divide out the different sections of your page using <div> tags (without unnecessarily nesting multiple <div>'s), marking up your paragraphs using <p> tags, using a heading system that uses the <h1>, <h2>, <h3>, etc. tags, and creating numbered or unordered lists where appropriate (for navigation or lists, for example).

Increasingly, an industry "best practice" involves coding not only for your standard Mozilla Firefox/Internet Explorer browser with standard settings, but also for those who are using accessibility enhancements, such as enlarged font sizes, high-contrast display settings, image-less or style-less display settings, and also for limited screen sizes as well.

By separating your content from your layout, it is possible to address all the needs of your users with relatively few changes, if any at all, to your content code.

If it wasn't for you hunting me down and killing me, I'd rip that post and dump it directly in the paper I'm writing at work. Another developer and I there are finally getting pissed off at sites that use even the slighest presentational markup, so I've been assigned the task of writing said paper to force my ways upon them. It's fun because I get to be a dictator for six developers--four if you exclude myself and the other developer who already codes semantically.

There is no reason at all that vBulletin, any other forum, any other web application, or any other web page cannot be coded semantically for IE6, IE7, Firefox, Opera 9, and Safari, which covers more than 99% of browser usage to date and will be 99.9% in the future. The only reason vBulletin is unsemantic now is to support old-ass useless garbage browsers that don't understand CSS--and the entire point of using CSS to separate style from content renders that point moot too since the page should still be just as usable as with CSS off.

View a page with CSS on and CSS off. If the version with CSS off still has things like colors, columns, layout images, or other formatting (other than headers, emphasis, etc.), then your code is wrong. No argument for that that I can't attack. I have no tolerance for unsemantic code anymore.

Lots of double negatives in that paragraph.

And I'm aware of the hypocrisy of my very own site using tables liberally. I had no choice unless I wanted to rewrite nearly every single vBulletin template--and indeed, I did rewrite most of the major ones (forumhome, forumdisplay, showthread, postbit, etc.). The next version of my site won't contain a shred of unsemantic code, no matter what it takes. Period.


edit: I'll quote some select passages from my article thus far:

ever use a table unless you are representing tabular data. For example, a table is completely appropriate when you want to present a list of article names, view counts, and actions to the user, because you are naturally displaying a table. It is not correct to use a table if you want a left column and right column for layout, as that is not tabular data and defines presentation, not structure. Tables are sometimes appropriate! However, for most conventional uses, they are not.

On why to use semantic code:

It'll render the same either way, right? The reasons are the same as using CSS in the first place: it lets you separate style from content, and therefore it makes it very easy to update all pages' appearances, just like using includes is easier than using Dreamweaver templates. It also has some benefits you might not have though of.

How many times has a client asked that headers have underlines removed, or made bold, or changed color? If such headers were merely formatted using presentational tags, then it would take a long time to go through every page on the site and remove those tags rather than adding literally one line of code to a CSS document.

Google and other search engines read your document through the source code and not like a human would. It will know that headers carry more importance than other text in a document, for example, and the only way to tell Google that a header is indeed a header is to use the appropriate tag rather than a combination of <strong> and other formatting tags.

Mobile users could have the ability to view your page with CSS off. It is true—in fact, a very good sign"that your page will look completely different with CSS on and off, but it means much faster render times for mobile users.

In fact, I personally find it faster to develop with CSS than with presentational markup. I'll often write the markup for the PSD a designer provided without thinking of the design in mind at all, instead reading the text on the PSD and structuring it into markup. This means you can have most of the markup done within literally 15 minutes—15 minutes! From there, I create the CSS, adding necessary (but still semantic) elements to the HTML as necessary.

Semantic Does Not Mean "use <div>s"

Semantic means to write markup that defines the structure of a document. This does not mean filling the design with <div> tags because that is what people associate CSS with. Rather, you should use the right tag for the right situation.

Validate

The fastest, but hardly the most effective, solution is to write your code using the XHTML 1.0 Strict—not transitional—document type. While Transitional allows many presentational elements such as <center>, XHTML 1.0 Strict does not. Use the W3C Markup validator on a document with XHTML 1.0 Strict to quickly find many uses of presentational code. The next release of XHTML, which is supported by all browsers except IE (and it doesn't fully support it for one very minor HTTP issue), completely disallows presentational code and, even more strictly, won't even render the effects you used in your markup at all.

Even beyond the benefits of detecting presentational code, validating your document ensures the browser is parsing it as you told it to and not just inventing rules on its own to try to adapt to a broken document. If something bewildering is happening with even the simplest test, validate your code because it's quite possible you forgot to close a tag.
View with CSS off

Your page should look nothing like it does normally with CSS off. It should be 90% or more text with no colors whatsoever. If you see bits of the layout (images, logos for the site, columns, and so on), you are doing something wrong and using presentational, unsemantic code.

Internet Explorer buries its CSS option in the Advanced options of Internet Options. Firefox has it in its options. In Opera, switch to "User Mode" to turn off CSS. You can add a button to do this to Opera's toolbar, making it a one-click process to view your page with and without CSS.
Reflect

Think about every tag you are using. When you are using a div, are you saying "this is a group of content" or "I want this content to appear this way?" When you use an image, is it showing an image that goes along with the text or is it part of the layout? If you are using a tag for the intent of making it appear a certain way, you are using the tag improperly or not using the correct tag at all. In reality, your page will rarely contain floods of divs. Your CSS will likely be two or three times as many lines as the markup itself, which is actually good.

Long ranting posts FTW.

[Zachery]

There are very few nested tables within vBulletin.