Anne van Kesteren

Creating markup

Before I am actually going to write markup (and style) down, I study the design first. And probably more important, the content. Without knowledge of both, you can't create a good site (this and the rest of the post/weblog, represent my opinion, if you have another, feel free to comment). It may be clear that the design is crucial in this process, without it, you don't know how to style and where to place elements.

However, if you don't know anything about the content, the markup probably sucks. It is important to know what kind of content is going to placed in the document (in the design, that is the lorum ipsum text most likely). It might be a quote (BLOCKQUOTE), normal content (P), a list of products (UL).

If you don't see HTML as a markup language, but more as a style language, you don't have to think about it. You just import your ".psd" in GoLive or similar rubbish software and export some tag-soup. After that, you fill the document with contents (some designers restrict the amount of words a box may contain...). That is not the way to go of course. You probably aren't surprised by that, I hope?

Personally, when Arthur created a design and we have discussed it with the client, I think about it when I'm eating or walking with the dog (Midas). At such moments, when you are sort of, relaxed, markup & style ideas for that particular design and content pop up into my head (browser issues as well, unfortunately).

I'm still not sure what the perfect markup for a site might be. I have the feeling that there isn't any, actually, since the markup we have now isn't suitable for everything, like e-commerce (although Ian Hickson started with a nice working draft). What I'm trying to do is making the page header (name of the company, organization) part of the navigation. When I started, I always thought that it should be inside the H1 element, but now I think that that element should contain the title for the current page.

This approach makes the markup a bit more complicated, you have to add a extra ID or CLASS once and a while, but I think it is more appropriate (note that the W3C says that H1 should match TITLE; not the you have to follow everything they say). We have used this 'technique' for our company website and several others and it works good. Do you have any particular things that you try to repeat in your markup, like a personal mark?


  1. I use a different order for my own websites:

    Posted by Jerome at

  2. Hey Anne!

    [By the way... in germany "Anne" is only a female firstname and as on your site there's no reference on your gender i assumed your a girl, a long as I found an article on your weblog, where you were adressed by "he". So at the moment I assume your somekind of genderless CSS-Knowledge base ;]

    I guess, our discipline [webdesign] has a big problem about the fact that we don't have a natural design-process. One [espc. the graphic-oriented designers] start with scribbles about the 2D Idea of the page. I use the worde 'page' intendet, because, Gaphic-Design use to think of website, like of printedpages, [I konw it, I work with one] what is not a totally wrong apporach, as websites are 2d.

    I for myself first start to make a dtd for the xml-data I will need. [weblog entries, product-desciption etc.] and then try to implement this into a bigger information-acrhitecture []. But actually the process of designing a dtd for a bigger project contains important parts of the websites-concept []

    I terms of appropriate markup, I'm on your side. Actually HTML, has not enough general Attributes, to markup different funktions/indize along the site. In XML I alway use additional general Attribute such as: "topic", "meta", "type" etc. But this is only a symptom of a bigger problem: HTML was desing to markup texts; scientic articles to be precise. and to markup such article, HTML still is perfect, because, the functionality of such an article is in terms of typography, interaction and informationarchitecture extremly simple. But websites have developed new typographic concepts [like menu, navigation, orientation, more complex layouts (raster)], new interactive conceptes [like searching, browsing, and adding and removing graphical objects] and new information structures [nonlinear, rhizom-like].

    For all those things, HTML has no approriate Markup, only for small parts of it [like p, ul, and more]. And now it's our job to map these more complex things to HTML, by which you always get some loss of information, in worst case som kind of tagabuse, and of course, the problems you describe, that you somehow feel, that HTML is not apporpiate for the things you want to to with it.

    I'm not sure wether we need a mor sophisitcated markup language such as the "Web Applications Markup Language"... but this sure is an interesting point to discuss...

    Posted by ben at

  3. Anne, I always seem to miss something in your posts. I thought this was about markup, but then you started talking about the title element and h1?

    Posted by Mark Wubben at

  4. Posts are never complete, there is always something new to add in my opinion or parts that could be better explained et cetera.

    However, don't you think that is just a more concrete example of the start of the post?

    O, and I'm not genderless :-), the article was correct.

    Posted by Anne at

  5. Mark Wubben wrote: I thought this was about markup, but then you started talking about the title element and h1?

    And what are title and h1 besides markup?

    Re: Gender: "Anne" is a female only name in the UK! I have just had an email which said you were male. I found it hard to believe but from the above comments I see it is true. Not of course that it is in any way relevant to the nature of this interesting site.

    Posted by Chris Hester at

  6. … As I tried to say yesterday (most of my posts are incomplete ;-) ), HTML is not markup language that can handle every situation you come across…

    Posted by Re: The Myth of CSS - Anne’s Weblog about Markup & Style at

  7. Ad Name 'Anne' - female name only in Slovakia, too.

    Otherwise it's always good to start up with markup/content and then set design in CSS file...

    Posted by dusoft at

  8. Mark Wubben wrote: I thought this was about markup, but then you started talking about the title element and h1?

    And what are title and h1 besides markup?

    Let me clarify, I thought the article was about creating the complete markup, not just the problem with title and h1.

    P.S. Anne, can you add a background color to the comments? I'm having trouble seperating them ;-)

    Posted by Mark Wubben at