Web Standards

News and articles related to web standards
There are 13 articles published in this category. Please try the search if you can't fint what you're looking for.

One reason why headings are important

Tuesday, August 12, 2008

WTF is the Start-Attribute Deprecated?

Wednesday, December 05, 2007

I make sure my markup is always 100% valid XHTML 1.0 strict. I hate it when my little Tidy-icon isn't green and happy but yellow, or even worse, red from use of invalid or deprecated elements or attributes.

I recently added pagination to most of my sub-content widgets which you may have noticed, but it doesn't make much sense that the first article in the list of top rated articles on page 2 has the number 1 in front of it. Here's where the start-attribute comes in.

The start-attribute allows you to specify at what number an ordered list should start. This is exactly what I need in this situation but for some fooked up reason the start-attribute is no longer valid in strict doctypes.

I decided to ignore the fact that it is not valid XHTML 1 strict and use it anyway. I only use it in the case where the list doesn't start at 1 (so you'll never see a start="1" in the code) which means the first page is still error-free. But should you navigate to page 2 of any sub-content widget with javascript disabled you will experience invalid (X)HTML. I say with javascript disabled, because if you have js enabled that content is fetched with ajax and inserted with js so your validator won't notice the invalidity of the code.

I've read that instead of the start-attribute you're meant to use CSS-counters. I've only played around with them once before and for the #top-rated-articles ol to be different from page to page I would have to add a class specifying which page the list is on. Why is that better than a real attribute that does exactly that? And what about user-agents that don't support CSS? Should they not get the same information? Of course they should.

One div[id] per Module

Sunday, November 25, 2007

A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.

With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.

Something you see often is HTML like this:

<h2 id="recent-news-heading">Recent News</h2>

<ul id="recent-news-list">
    <li><a href="#">Bla di bla</a></li>
    <li><a href="#">Bla di bla</a></li>

If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.

<div id="recent-news">

    <h2>Recent News</h2>

        <li><a href="#">Bla di bla</a></li>
        <li><a href="#">Bla di bla</a></li>


Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.

Using a Logical Document Outline

Tuesday, November 13, 2007

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of exscale.se you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

  1. There must never be more than 1 h1 per document
  2. The h1 must appear before any other heading
  3. It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)
  4. An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what exscale.se's document outline looks like (pretty much):

  • h1 exscale.se
    • h2 Navigation
    • h2 Recent Articles
      • h3 A recent article
      • h3 Another recent article
        • h4 Sub-heading to recent article
    • h2 Search
    • h2 Recent Comments
    • h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

How do you do it? What do you think about this approach? Do tell.

Skillnaden Mellan Attribut, Tagg Och Element

Friday, June 29, 2007

Creating Pipe-Separated Menus with Unordered Lists

Sunday, May 27, 2007

Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.

Ajax/Hijax Rating Exempel

Wednesday, April 18, 2007

Bra CSS-Menyer

Sunday, March 11, 2007

Completely Unobtrusive jQuery Tabs

Monday, February 26, 2007

As i've mentioned before i've started using quite a lot of jQuery, and some of its plugins.
Among them the Tabs-plugin by Klaus Hartl.

It's an amazing plugin that is extremely easy to use and works very well. What annoyed me a bit was the fact that it requires you to put an unordered list at the top of all you tab-content, with links pointing to all the tab-content-containers.
To me it seemed that list was completely unnecessary if javascript was disabled (i mean, it's not like people don't know how to use the scroll).
So i though, fuck, I'll generate the list from javascript.

So here you have it, a completely unobtrusive tabs-plugin (that uses the normal tabs()-plugin).

The titles in the tabs are generated from:

  1. The title-attribute of the div it is pointing to
  2. Or, the first heading in the div
  3. Or, the id of the div, str-replaced so it looks a bit nicer (this asumes you use foo-bar syntax for naming IDs and classnames)

The list is automatically inserted before the FIRST tab-content (the first div).

Check out the example and have a look at the source for the erm.... source.

Oh yea, the main reason i created this is cus i've been thinkin about tabbing my sub-content in future designs, and now i can do that without having to change the XHTML. Luvely Jubbely.

Update: If you don't want to add title-attributes to all your divs in your (x)html-code, you can very easily use javascript to do it instead.
Before executing the AutoTabs() function, do something like this:
$('#id-of-div').attr('title', 'Whatever you want the tab to say');

Some Flash Stuff

Sunday, October 08, 2006

Google Start Page Valid and Strict

Sunday, October 08, 2006

Yea, like so many others i also made google's start page XHTML 1.0 valid and strict. I initially planned to recreate the entire start page with all the "stuff-boxes" (Google Videos etc) but couldn't be arsed.

Check it out

The Ultimate Website Pt. 2

Sunday, April 02, 2006

Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.

If you haven't read part 1 of this article, i suggest you do so before you continue reading.

So, we have the main-structure for the "Ultimate Website". But it doesn't look very fancy does it? Here's where the CSS comes in.

The Ultimate Website Pt. 1

Wednesday, March 29, 2006

Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.

After having programmed PHP, (X)HTML and CSS for a few years now, I've finally come up with a website-structure that I'm satisfied with. A website that uses valid markup, dynamic PHP and a completely CSS-driven design. So it can be used over, and over again with very little changes.

Post It

From March 27 to January 30

  1. I got this link from 456berea and I really like its document outline (find it in the web developers toolbar): http://www.nvda-project.org/documentation/nvda_0.6p3_userGuide.html
  2. Friday!
  3. #home-page.not-logged-in #main-navigation = $a11y-hide;

March 2015

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Random Quote

- Henke

Random Images

Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)

Blog Roll