What Beautiful Html Code Lo..

What Beautiful HTML Code Looks Like - CSS-Tricks

1 of 25

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 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

tags to look different on the homepage. In your CSS you can write: #home h2 {} to accomplish this and not affect

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.

• Home
• About
• Contact

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

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

2 of 25

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

tags. Use lists where appropriate. Use codes like © for © symbols. Don’t go overboard with
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 ) 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-printstylesheet/] Header Text Image Replacement [http://css-tricks.com/header-text-image-replacement/]

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

3 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

Better Email Links: Featuring CSS Attribute Selectors [http://css-tricks.com/better-email-linksfeaturing-css-attribute-selectors/]

Show Pingbacks

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

4 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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 . . .

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

5 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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 !!!

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

6 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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.

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

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.”

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

7 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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.

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

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.

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

8 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

9 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

10 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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!

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

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

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

11 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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?

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

12 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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.

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

13 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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.

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

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.

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

14 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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.

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

15 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

@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.

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

16 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

17 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

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

8/27/2008 6:11 PM

What Beautiful HTML Code Looks Like - CSS-Tricks

18 of 25

http://css-tricks.com/what-beautiful-html-code-looks-like/

54. The body id can be done automatically with php:

What Beautiful Html Code Lo..

November 2019 11

Send Email Html Code

May 2020 11

What Beautiful Stars

June 2020 7

What-a-beautiful-name_lcc.pdf

May 2020 6

What A Beautiful Name.docx

May 2020 11

What A Beautiful Name.docx

May 2020 14