digg

Join DiggAbout

Donkeys and Elephants and Delegates,oh my!
Check out the most popular Elections 2008 content on Digg.

21 guidelines that will help you write better HTML

digital-web.com — Markup is the technical foundation of front-end code. In one way or another, it influences or is influenced by design, content, accessibility, CSS, DOM scripting, and more. The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code. Your markup might be good now, but following...

Bury
show profanity settings
expand all
  • Fatalbert06, on 10/12/2007, -18/+29While HTML is great and all, to succeed in making a web page, I think one should endeavor to gain a firm grasp of the English language first. No one will care how well done your HTML is if your content isn't at least understandable.
    • diggEntertainer, on 10/12/2007, -24/+7Why English language? زبان چینی?
    • Ninja337, on 10/12/2007, -25/+3Sorry we don't read Bantu
    • kitwaites, on 10/12/2007, -2/+9I think this is aimed at big websites that get thousands of hits per day, where a team of web developers will be in charge of keeping it up to date. Let's face it - clean code is great, however, if you're only bashing together a fansite it's best to save the time and use a few extra bytes. However, if you're expecting other people to read your code, standardised, commented code that other people can make sense of is a must if you want to keep your job.
    • tjanson, on 10/12/2007, -2/+20True, good content is always the key. I've found well written and researched articles on sites that looked like they were designed by Jakob Nielsen (especially when it comes to non-tech topics) - and I didn't care a bit. But that doesn't mean that there shouldn't be or is no need for good web design, regarding both code and looks.

      But anyway, am I the only one getting tired of "[2digit number] (rules|resources|code snippets|tips|...) for [...]"? (If yes - go ahead, digg me down.) Especially because it's so damn redundant: How many times have we read "Don't use tables for layout" - duh! That is old news since 2002 and those who haven't changed to semantic code by now will probably never change their mind.
      All the list says (and the guidelines are good, no question about it) (go ahead, read along!) is:
      1) Separate Content, Presentation and Behaviour (HTML, CSS, JS in most cases)
      2) Use semantic markup (and pay attention to stuff that usually doesn't get enough attention: alt-attributes, other usability stuff, etc.)
      Those two principles are so basic that if you're a web designer and you haven't heard about them you should seriously go read some fundamental books. I'm usually not an "Old News!" screamer, but this list is completely unnecessary.
    • garreh, on 10/12/2007, -4/+5@tjanson yes thats true. Content is KING.

      Take YouTube and Google for example. The markup for that site is absolutely AWFUL and breaks every coding law. But why do people still flock to those two site? Because of content.

      I would advise people to work on content for their site as opose to worrying about how their markup isn't 100% to standards or, even worse, spending all their time worrying about micro-optimisations.
    • thesimo, on 10/12/2007, -1/+4well your kind of pointing out the obvious there, content will always win, but from the point of a developer (which this article is aimed at) clean smart code will cause u a lot less pain in the ass.
    • freefm, on 10/12/2007, -4/+6I don't think you'll have a problem with any of this if your whole site is flash.

      /jk
    • supert0ad, on 10/12/2007, -3/+1@ diggEntertainer - English is the language of the internet. get over it

      @garreh - google does not have bad markup. it may not look pretty to you, but it is good markup that has been sent through a compressor to remove as many extra characters as possible to save on bandwidth.
    • garreh, on 10/12/2007, -1/+5@supert0ad

      I don't know what Google you are going to but the code I have up here right now is criminal. If you don't believe me look for yourself... using < center > is deprecated, repeating classes, no doctype, horrible use of & nbsp;& nbsp;& nbsp;& nbsp;, use of colour names as oppose to hex values, use of tables (which is what this article is condemning in particular), ambiguous class names (e.g. "q"), ampersand literals in urls, unescaped tags, incorrect nesting of tags, mixture of uppercase and lowercase attribute names... need I go on?

      You really havn't a clue, have you? :)
  • rEvolution3, on 10/12/2007, -8/+2Content is content, it can come from anywhere.
  • Amoeba16, on 10/12/2007, -2/+12This is not bad, actually, considering the quality of the usual "make a good web page" lists generated by parrots that usually get Dugg.

    Any list that feels the need to include "don't use blinking text" is aiming too low to be useful. This article, in contrast, makes some decent points about the beauty of streamlined code, which layers that interact in a way that makes formal sense.
  • Alisic, on 10/12/2007, -2/+5Another good note would be to test your design in different browsers thoroughly as you go along building it. It might seem a bit time consuming, but ultimately it saves you a lot of hassle. People often make the mistake of testing in different browsers only when they finish the whole design or a huge chunk of it. Then usually the whole thing is too complicated to solve gracefully and you have to resort to hack-o-rama in order to achieve consistent display across browsers. And with that, usually, the semantics go flying out the window.
    • informbusiness, on 10/12/2007, -1/+1To help with that when your are organizing your design process include a list of the browsers and platform you deem necessary for your code layer to work over, thats before you assume any code.
  • Ninja337, on 10/12/2007, -12/+3The and element do have semantic. They translate to information no longer being relevant or available. You should use as opposed to CSS for semantic code. I don't understand why the W3C deprecated them.
    • jasg, on 10/12/2007, -1/+12*crying*
      I am confused,what are you trying to say ?
    • bairy, on 10/12/2007, -2/+8@Ninja
      Digg removes html tags, you should probably try that again.
    • resplence, on 10/12/2007, -0/+3I think he meant the 's' and 'strike' elements, since at first I thought the same. What I think the article means, though, is not that they don't serve a semantic function, but that they are deprecated - as he pointed out - and you should use 'del' instead for the same purposes (information no longer being relevant or available).
  • jasmar, on 10/12/2007, -6/+2Good article. The quality of content on this site is consistently excellent.
  • jasg, on 10/12/2007, -2/+6Man, i feel like working with this guy.

    very good article, wish i could digg it more than once !
  • PsychoticClown, on 10/12/2007, -1/+7Good info. Now for some guidelines for The Digg Kids to know how to use grammar and spelling.
  • Lick, on 10/12/2007, -1/+4Dugg because it's a great read and a reminder for the next time I go XHTML-ing.

    However, as picky as I am, I do have one complaint. Why doesn't this article add something of its own? It seems that the entire article is a short flashback of all the other blogposts I have read about the subject in the past years.
    I was really hoping to find some new information, but I guess that's only a personal thing I projected onto the article.
    At any rate, the article gives what it promised: 21 strong guidelines, whether you knew about them or not.
  • exp0sure, on 10/12/2007, -14/+11Creating webpage layouts without tables? Man you obviously don't have to earn your money with web development. As long as you have to be compatible with older browsers and have hassles with IE, FF rendering different box models and they don't understand the same CSS - forget it! Live your fantasy of an ideal web development environment...

    There's simply no way around efficient web layout for 90% of the websites without table without extensive CSS hacking and tricks which will blow your webdesign in the next browser generation. No way. Nevertheless I agree to keep it simple...which leads you back to tables ;-)
    • Lick, on 10/12/2007, -3/+11That might be true, but it's better to develop for the future (and for the standards) than to support antique browsers. We HAVE to move on.
    • tjanson, on 10/12/2007, -1/+11That's definitely not true. The only browser still in use (>1%) that has serious issues displaying CSS based layouts is IE5 at about 2%. Many clients actively *demand* table less layouts, not because they understand the whole thing, but because it's a "cool" buzzword. The Box Model Bug you're referring to is thankfully long gone, and was easy to fix with a separate IE stylesheet - you have to fix IE's bugs a bit, that's true, but no one is still designing table layouts because of browser compatibility unless it's a website for Netscape 4 Enthusiasts ;-). Someone who still codes table layouts is either lazy or doesn't know about semantics (like... my dad). I don't know in what cave you've been hiding - have heard of - say - Zeldman? If you're clients want table layouts you should show them the benefits of semantic markup and persuade them.
    • kevin45, on 10/12/2007, -2/+10Are you retarded? We have 200 active projects and none of which use tables for layout and are compatible with IE6, 7, FF2, Opera 8-9 and Safari. Tables are for lazy idiots. Using a horse and carriage can still get you where you need to go, but would you still want to use that today?

      http://www.delawarestatefair.com
      http://www.intergem.com
      http://www.robinsellslewes.com/
      http://www.inclind.com/

      Just a few examples.. and it only takes about 4 hours to do it correct.
    • TenebrousX, on 10/12/2007, -0/+7And screen readers and other such clients will hate you for using tables for layout
    • isplashwater, on 10/12/2007, -0/+7As a freelancer I *do* earn money making websites (and not just one or two a month... I do it full time), and I can tell you that it is possible to get things to render correctly without using tables. You're talking bs. Yeh, sure, noobs can't get it to display correctly, but once you understand how each browser and versions render things, you can do whatever you want
    • kewlito, on 10/12/2007, -1/+3I was going to digg you up until this: "If you're clients want table layouts..."
    • HigherLogic, on 10/12/2007, -1/+2@tjanson: "Box Model Bug you're referring to is thankfully long gone, and was easy to fix with a separate IE stylesheet - you have to fix IE's bugs a bit, that's true ..."

      If you are simply talking about IE5 I might agree, but as you said, hardly anyone is using that (less than 1%, if even that), and I doubt it's a priority anymore for any legitimate web designer.

      But I don't agree with you that "you have to fix IEs bugs a bit" because you don't. I use one stylesheet. Zero hacks or conditionals. And all my sites pass in IE6, IE7, Safari, Opera, and Firefox. I simply can't stand when so-called designers call out IE on issues because of their inability to code properly, when it's apparent that it can be done without hours of debugging and hacks and whatnot.
    • tjanson, on 10/12/2007, -0/+1Sorry for that, kewlito ;-) I was typing fast and English is not my first language anyway. I'm deeply ashamed.
      @HigherLogic: Oh yes, you do ;-) There's still plenty of well documented bugs (e.g., http://www.positioniseverything.net/explorer.html ) and if you haven't run across any of these you've been very lucky. Some of the stuff you have to fix is not exactly a bug, for example the pre-IE7 support for alpha channel PNGs. You'd "fix" that using MS's proprietary CSS "filter" opacity function thingy. Or the lack of pseudo-class support - try to make an IE6 compatible drop-down-menu without JS.
      Wikipedia's layout and design isn't particularly complicated, right? Go take a look at the <head> section. IE is apparently the only browser that needs fixing, and not just a bit: IE50Fixes.css, IE55Fixes.css, IE60Fixes.css, IE70Fixes.css, IEFixes.js (!?) - see my point?
    • HigherLogic, on 10/12/2007, -1/+1>> There's still plenty of well documented bugs

      I never said there were not any bugs, just that these bugs are usually the result of people doing things incorrectly in the first place. I've encountered one bug in Firefox that bothers me to no end (the anchor tag, specifically set as a block element with a background and different a:hover background, it breaks in Firefox randomly, so it's not improper coding).

      >> for example the pre-IE7 support for alpha channel PNGs.

      I agree with the PNG with alpha channel support, but that doesn't mean you can't get around it. I exclusively use PNG files for my websites, and if I have to use transparency, will use PNG-8, or PNG with index transparency. There's always a way around something without resorting to a hack.

      >> Or the lack of pseudo-class support

      The pseudo-class issue is bothersome, but workable. You learn to code without resorting to techniques that you shouldn't use (or if you do use, aren't really adding any value to your site).

      >> try to make an IE6 compatible drop-down-menu without JS.

      If I want a drop-down menu, I'll use a form element. I'm a usability nut.

      >> Wikipedia's layout and design isn't particularly complicated, right?

      Looking at someone else's code doesn't say much. I could create the Wiki layout without any hacks. That just tells me the developer who did the markup doesn't fully understand how to do it either.

      I make pretty complex sites that are hack-free, so I cannot understand why someone would need to use a workaround, a hack, an alternative stylesheet, etc. And when I do hear people complain, I always ask to see their website. 100% of the time, it's evident just from looking at their designs that they are not what you would call a professional. They may _think_ they are, but they aren't even close.

      If you stick with proper, well-structured, semantic markup, and employ usability in your designs and added technologies (like a drop-down navigation) then you can do without any of the aforementioned hacks and alternatives.

      I'll even wager a bet on it, which I've done countless times on design forums, to which (at no suprise) on one bites.
  • chronusmcgee, on 10/12/2007, -4/+2I have only one problem with his editorial: He placed the body of each bullet item BEFORE the subject line associated with it. Thus if you were scanning for an interesting item by examining the titles, you would have to jump back to find the content.
  • deadsanchez, on 10/12/2007, -8/+8What's the deal with people demonizing HTML Tables? They are still fuctional.
    • romanpike, on 10/12/2007, -0/+10That seems to be a common misconception with tables these days. Many designers believe they are pure evil, but you are right, provided you are using them with tabular data they are appropriate. People seem to forget that the anti-table rhetoric is aimed at using tables for layout and presentation. Now, will somebody take the bait for the "using tables to markup forms" debate...?
    • phoopee3, on 10/12/2007, -7/+4I'm also sick and tired of people saying not to use tables. where do these people work that they have the time to line everything up right using divs and *****? yes using a table might not be the newest and greatest way to lay something out, but if it needs to get done now, tables are the way to do it.
    • burke, on 10/12/2007, -1/+13Actually, having used divs for the last few years, I find them much easier than tables to get properly aligned.
    • HigherLogic, on 10/12/2007, -1/+3@ phoopee3: "where do these people work that they have the time to line everything up right using divs and *****?"

      I always hear this from people who use tables, how it takes so much longer to create a tableless website. The only reason you feel this way is because you can't create a tableless layout.

      If you could you (a) wouldn't have backed up table-based layouts and (b) you would know that you can whip out a tableless layout in the same, if not less, amount of time it takes to create one with tables.
  • mig35, on 10/12/2007, -3/+1lol how can you call yourself a web developer when you're a medical student. I thought web developers who know javascript have 4 years B.Sc. in computer science and they know what they are doing. Go to the bottom of the page.

    http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/
  • Antiproton, on 10/12/2007, -4/+7I am a web developer by trade. I do not use tables. Tables are crap, and I'm glad they are dead. They make your code look like poo and, truth be told, large tables render more slowly than a pure CSS solution does. You might not want to believe it, but it's true. This is PARTICULARLY true, if you use tables across many pages that all share the same style sheet. Download style sheet once, cache it, apply it to every page OR download full tabular markup for every page.

    That being said, I do take some issue with this article. While it's fine, in theory, to be such a 'style seperate from substance' purist, sometimes it just doesn't work out that way. So, to this article, and everyone reading it with an eye for advice, just remember this: learn everything and use the advice judiciously. If you stick a 'style' attribute on a div to override the style of a single element on a single page, it's not going to turn your website into a travesty of horrible code.

    Just don't go nuts, try and be clean and remember that someday, you or someone else might need to go back and try to figure out what the hell is going on.

    To all the people who say "blah blah you can't use pure CSS if you are on a deadline... doesn't work for the real world...", what you actually mean to say is "I don't feel like taking the time to learn how to do it properly, so I'm going to do it the way I learned how in 1995". That's fine, but your websites will still suck.
    • phoopee3, on 10/12/2007, -3/+6While our websites might suck when looking at the code, 99% of the end-users don't give a ***** what the code looks like.

      There's a huge difference between theory and practice. That being said, I do agree with you that the theory is a good one and we should all strive to get there.
    • kevin45, on 10/12/2007, -3/+4I agree with antiproton.

      "Are you retarded? We have 200 active projects and none of which use tables for layout and are compatible with IE6, 7, FF2, Opera 8-9 and Safari. Tables are for lazy idiots. Using a horse and carriage can still get you where you need to go, but would you still want to use that today?

      http://www.delawarestatefair.com
      http://www.intergem.com
      http://www.robinsellslewes.com/
      http://www.inclind.com/

      Just a few examples.. and it only takes about 4 hours to do it correct."
  • 0siris, on 10/12/2007, -4/+3This article is crap... Tables create a good type of design, and if thats what your looking for, then so be it. For example for a friend, i programed a php image gallery that thumbnailed all of the images in a folder, and displayed them as links on his image gallery section. Granted I wasn't being all that motivated when i wrote it, and i made all of the thumbnails display in their own table cells. Every 5 images it echoed a . The table looks completely good to anyone who doesn't look at the source. If i had written a CSS work around, there would have been more files to upload, more time on my part, and a negligible overall benefit. Thats the problem with this all. I use CSS on everything I do, but condemning tables because you can ***** around with divs and make them look like tables is just illogical.
    • burke, on 10/12/2007, -4/+5Right. This is considered tabular data, and most people who aren't Level 11 CSS-Nazis would consider this a perfect use of tables.
    • kevin45, on 10/12/2007, -1/+6No ***** man... Anything that is output as tabular data like a spreadsheet or image gallery is perfect use of a table, because you are displaying TABULAR DATA. Its not about being a CSS nazi.
    • JNCoward, on 10/12/2007, -4/+2If you were to truly use the table in a tabular way, such as having one column for the image, another for the name, a third for the file-size etc... then yes that would have been perfectly semantic and good. But you didn't, so no, this is not a valid, semantic use of tables. What you had was a list of images and you marked it up as a table with several columns instead of marking it up as ... well as a list of images.






      ul.images li {
      float: left;
      }

      Man that was hard, I almost strained a finger trying to type those parentheses.

      Oh and call me a CSS Nazi and I won't even frown, at least I didn't have to write that stupid ugly PHP script that inserted a every five images.
    • JNCoward, on 10/12/2007, -3/+2annoying code stripping, here goes again:

      <ul>
      <li><img src="someimage.png" alt=" some description"/>
      <li><img src="another.png" alt=" another description"/>
      </ul>

      whoo, typing entities is fun...
    • kevin45, on 10/12/2007, -2/+5Thats pretty ridiculous floating everything left. Then you'd have to also say clear left on the ul, and ASSUME each thumbnail is evenly sized (100x100 or whatever) and this isn't always the case. Floating multiple elements in a single container is a no-no. Besides, wouldn't display: inline get li's to stay in line?

      If you have a gallery that displays 25 photos per page, thats a 5x5 data grid of photos. Perfect use of a table.

      inside your td cell

      img br
      title br
      etc

      No reason to put those details in each cell. An example here:

      http://www.lighthouserealestatellc.com/property/index.htm
    • JNCoward, on 10/12/2007, -2/+0@kevin45

      of course I was oversimplyfying the example, but you are wrong on just about every count. First, floating is indeed the better solution here than display:inline, since that would make it impossible to add height to the elements, because obviously you want to set a width and height on li so they are all the same size. Mostly though I would have resized the images to an exact size serverside, it looks better that way anyway. Also on the issue of clearing, clearing the ul is in fact a wrong move, you would have to specify clear: left on the element that follows the ul not the ul itself.

      As for the example you sent, I could recreate that in CSS in about five minutes, maximum.
    • Matt2k, on 10/12/2007, -1/+2> where do these people work that they have the time to line everything up right using divs and *****?

      They work for blogs where people get paid to write *****. I don't know. Using DIVs to line things up is fine and dandy, but in most cases it really isn't one bit different.

      It doesn't _really_ matter what you use to get the job done. Semantic web is ***** crazy designers pretending they're tackling serious programming issues and inflating their egos. Here comes the mod crew. I use CSS like I use SSI and don't make it a religious crusade.
    • Matt2k, on 10/12/2007, -1/+2> As for the example you sent, I could recreate that in CSS in about five minutes, maximum.

      Your irritating condescending tone reminds me of the "fixed-width nazis" we had before the "css nazis" took over. Now just about every site is fixed width. And the world didn't end. Because it turns out no one really cared that much except for a vocal crew of experts.
    • tjanson, on 10/12/2007, -2/+1Completely agree with jncoward.

      "Thats pretty ridiculous floating everything left. Then you'd have to also say clear left on the ul, and ASSUME each thumbnail is evenly sized (100x100 or whatever) and this isn't always the case. Floating multiple elements in a single container is a no-no. Besides, wouldn't display: inline get li's to stay in line?
      If you have a gallery that displays 25 photos per page, thats a 5x5 data grid of photos. Perfect use of a table."

      Every single word you just said is BS (sorry, don't feel offended, but...):
      "pretty ridiculous" - No?
      "you'd have to say clear left on ul" - Nope, you'd have to clear *after* the ul, and you could perfectly use br or hr which would be semantically fine
      "evenly sized" - Well, okay, so give the li's a static height and width and display as block
      "floating multiple elements in a single container is a no-no" Don't even now what you're trying to say... Okay, I guess you say that you shouldn't float more than one element in its container? Dude... You mean like Digg does in the footer? Take a look if you got Firebug. Damned float:left definition lists in a container.
      "besides...inline" - Hm, okay, I'd make them block elements as well
      "perfect use of a table" - ARGH! Haven't you read any of the comments above, the article, and everyone else screaming "table - tabular data"!? That's the whole f***ing point of the complete debate.

      Sorry if this comment is completely boring for those not interested in HTML, but I couldn't resist.
  • maexus, on 10/12/2007, -0/+4I knew all that but it's a great article none the less. Prevents disasters like the code soup of Myspace.
  • ITsaNetwork, on 10/12/2007, -0/+1Here's a good tutorial on how to do layout without tables.

    http://www.htmlgoodies.com/beyond/css/article.php/3642151
  • resplence, on 10/12/2007, -1/+2"Guideline Number 10: Use microformats when appropriate."

    I've went to the microformats website and wiki half a hundred times to try to understand what they are and figure out their practical purpose. Maybe I'm just real dumb but I still don't get it. The whole thing just looks like some Semantic Web 1337 Club.
    • HigherLogic, on 10/12/2007, -0/+1A microformat is basically like a "convention," or a formally recognized set of markup that external (and internal) sources can use.

      The vCard example on Wikipedia was a good example:

      http://en.wikipedia.org/wiki/Microformats#Example

      They first showed you how you could display the same information with no extra markup. The second example, however, because of the added class names and wrapping vcard class, an external source (such as a mail program) can identify this bit of markup on your page and do something with it.

      A really good example that probably most web designers have used is the rel="nofollow" attribute on the anchor (link) tag. Google (and correct me if I'm wrong, but I think other engines use this now too) recognizes this bit of code, even though it does nothing at all to some crawlers, and won't follow the link (typically to an external source) and give it weight.
    • tjanson, on 10/12/2007, -1/+1Okay here's the deal:
      Semantic markup is good because it could in theory be processed by a machine (call it crawler or whatever you want): <em>a webcrawler might know that this is meant to be emphasised</em>. That's nor very helpful yet, but think about links for a second: If you just write in a text paragraph: "Buddy, check out weirdpix.com" a machine could tell that it's a URL (well, it could, because of the .com, but just ignore that ;-) ). Microformats take this a step further: If you use the hCard code in your about page a machine could identify that. (See the example link above.) Rather scary? Okay a different exampe:
      Upcoming.org uses the hCalendar microformat to mark up the events and with the right Firefox extension you can simply drag and drop 'em into iCal or any other calendar software that follows the open standards (i.e., not Microsoft, I guess ;-) ), because the date, location etc. are marked up in clean XHTML and standardized class names. Still unsure? Try this: http://microformats.org/code/hcalendar/creator , probably the best way to get the concept.
    • resplence, on 10/12/2007, -0/+1Oh, ok. I think I get it now. The examples of formatted content being easily extracted by third-party programs really drove the point home. I still don't see much use for the general public as of yet, but I guess this is how profound changes that are ahead of their time start.
  • astrotrain, on 10/12/2007, -0/+1Nothing mentioned about staying away fro Front Page or anything Microsoft for coding HTML. This should be Guideline #1.
  • garyl2k, on 11/27/2007, -0/+1http://www.freegifts4you.co.uk
  • mendigg, on 03/30/2008, -0/+0Good info. Now for some guidelines for The Digg Kids to know how to use grammar and spelling. http://domikua.com/
  • sandhuharvey, on 07/21/2008, -0/+0Thanks for the guidelines
    http://ww.free-3g-iphone.net
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.