Web Site Design: Order In HTML

Goksly · 2 Aug 2008 at 22:08

Hi,
I'm a fairly decent programmer (C# / WinForms) but just starting to get into ASP.Net. Now I'm fairly happy / confident of the code behind stuff, as its basically C#, the bit I'm finding confusing is the HTML / CSS. Years ago, when I used to make crappy web pages, everything was in order (i.e. the order you coded it was the order it appeared on the site), but after looking at the like of CSS Zen Garden, is this important any more? Can you (assuming the HTML is well formed) place any of the elements any where on the page?

I just want to make sure what I'm doing / path I'm heading is the right one

dbmzk1 · 2 Aug 2008 at 23:14

I'm (very very) far from an expert, but I'm bored so I thought I'd comment!

I don't suppose it really matters much so long as the page displays correctly. At the end of the day 99.999% of people who view the site really wont care or even want to care about how the site works.

Some people believe it's best to have your main text as near to the top of the HTML as possible to aid in SEO. I'm not sure if it really does make any difference, I think they make most of it up to be honest as I've always had good results with the major search engines with little to no extra effort!

Personally I like to try and do everything in order so the page remains at least understandable with no style applied, mainly for accessibility reasons. It also makes the page easier to understand if you need to edit it months in the future and have forgotten how you built it

TwoSaints · 3 Aug 2008 at 03:42

dbmzk1 said:
Personally I like to try and do everything in order so the page remains at least understandable with no style applied, mainly for accessibility reasons. It also makes the page easier to understand if you need to edit it months in the future and have forgotten how you built it

This is very true, It's worth keeping in order also for low end browsers on slightly older mobile devices.

Shoseki · 3 Aug 2008 at 11:52

There are multiple ways of approaching this. You have *semantic* ordering, which means that the document structure reflects the logical/semantic progression of the content inside. There is also *aesthetic* ordering which means that the document structure reflects how you want it to be styled to appear on the screen, which may or may not conflict with the semantic ordering.

I usually go for semantic structuring because of accessibility, but sometimes layout is more important. Some styles, for example float, are heavily "context" based which means that due to the "left to right" or "right to left" ordering that you select for the page, the elements must be ordered correctly to lay them out in the page, regardless of semantic structure. Other styles such as absolute, mean that you can ignore the style attribute and concentrate on semantic structure because the css will override the structure of the document and can do things like reversing or extracting parts of the document and promoting/demoting them ahead of other parts.

But as I said, personally semantics > *. My main conflict is always, whether to put the links ahead/after the main content.