What Beautiful HTML Code Lo..

What Beautiful HTML Code Looks Like - CSS-Tricks http://css-tricks.
com/what-beautiful-html-code-looks-like/
What Beautiful HTML Code Looks Like

By: Chris Coyier on November 1st, 2007 — Posted in: Quick Tip / Trick
I have an addiction. I can’t help but view source on every nice looking website I see. It’s like if
you had x-ray glasses that allowed you to see any person you ever saw in their underwear at
will. How could you not?
It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if it’s
beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Art. This is just HTML, so it
can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes
of it’s creator and there is craftsmanship abound.
It gets me to thinking, what makes beautiful code? In HTML, it really comes down to
craftsmanship. It’s all those little things added up that make the whole. Here is a list of just
some of the little things that I look for in other’s code and that I try to do myself that make for
good craftsmanship in HTML:
DOCTYPE Properly Declared

It looks like a lot of gibberish, but DOCTYPES are important. They not only allow your
code to validate, but they tell browsers things about how to render your page. Simple
<html> tags don’t cut it.
Tidy Head Section
Title is set. Character set declared. Stylesheets linked (including a print stylesheet!).
Scripts linked and NOT included in full. External files have their own related folders (e.g.
“CSS” & “Scripts”)
Body IDed
Putting an ID on your body allows you to create CSS properties that are unique to that
page. For instance, you may want your <h2> tags to look different on the homepage. In
your CSS you can write: #home h2 {} to accomplish this and not affect <h2> tags
elsewhere.
Semantically Clean Menu
You’ve seen it before, you’ll see it again. There is a reason unordered lists are used for
menus. Because it really gives you a lot of control.
<ul id="menu">
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
Main DIV for all Page Content

Putting all the content of your page into one main “wrap” DIV gives you lots of control
right off the bat. There is where you can set the width of your page for a fixed width site or
maximums and minimums for a fluid width site.
Important Content First
It is best if your most important content, like news and events, can be listed first in the
HTML. If your sidebar is just navigation or less important content, it is best if it comes last
in the HTML.
Common Content INCLUDED
A lot of web content is common from page to page. Think menu bars, sidebars, footers,
“boxes”, etc. This kind of content should be dynamically loaded. Either from a database or
with simple PHP include statements.
Code is Tabbed into Sections
1 of 25 8/27/2008 6:11 PM
What Beautiful HTML Code Looks Like - CSS-Tricks http://css-tricks.com/what-beautiful-html-code-looks-like/
If each section of code is tabbed in once, the structure of the code is much more
understandable. Code that is all left-justified is horrific to read and understand.
Proper Ending Tags
You started strong, now end strong. Don’t be lazy and exclude closing tags for any element,
even if the page renders OK without them.
Hierarchy of Header Tags
Use header tags as they were designed, to create titles for sections and signify their
position in the content hierarchy.
Content, Content, Content
This is where your content belongs, so go nuts. Remember to keep your paragraphs
distinct and in <p> tags. Use lists where appropriate. Use codes like © for © symbols.
Don’t go overboard with <br /> tags, that’s sloppy formatting.
No Styling!
Your HTML should be focused on structure and content, not styling! Keep all of your
styling in your CSS, there should be no deprecated tags (e.g <font>) in site.
[VIEW THE IMAGE LARGE] [http://css-tricks.com/examples/CleanCode/CleanCode.jpg]
[DOWNLOAD THE PDF] [http://css-tricks.com/examples/CleanCode/CleanCode.pdf]
Theoretically Related Articles:
Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)
[http://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/]
My 5 Favorite Wordpress CSS Tricks [http://css-tricks.com/my-5-favorite-wordpress-css-tricks/]
CSS-Tricks Finally Gets A Print Stylesheet [http://css-tricks.com/css-tricks-finally-gets-a-print-
stylesheet/]
Header Text Image Replacement [http://css-tricks.com/header-text-image-replacement/]
2 of 25 8/27/2008 6:11 PM
Better Email Links: Featuring CSS Attribute Selectors [http://css-tricks.com/better-email-links-

featuring-css-attribute-selectors/]
Show Pingbacks
3 of 25 8/27/2008 6:11 PM
Responses
1.
It is a great article, very straightforward.
Comment by Volkan Görgülü — November 1, 2007 @ 7:13 am
2.
Nice work!
Now whenever I write an article setting up any kind of standard, I usually find it has a
glaring typo. Today, for you, your typo is “Heiracrchy”.
~Matt
Comment by Matt Doar — November 1, 2007 @ 11:20 am
3.
Thanks Matt, I got that all fixed up.
Comment by Chris Coyier — November 1, 2007 @ 2:21 pm
4.
Very good article. I like the idea of putting an id on the body, have not thought of that
before.
I have a website im creating at the moment which has a different footer, so that could have
been handy
Comment by Jermayn Parker — November 1, 2007 @ 5:29 pm
5.
Nice work Chris. Here’s another useful link for your readers . . .
4 of 25 8/27/2008 6:11 PM
http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/
Comment by Graham Bannister — November 1, 2007 @ 11:32 pm
6.
Hi Chris, really nice read but I do have one suggestion.
Within the “Semantically Clean Menu” there’s no need to surround it with a div. It’s very
common for people to surround elements with div’s for styling but the designer often
forgets that an ID can be applied directly to the element and styled accordingly.
Obviously, with complicated menu’s this may not be possible and extra span’s may also be
needed but for basic semantics I wouldn’t suggest using a div as a starting point.
Thanks
Dave
EDITORS NOTE: Since this comment, there have lots of suggestions to remove the extra
DIV from around the menu. Since I feel there are some reasons why this is a good idea, I
am not going to change the post. Due to the large number of comments on this post, I am
going to take this opportunity to thank you all for that suggestion and delete those
comments so it’s easier to read/find the other suggestions.
Comment by Dave Woods — November 2, 2007 @ 2:43 am
7.
@Graham: Nice! I think I’ll start using that phrase, that is essentially what I was getting at
in my article as well.
@Dave: You know, that’s a good point. In many situations just giving the ul a unique ID
could control everything the div could. I could think of a few scenarios you would want the
div as well (for instance, so you could use background images on both the div and ul and
get some sliding doors stuff going on with the whole menu), but for the most part, you
probably don’t need the div.
Comment by Chris Coyier — November 2, 2007 @ 6:34 am
8.
I love clean code no matter which language I use - the only problem is when you have a
looming deadline and you catch yourself farting around with beautifying your code rather
than completing that important requirement !!!
5 of 25 8/27/2008 6:11 PM
Comment by paulie — November 2, 2007 @ 6:51 am
9.
@paulie: That’s true, you don’t want to be missing deadlines because you are busy
rethinking how many spaces you want to use to tab in new sections of code.
However, keeping your code clean and beautiful can actually save you time in the long
run, because it is so much easier to read and find things.
10.
Basing on the code excerpt you provided on the image, I would add:
— strict DOCTYPE— semantic (non–presentational) class names— no obtrusive scripting
(input onfocus) and no inline CSS
~Wojtek
Comment by Wojciech Zając — November 2, 2007 @ 9:19 am
11.
You don’t need the div around your site either. You can style the element like you would a
div.
In general, I find that expressing your page with the fewest (and no fewer) elements
possible to be most preferred.
Comment by Zach — November 2, 2007 @ 10:13 am
12.
Do you really need to do this? does it make a blind bit of difference from an seo
perspective?
‘Important Content First’

“It is best if your most important content, like news and events, can be listed first in the
HTML. If your sidebar is just navigation or less important content, it is best if it comes last
in the HTML.”
6 of 25 8/27/2008 6:11 PM
Comment by sickr — November 2, 2007 @ 10:36 am
13.
@Wojciech: I like all those suggestions, thanks.
@Zach: I agree, use the exact number of elements you need to describe the content. No
more, no less. I do like wrapping all page content in a div, mostly for the centering.
@sickr: Actually, yeah, I think a major reason it is important is for SEO reasons. I am not a
SEO expert though, so I can’t completely vouch for that. The other reason is screen
readers and people who browse with CSS turned off, they need your important content at
the top, not the bottom.
14.
Don’t use XHTML unless you want IE to display in quirks mode. If you’re going to use
minimal HTML and style everything appropriately with CSS, there’s no real benefit to
going with XHTML, but there’s a big issue with IE and XHTML.
Comment by Tumbleweed — November 2, 2007 @ 11:33 am
15.
Regarding the div around the menu, it’s actually not so unsemantic as you might think.
A div has very little semantic meaning, but basically it means that the contents all “go
together.” The class and ID on the div specify what it is that the contents are doing.
div[id=menu] makes perfect semantic sense. (If there are more than one, of course, it
should be div[class=menu].) If you want a heading identifying the fact that it’s a navigation
menu (probably a good idea, accessibility-wise) then it should be linked to the list by being
in the same div. Plus, it adds some styling hooks, as mentioned before.
In XHTML 2 and HTML 5, there are proposals that are more semantic than a div with an
ID or class, but at least for the time being, we’re stuck with what we have.
Comment by Isaac Z. Schlueter — November 2, 2007 @ 11:34 am
16.
7 of 25 8/27/2008 6:11 PM
Good article, but there are two things I disagree on:
Head:
Title is set. Stylesheets linked [...]
Um, no. You declare the character set one place, and one place only: In the
“Content-Type” HTTP header, like so “Content-Type: text/html; charset=utf-8″
Content, content, content:
No, no, no. Why would you even bother to set the character set, then, if you’re not going to
use the characters in it? Just put the © symbol directly in your code, a practice that has it
show up properly as long as you’ve set the proper charset.
Once again — good article, my comments are only meant as constructive criticism.
Comment by Alexander K. Schrøder — November 2, 2007 @ 12:12 pm
17.
“Regarding the div around the menu, it’s actually not so unsemantic as you might think.”
I wrote an article awhile back and noted the same thing, div is a division of content.
However that being said there are still good reasons to strip the div.
The UL already associates the list items together - if you were to have additional menu
related content with in the div it would make sense. By itself, there really is no need for
the div unless the design requires it.
Comment by Ross Johnson — November 2, 2007 @ 12:25 pm
18.
Happy to say that I’m using every tip listed on the site I’m currently working on. I always
try to structure projects so that I have the time and resources to write clean, semantic
code. Failing that, if a client simply is flexible on the schedule I’m almost always willing to
invest my own time in perfecting the code. At the end of the day, you want to be proud of
your work and know that you did your best. After all, who knows who’s peaking under the
covers and writing a blog post about your site. That reminds me (:shudder:), I really need
to update my own websites. Cobblers kids syndrome.
Comment by Brian McNitt — November 2, 2007 @ 12:42 pm
19.
8 of 25 8/27/2008 6:11 PM
All good (and it should be obvious), but the idea of “Code is Tabbed into Sections” is just
nonsense.
The page code is for the machines not humans. It shouldn’t matter if it’s tabbed, messy or
even all in one line. Actually for IE6 is sometimes better to keep lists in one line, without
line breaks.
Perhaps tabbing is good if you write all code per page by hand, but if you use CMS then
most likely you’ll not achieve all pretty formatting.
And there are always tools to hand to quickly format page source code to see “how they’ve
done it” even if the original HTML is “messy”.
Comment by Peter — November 2, 2007 @ 12:45 pm
20.
Nice article, but I’d take issue with:
* no need to wrap the ul navigation in a div (as previously mentioned)

* there’s really no need for the page-wrap div either.
* ‘right-content’ isn’t semantic - what if you redesign your site and want to move that block
to the left. primary-content, secondary-content would be better.
* Same for ‘right-sidebar’ - “right” and “sidebar” describe look/design not content
Comment by Dave — November 2, 2007 @ 2:26 pm
21.
Some good points. It’s hard to make a call on the wrapper divs without seeing what look
you’re going for. Sometimes you need that extra markup to get around the limitations of
CSS.
Ditto w/Dave on the ‘right-content’ class naming conventions.
Comment by Ross Martin — November 2, 2007 @ 3:48 pm
22.
No inline styling? I don’t want to create CSS for every wild idea I might have during a
temporary holiday rebrand, such as an ugly green DIV inside content area with a
background image. So I’m supposed to put all that into it’s own css file for ONE page? I
think not.
But as a general rule, I agree with you. That said, I think most people reading this site
9 of 25 8/27/2008 6:11 PM
already know that. Don’t they?
Comment by smickworks — November 2, 2007 @ 4:21 pm
23.
@smickworks: I’d said by creating separate stylesheet for just one page you loose the
benefit of having CSS in cache, but still — content should be separated from presentation,
no matter if it only does appear on a single page or is common.
Comment by Wojciech Zając — November 2, 2007 @ 4:43 pm
24.
I have a suggestion about putting the tag before the because I heard “browsers block all
downloads when they encounters a tag. So until a script is downloaded and parsed, no
other downloads will be initiated.”
source: http://www.sitepoint.com/article/web-site-optimization-steps/4
Comment by Volkan Görgülü — November 2, 2007 @ 4:59 pm
25.
Wow!
I really appreciate everyone’s suggestions. Every one of you has had great, on-point
criticisms and suggestions and I agree with almost all of them. I hope this helps all of us
write even better code!
26.
Title should go AFTER the meta tag with the encoding, because if the title contains
non-ascii chars, you may be seriously screwed — IE can show an empty page.
Comment by X28641 — November 2, 2007 @ 7:08 pm
10 of 25 8/27/2008 6:11 PM
27.
@Chris - what about using all the suggestions that you prefer and think is worth while to
make an updated version??
Comment by Jermayn Parker — November 2, 2007 @ 7:22 pm
28.
You have a beautifully designed, CSS powered site. I like it.
Comment by Sangesh — November 3, 2007 @ 9:06 am
29.
Very useful article, thanks especially for the body id. I’ll use this as a checklist for my
future websites.
Comment by Tabris — November 3, 2007 @ 12:16 pm
30.
Hi everyone,
Good article, good comments.

I’ve also been wondering about cleaner code but I bumped into some obstacles I still
haven’t found a good solution for.
1: how should we combine PHP HTML and Javascript in one file? If I code PHP, I try to
use the MVC model and use only some loops and echo statements in the “view” pages. But
if I then also add JS to the mix, it quickly gets chaotic.
2:If you want your PHP to produce clean well indented HTML you have to code in /t and
/n by hand in your PHP. That makes your PHP less clean and readable. Because the PHP
code is more likely to produce complex problems for which I want the most clean code I
prefer to have less clean HTML.
3: A problem I bumped into recently. If you have a site where you let your users add
content and you let them use certain tags, how do you control that the tags used are also
clean?
What are your thoughts on these questions?
11 of 25 8/27/2008 6:11 PM
Comment by Niels — November 7, 2007 @ 5:11 am
31.
No PHP includes, jsp:includes, or any of that other rot. If you decide you don’t want to
include the content at that particular location, or at all, then guess what - you get to change
all 150 pages of your site.
No, instead, use a decorator/compositor, like sitemesh, or a mvc framework like RoR that
provides view templating for free.
Don’t include headers and footers into your page - include your page into your headers
and footers!
Comment by John Vance — November 7, 2007 @ 4:55 pm
32.
Please put out a book, I will buy it.
Comment by HardwareGuy — November 8, 2007 @ 11:00 am
33.
Like you, I view source of sites I visit, just to see if competitors do clean code as clean as I
can do.
Comment by Philippe Meunier — November 13, 2007 @ 11:13 am
34.
To clarify about IE and xhtml. IE defaults to quirks mode with an xhtml 1.1 doctype but
does not with xhtml1.0 strict.
Secondly, it’s semantic if it can be read. Having an extra div around a ul isn’t going to kill
anyone. Although, I personally wouldn’t do the extra divs though.
Lastly, tabbing the code helps other coders - html isn’t for machines only - someone may
need to go in and work with it at a later point whether in a cms our outside, it helps
immensely.
I feel for you Chris, I have the same addiction to well crafted code.
12 of 25 8/27/2008 6:11 PM
Comment by brad — November 13, 2007 @ 12:43 pm
35.
I do that allot myself. Especially when I see a pretty site I tend to wonder “How pretty is it
under the skin?”.
I find it a challenge when doing dynamic sites to generate a HTML document that looks
nice with proper indentation structure and linebreaks. It’s come to a point where I just got
to face the facts that I spend too much time on it and really just need to leave it alone.
Nice article. Too bad ,however, that the very site the article is on doesn’t validate. H1
element inside an A element, missing alt attribute, unclosed P elements.
Comment by Thomas Thomassen — November 13, 2007 @ 3:10 pm
36.
@brad: Thanks for the clarification, that’s good to know.
@Thomas: Thanks for pointing out the validation errors. I got those cleaned up! Most of it
was trying to pack too much inside of list elements.
37.
Dave mentioned that “there’s really no need for the page-wrap div either”, I usually use
page-wrap for centering too.
And now I wonder if there is another method for that? Or what does he mean by saying
that?
Comment by Volkan Görgülü — November 13, 2007 @ 4:40 pm
38.
13 of 25 8/27/2008 6:11 PM
Nice list!
I wonder if there is a tool that can check my website and give me hints how to improve it.
Or is there even a tool that helps transforming a table based design into a clean div design?
Any hint would be highly appreciated!
Comment by Inwit — November 14, 2007 @ 1:10 am
39.
@Inwit,
Yes there is such a tool, the human brain and its motivation for standards and clean code
Seriously: I think it is much better to redesign/refactor code by hand than to let software
do it.
Comment by Niels — November 14, 2007 @ 4:42 am
40.
I have the same kind of addiction, though I more often do a CTRL+SHIFT+S in firebug.
One could argue that a semantically clean menu doesn’t need a wrapped around it.
Enjoyed the article.
Comment by Shane — November 14, 2007 @ 5:53 am
41.
This is a very nice article, a few new tips for me and a few good ideas I sometimes forget.
One thing that someone told me to do that I LOVE now is to put a comment at the end of
my divs that makes it clear which div it belonged to
Comment by john — November 14, 2007 @ 6:31 am
42.
14 of 25 8/27/2008 6:11 PM
@Inwit,
If you need some code checked, you can get someone to do it for you.
Comment by Jermayn Parker — November 14, 2007 @ 7:19 am
43.
Hi,
Good advices, but i’d rather (and I do it) put a class on the body, instead of an ID.
The body tag is already unique, so body.yourclass will be unique, no need for an ID.
Plus, the ID you choose for your body could conflict with an ID used in the entire page.
To conclude, we could also say that in *one* website, the different pages bodies are the
same “object”. Giving them an ID would mean “each body is a different entity”, which is
not true : same entity but with little (or big) differences, so the class is semanticaly better,
to my opinion.
My 2 cents…
Comment by Thibaut Allender — November 15, 2007 @ 3:19 am
44.
No need to wrap all your content in a div to set widths. You can do that with the body
element. Only if you need to give the same presentational flourish to IE5 or older users
would you need the extraneous div.
Comment by John Lascurettes — November 20, 2007 @ 10:09 am
45.
@John Lascurettes:
While you’re technically right, in regards to not needing a wrapping div, it’s still good to do
for several reasons.
Just one example: planning for the future. The beauty of CSS is that you can markup a
document semantically, and the presentation layer is kept separate. in an ideal world, that
means you can markup a page once, and design and re-design to your heart’s content. You
might not need a wrapping div NOW, but it doesn’t hurt, it adds more control, and you
might change your mind.
15 of 25 8/27/2008 6:11 PM
Comment by J. Bradford Dillon — November 20, 2007 @ 11:39 am
46.
Hey, i love the article.. I was wondering if you could show me a HTML of a text box. I need
it for somthing, but of course i don’t know what it looks like.. Thanks!
-Ashley
Comment by Ashley — November 26, 2007 @ 7:32 am
47.
“Keeping your code clean and beautiful can actually save you time in the long run,
because it is so much easier to read and find things.
That’s SO TRUE! I’m just learning my way around web design, but I learned that one
mighty fast. Plus I was able to have a really good laugh over some of the gobbledegook I
found when I cleaned out my templates. :):)
Comment by Christine Taylor — November 28, 2007 @ 8:43 pm
48.
While the HTML code is clean, it isn’t anything special. If you’re design a typical site like
this one with the typical header, menu bar, search box, sidebars, content area, and footer.
It could work. But when you design a business site with many panels of contents, I doubt
your clean HTML code would work.
1st Rule all programmers should follow is COMMENTING!!!
Comment by vS — November 29, 2007 @ 11:11 pm
49.
Commenting…is that the bracket-exclamation point-thingie I do to leave notes for myself

so I know where the heck I am in the midst of all my gobbledegook??
I live by those.
Comment by Christine Taylor — November 29, 2007 @ 11:26 pm
16 of 25 8/27/2008 6:11 PM
50.
@sV : Commenting HTML? ROFL! If you want to loose precious bandwitdth and slow
down your clients, yep, definitely the way to go!
Comments are OK for server side scripting or source code to be compiled while it’s BAD to
put it in your HTML or CSS code.
If you want to share informations, make a *documentation*, not comments.
And it is possible to keep a huge website clean. In fact you must do it if you don’t want it to
collapse after 6 months of patching.
“Clean” doesn’t meaning “basic”, you can produce clean complex code.
Btw, you don’t need to comment if it’s clean
Comment by Thibaut Allender — November 30, 2007 @ 1:37 am
51.
Thanks for this guide. i’ll clean my site html code right now!
Comment by Paolo — December 3, 2007 @ 1:38 am
52.
That is a beautiful image of what beautiful HTML code looks like!
Thanks.
Comment by Lazar — December 7, 2007 @ 5:19 pm
53.
Good example how to code in HTML. Thanks. I only add that title tag are very important
and I agree with Chris Coyier that title tag should go after meta tags.
Comment by Ralph — December 10, 2007 @ 4:03 am
17 of 25 8/27/2008 6:11 PM
54.
The body id can be done automatically with php:

<body id="<?= basename($_SERVER['PHP_SELF'], “.php”)?>”>
Particularly useful if you’re using a template.
Comment by Brian — December 10, 2007 @ 11:35 am
55.
I don’t agree with all of these. A lot of these features are used to force your HTML/CSS to
over-reach itself (e.g. wrapping up a page in a DIV serves no semantic purpose at all - it
just helps designers achieve graphical/typographical effects). Similarly, the point of
putting a menu in a list is that it is just that - a list; not so you can add rounded corners to
your tabs.
Also, isn’t it a better idea to keep your headers logically organised and styled consistently?
Why change your level 2 headings from page to page - it just confuses the user.
Beautiful code should be well structured and marked up semantically. That is what makes
it easy to read.
Comment by imsuden — January 16, 2008 @ 10:14 am
56.
Good points, makes sense to keep things consistent and organized…
Comment by ptamaro — January 22, 2008 @ 6:32 am
57.
How exactly does changing the H2 tag from page to page confuse the user? That don’t see
the tags, so who cares if it’s H2, H4 or .sometext? And if the only way to create a desired
site presentation is to wrap it in a DIV, what’s it hurt?
Comment by ryan — February 2, 2008 @ 1:55 pm
58.
18 of 25 8/27/2008 6:11 PM
Good article. Should help the learners.
Comment by sahasranaman — February 7, 2008 @ 2:04 pm
59.
thanks for the free pdf!
Comment by derry3 — February 10, 2008 @ 5:14 am
60.
You do have some nice clean html and some great recommendations. I would argue that
you left out one more thing. The html should also be minimized.
Comment by evan closson — February 12, 2008 @ 8:25 am
61.
I hate to check all sites on 4 different browsers. The best one is probably Opera. I only
check the sites once in a while with Opera and they mostly look great on it;-)
Opera ROCKS_
Comment by paranoiaparadise — February 20, 2008 @ 3:26 pm
62.
I actually would disagree with nearly everything in this article. It misses the point entirely.
The point of HTML css and other related technologies is to produce the website and then
usually keep the website up to date. The point of HTML css and so on is not the end in
itself. People don’t pay you to write code they pay you to solve a problem. Thus they want
the problem solved without generating new problems. So creating the cleanest simplest
code possible that does exactly the work required is what most people want. So in reading
the above article I would ask the scientific questions of why and prove it for each of the
points.
# DOCTYPE Properly Declared

Why? Most web pages will be totally fine without this thus it adds unneeded clutter. Plus
the w3 people are really ticked withevery pointing to their site. They say if you have to use
this then put the .dtd file on your own server and use your own damn bandwidth.
19 of 25 8/27/2008 6:11 PM
# Tidy Head Section

I agree. Keep things tidy like this says.
# Body IDed
Why? What does this accomplish as compared to not using it. Personally I can think of
specific reasons to id the body such as if you are going to dynamically alter it. But
otherwise you end up with code that might do nothing.
# Semantically Clean Menu
Why? If the menu is likely to change then this might be a good rule. But depending on the
menu structure and page design this might not be a good idea.
# Main DIV for all Page Content
Why. This might be code for the sake of coding. What problem does this solve?
# Important Content First
Why? SEO maybe? Western people read left to right and top to bottom. Thus in a
somewhat standard 3 column layout I would expect Header, left, center, right, footer to be
the code order anything else and I am hunting around.
# Common Content INCLUDED

This I somewhat agree with. Generally a good idea but sometimes this will work and
others it won’t. It is an architecture issue.
# Code is Tabbed into Sections
Oh I love properly tabbed code. Tabs are my friend. On an offt opic note Python uses tabs
as its method of structure. Thus code tabbed in will be the same as braced code in most
other languages that use braces.
# Proper Ending Tags

Yes but I really hate people who put that little /> at the image tag among others. It works
fine without it and no major browser has the slightest problem without it.
# Hierarchy of Header Tags

SEO has its own set of rules that are ruining header tags for everyone. But once again
clients are not paying for nice code they are running a business and SEO is generally very
important to their bottom line thus it superceeds all good design rules.
# Content, Content, Content
P vs BR is more of a style choice. If you plan on noodling P in your CSS then it can be
better but if you don’t then why not stick with a tag more inline with how computers
think?
# No Styling!
Wrong wrong wrong. CSS is a tool like all the others. Tables font and other tags are just
tools. A table can go a million miles with few surprises that CSS will kill you with. But
again it is an architecture issue. If you have hundreds of hand coded html pages then CSS
will save you during your next site redesign but if you only have a few templates in a
database driven site then putting too much of your formatting in css will just get in your
way and increase code complexity.
My rule is to use the right tool for the job not my favorite tool for the job. The right tool
should result in the fewest number of small simple files. A good example of where I have
seen bad use of things like CSS is where you have say 30 fundamentally different pages in
a site and all their css is clumped into one file. Just as bad would be to have the css broken
up in 30 separate files.
CSS in a separate file serves three purposes. A common repository for common code,
potentially a single place to reformat the entire site and to speed the loading of the site as
the the css file will be 304′d. So if the css is not repeated throughout the site then that only
20 of 25 8/27/2008 6:11 PM
leaves speeding up page load times. So if you are facing a common situation of copying
some CSS into a CSS file that is used in only one place on a page infrequently loaded why
is it in the css file? Why not go so far as to put the CSS into a style attribute right where it
gets used? Css purists will get all wound up over this one but to me this reeks of religion
not fact. In good programming you want to keep in mind that real people will read this
code. If a person is in making changes to a page and they have to jump back and fourth to
a css file and hunt for some tags modifiers then have you served the purposes of your
client or have you served the purposes of some rules that someone made up in their head?
If the style modifiers are right where you need to make your changes then you have made
everything easier, simpler, and thus cheaper.
Personally I would fire any programmers that I found wasting my money on “proper”
formatting that only served to complicate and obfuscate the code and thus miss the whole
point as to why they were hired in the first place; Solving problems.
Much more important code rules that I impose are like: Use English in code. ftr_l.png is
bad where footer_left.png is better.
Comment by Robert — February 23, 2008 @ 7:17 pm
63.
@Robert:
DOCTYPE: Leaving it out triggers quirks mode with many odd behaviours making it hard
to produse cross browser implementations as quick mode in other browsers tried to
implement IE’s many quicks. And this makes it all a guessing game.
And where have you heard that W3C don’t want people to use a doctype with DTD relating
to the w3c site? There’s no browser that loads the DTD of HTML files, so it got no grounds
for that statement.
Semantically Clean Menu:

It’s not just a semantically clean menu that’s important, but the whole document. And the
reason being is to make machines understand and interpret the content. Assistive
technologies, search engines are the biggest groups which benefit from semantic
documents.
Important Content First:

Because a website might be represented in so many ways. A mobile phone, for instance,
will not be able to display a three column layout. It will need everything linearised.
Websites is being accessed by so much more than just a browser on a computer. That’s
why the layout shouldn’t dictate the order of your content.
Proper Ending Tags

The /> is there because it’s in XHTML format. HTML in XML format. If you don’t like that
use HTML.
The benefit XHTML has over HTML is that you can use a simple XML parser to read and
iterate over the DOM. If you have HTML you need an SMGL parser which is not so simple.
Hierarchy of Header Tags

“SEO has its own set of rules that are ruining header tags for everyone.” –And what would
that be?
21 of 25 8/27/2008 6:11 PM
# Content, Content, Content

P vs BR is NOT a style choice. A P element defines a paragraph, a BR is simply a forced
linebreak. How is BR more inline with how computers think?
# No Styling!
Tables for layout and font tags are the wrong tools, period. It’s all about separating the
layout from the content.
By the whole it appears that you see websites as a purely visual matter. Your arguments
doesn’t accommodate how to present the document to different media, such as screen
readers, handheld devices and print. Leaving all the layout into separate CSS files allows
you to serve a different CSS to these different medias.
If a site has 30 pages that need 30 different stylesheets then the real question is why does
it require 30 different stylesheet? Why is there no consistency?
“Personally I would fire any programmers that I found wasting my money on “proper”
formatting that only served to complicate and obfuscate the code and thus miss the whole
point as to why they were hired in the first place; Solving problems.”
CSS doesn’t complicate or obfuscate. That would be solely due to the person writing the
codes.
Some of your questions are valid if you look at the articles as a spesific example. Several of
the DIVs and IDs might not be needed. It’d all depend on each site and the markup should
be adapted to each case.
However, many of you questions regarding semantics and separating layout from content
doesn’t hold water. Have you read up on the benefits of web semantics? The value of
separating content, layout and behaviour?
Comment by Thomas Thomassen — February 24, 2008 @ 1:35 am
64.
Thomas, don’t loose your energy with Robert, we obviously don’t live in the same world
At best it’s a troll, at worst he really believe what he is saying…
Comment by Thibaut Allender — February 24, 2008 @ 6:02 am
65.
“In general, I find that expressing your page with the fewest (and no fewer) elements
possible to be most preferred.”
Yes - with a caveat. Sometimes it’s useful to add an extra div in places where it might be
useful as a styling hook at a later date. A couple of times I’ve cursed myself for not putting
any spare styling hooks in when I’ve wanted to tweak something, and have had to either
not bother, or go through every page adding them. A few spare divs round key chunks of
the page won’t hurt, and could save you a lot of time in the long run.
22 of 25 8/27/2008 6:11 PM
“No, no, no. Why would you even bother to set the character set, then, if you’re not going
to use the characters in it? Just put the © symbol directly in your code, a practice that has
it show up properly as long as you’ve set the proper charset.”
No, no, no. Do you know what charset your text editor is using? I don’t - it could be
Windows-1252 for all I know. Typing UTF-8 into the third line of a plain text document
doesn’t magically save that document in UTF-8! I’d rather stay safe and use the character
encoding, and guarantee that it will come out right in every browser.
Comment by Stevie D — February 26, 2008 @ 4:48 pm
66.
This summary is helpful to improve the own source code of XHTML and CSS.
I will show the image later, but i find some interesting ideas already.
Ralph
Comment by Ralph — March 7, 2008 @ 7:27 am
67.
Great article, but can you please tell me how to go about getting the ‘important content’
first. I use php includes to manage my navigation and footer, and when seen in the html
source, the navigation part is first, how do I get the ‘content’ read first?
Thanks
Comment by Whistler Ski Hire — March 11, 2008 @ 11:44 am
68.
Hey, if you use Haml for all your HTML needs, you’re already half way there!
Comment by farleyknight — April 4, 2008 @ 3:25 pm
69.
Very nice article, however I might suggest another tip to your list: use the right graphic file
format for the right image type.
23 of 25 8/27/2008 6:11 PM
Your “CleanCode” image should obviously be PNG (or GIF), NOT JPEG. JPEG is for
photographic content, and your CleanCode image is clearly not a photo!
I did some tests, and you should be able to make an 8-bit PNG with 32 colors at around
100-125 KiB, with a better end result than your 896 KiB JPEG file. The same could
probably be done with the PDF if you embed a PNG instead of a JPEG.
Comment by Yvan256 — April 6, 2008 @ 9:35 am
70.
Good article. This is something very close to home for me.
I work as a web developer and appreciate clean, correct html code.
For example, view source the HTML for this site i’ve just finished developing:
http://www.mainstaystudent.co.uk
Despite running from a MYSQL backend and generated using PHP, I still maintain decent
html structure.
Comment by james — April 19, 2008 @ 5:06 am
71.
This is nice article I’m going to featured this on my Web Trends.
Comment by Jonathan Concepcion — June 15, 2008 @ 1:18 am
72.
Very good article! I also had never thought of using an id on the body
Comment by Andy — June 19, 2008 @ 8:09 am
73.
“There should be no deprecated tags in site.”
Perhaps you meant sight or on your site.
24 of 25 8/27/2008 6:11 PM
Comment by required!? — June 22, 2008 @ 7:18 pm
Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out!
Remember to visit css-tricks.com often for more fresh content.
25 of 25 8/27/2008 6:11 PM

What Beautiful HTML Code Lo..

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

What Beautiful HTML Code Lo..

Hochgeladen von

Copyright:

Verfügbare Formate

What Beautiful HTML Code Looks Like - CSS-Tricks http://css-tricks.

What Beautiful HTML Code Looks Like

DOCTYPE Properly Declared

Main DIV for all Page Content

[VIEW THE IMAGE LARGE] [http://css-tricks.com/examples/CleanCode/CleanCode.jpg]

[DOWNLOAD THE PDF] [http://css-tricks.com/examples/CleanCode/CleanCode.pdf]

Theoretically Related Articles:

Better Email Links: Featuring CSS Attribute Selectors [http://css-tricks.com/better-email-links-

It is a great article, very straightforward.

Comment by Volkan Görgülü — November 1, 2007 @ 7:13 am

Comment by Matt Doar — November 1, 2007 @ 11:20 am

Thanks Matt, I got that all fixed up.

Comment by Chris Coyier — November 1, 2007 @ 2:21 pm

Comment by Jermayn Parker — November 1, 2007 @ 5:29 pm

Comment by Graham Bannister — November 1, 2007 @ 11:32 pm

Hi Chris, really nice read but I do have one suggestion.

Comment by Dave Woods — November 2, 2007 @ 2:43 am

Comment by Chris Coyier — November 2, 2007 @ 6:34 am

Comment by paulie — November 2, 2007 @ 6:51 am

Comment by Chris Coyier — November 2, 2007 @ 6:59 am

Comment by Wojciech Zając — November 2, 2007 @ 9:19 am

Comment by Zach — November 2, 2007 @ 10:13 am

‘Important Content First’

Comment by sickr — November 2, 2007 @ 10:36 am

@Wojciech: I like all those suggestions, thanks.

Comment by Chris Coyier — November 2, 2007 @ 10:43 am

Comment by Tumbleweed — November 2, 2007 @ 11:33 am

Comment by Isaac Z. Schlueter — November 2, 2007 @ 11:34 am

Good article, but there are two things I disagree on:

Content, content, content:

Comment by Alexander K. Schrøder — November 2, 2007 @ 12:12 pm

Comment by Ross Johnson — November 2, 2007 @ 12:25 pm

Comment by Brian McNitt — November 2, 2007 @ 12:42 pm

Comment by Peter — November 2, 2007 @ 12:45 pm

Nice article, but I’d take issue with:

* no need to wrap the ul navigation in a div (as previously mentioned)

Comment by Dave — November 2, 2007 @ 2:26 pm

Ditto w/Dave on the ‘right-content’ class naming conventions.

Comment by Ross Martin — November 2, 2007 @ 3:48 pm

already know that. Don’t they?

Comment by smickworks — November 2, 2007 @ 4:21 pm

Comment by Wojciech Zając — November 2, 2007 @ 4:43 pm

Comment by Volkan Görgülü — November 2, 2007 @ 4:59 pm

Comment by Chris Coyier — November 2, 2007 @ 5:25 pm

Comment by X28641 — November 2, 2007 @ 7:08 pm

Comment by Jermayn Parker — November 2, 2007 @ 7:22 pm

You have a beautifully designed, CSS powered site. I like it.

Comment by Sangesh — November 3, 2007 @ 9:06 am

Comment by Tabris — November 3, 2007 @ 12:16 pm

Good article, good comments.

What are your thoughts on these questions?

Comment by Niels — November 7, 2007 @ 5:11 am

Comment by John Vance — November 7, 2007 @ 4:55 pm

Please put out a book, I will buy it.

Comment by HardwareGuy — November 8, 2007 @ 11:00 am

Comment by Philippe Meunier — November 13, 2007 @ 11:13 am

Comment by brad — November 13, 2007 @ 12:43 pm

Comment by Thomas Thomassen — November 13, 2007 @ 3:10 pm

@brad: Thanks for the clarification, that’s good to know.

Comment by Chris Coyier — November 13, 2007 @ 3:47 pm

Comment by Volkan Görgülü — November 13, 2007 @ 4:40 pm

Any hint would be highly appreciated!

Comment by Inwit — November 14, 2007 @ 1:10 am

Comment by Niels — November 14, 2007 @ 4:42 am

If you want to share informations, make a documentation, not comments.