digg

Join DiggAbout
See the original image at ukimagehost.com

What Beautiful HTML Code Looks Like

ukimagehost.com — The beauty of clean coding!

Bury
show profanity settings
expand all
  • tastypickles, on 11/09/2007, -9/+53ah... so refreshing!
    • gamesector, on 11/09/2007, -10/+2Here's some beautiful code (add the arrows and you're ready to roll)

      link rel="stylesheet" type="text/css" href="style.css" /
      • zdiddy85, on 11/09/2007, -9/+2i really don't see your point there...

        are you saying that CSS is the cure to all code? or are you just pinpointing the key thing in which makes beautiful code?

        if you are pinpointing, wouldn't you list out a css rule or universal declaration?

        maybe something like:

        *{
        margin:0;
        padding:0;
        }
        • MtheoryX, on 11/09/2007, -5/+2I'm not a fan of the universal declarations like this.
          Rather, I much prefer a specifically formulated browser reset. May be more code, but is far more accurate as well.
          • kingkilr, on 11/09/2007, -2/+6Plus the * thing is a bitch for rendering times.
        • amadeusdemarzi, on 11/09/2007, -0/+4that reset is a very bad idea if you are working with any sort of forms.

          On a side note, I didn't really agree with the semantics on that html. You see, when you write your classes and IDs, using names like right-sidebar could in fact be misleading. It is assuming you are seeing the design of the page, which not everyone may see (think screen readers, text based browsers, css disabled etc.) Furthermore, what if you change the design of the page, and all of a suddent, right-sidebar is at the bottom of the page in a footer like format? You must now change all references to right-sidebar in all the places it occurs.

          What I would recommend though, is using the id's and classes based on the CONTENT they contain. This would mean that right-sidebar would perhaps be labled, supplementarycontent, or subnavigation, or something like that.

          Anyways, my 2cents on future proofing your html and css, agree or disagree as you see fit. Cheers.
        • zeeky, on 11/09/2007, -5/+1bad idea. the center tag will not work in IE if ya do that.
    • objectcode, on 11/09/2007, -5/+7might as well have said first
    • tyywebb, on 11/14/2007, -0/+2He forgot a forward slash under "Semantically Clean Menu" on the right.
      • sekhui, on 11/14/2007, -0/+1he started strong, now he's going to finish out strong! ;p

    • magicmarc, on 11/09/2007, -0/+5It is obvious that this is the source code to Myspace's homepage.
  • Thinkingbuddy, on 11/12/2007, -17/+614Beautiful code looks like a way over sized jpg?
    • Everglow, on 11/12/2007, -19/+6Yeahhh, that shoulda been AJAX'd.
      • altrego99, on 11/09/2007, -18/+1PNG, dude. In any case, hand coding html optimizing it by a few bytes will not help unless Firefox is optimized. Who cares in this age of bloated-ness?
        • zeptobyte, on 11/09/2007, -0/+27Uhh, proper style helps keep your code maintainable, not just smaller. In fact, in many cases it might make your pages LARGER. But if they render more easily, and are easier for you to later tweak and change, then that outweighs the tiny size increase.
      • incubusnb, on 11/12/2007, -16/+7I don't just hand-code to optimize, my web development package is a little thing called Text Editor in Ubuntu, before that I used Notepad2, and before that, Notepad.

        take dreamweaver, or frontpage, or whatever gui-based development suite you use and shove it up your ass cuz i guarantee my web pages will be better coded and easier to maintain.
        • MtheoryX, on 11/09/2007, -2/+21Some people user Dreamweaver as a text editor. It's not half-bad what with syntax highlighting and mirroring files to a server.
          That said, I prefer TextMate for serious work, and Coda for collaborative work because of it's sharing feature.
          • rspeed, on 11/09/2007, -0/+3Hell yeah. I'd been using SubEthaEdit for years and switched to TextMate a few months ago. Good stuff.
        • alecks, on 11/09/2007, -3/+21suggesting dreamweaver is the same as frontpage make you look like you don't know what the ***** you're talking about
          • gfunk84, on 11/09/2007, -2/+7You clearly haven't used Dreamweaver in the last 4 years... turn off the "design" preview and just use the code editor.
          • gmiley, on 11/08/2007, -2/+3Agree 100%. Dreamweaver is a beautiful application if for nothing else then its text editor features, and because it integrates with Visual Source Safe it is also great for corporate projects. We write all of our own in-house applications in .Net except for our website. We have not converted it to ASP .Net, and I am not 100% sure if we really plan on doing that any time soon anyway. Anyway, sorry for getting a little off topic there, but yes Dreamweaver is a great product for a number of reasons even though we don't use the WYSIWYG editor at all.
        • wpjmurray, on 11/08/2007, -3/+1Dreamweaver's markup is very good, and it's easy to build a quick page, anchor a style sheet to it and start building the style sheet via the CSS panel. Of course I'll go in late and tweak the code by hand if necessary, but I'll have a couple of pages and style sheets ready before you're halfway done with your style sheet. Not to mention that I can set up multiple test browsers and hit F12 to test the page.
    • EBFoxbat, on 11/10/2007, -8/+40Great design... It's resized to fit my screen and thus illegible and when printed it doesn't fit an 8.5"x11" sheet of paper. Perfect example of how NOT to share information over the web.
      • SteveMax, on 11/09/2007, -17/+4Why should it, when most of the world doesn't use 8.5''x11'' sheets of paper? Globally, A4 is the way to go.
        • killakan, on 11/09/2007, -1/+28Somehow, I doubt it will fit on a 8.27 X 11.69 sheet of paper either. Now, please stop being a dumbass.
          • SteveMax, on 11/12/2007, -1/+7Well, looks like I was wrong. The image is 1652x1275 pixels, which is basically the exact same aspect ratio as a US Letter page in portrait mode (within a ~.2% error margin). It will fit on a 297x210mm page with a small margin on the sides. I'd advice EBFoxbat to either try scrolling, or try to print using better software.
        • vornan19, on 11/09/2007, -2/+1Grrr, DAMN SKINNY ENGLISH PAPER!
          Hello, I work in the printing industry. Although the 'A' sizes are just halved from the parent sheet I find their final measurements awkward. Gimme that old 8.5x11, 8.5x14, 11x17, 17x22, 22x34, 32x42 anytime!
          But maybe I think that because I'm just another 'know it all American' :)
          Ascii silly question, get a silly ansi!
      • firechill, on 11/08/2007, -2/+1Resize and print?
    • fcukbush, on 11/13/2007, -7/+124And beautiful HTML is written in PHP, Apparently.
      • r00tus3r, on 11/10/2007, -38/+4So you're saying it's not HTML? Am I understanding your correctly? I'm gonna go out on a limb and say you don't have a clue what you're talking about.
        • fcukbush, on 11/09/2007, -3/+40it's obviously PHP. You can't have PHP includes in an html document, But you can have html in a php file.
          • gmiley, on 11/08/2007, -3/+12Actually you can, it's all in how you have your server set up. You can map any extension to be parsed by any particular library/parsing engine.
          • Tippis, on 11/09/2007, -3/+9No, but you *can* have them in XHTML documents (which is what we have here), since the PHP code then becomes just another XML processing instruction.
          • Crucifix, on 11/10/2007, -0/+1I'm with fcukbush on this one. The example is showing a PHP file. Of course, it's also a valid XHTML file, but come on people: if it's got PHP tags in it, don't you think it's gonna go through a parser? IMHO that makes it a PHP file first and foremost. You can tell me it's XHTML after it's dumped out of the pre-parser.

            This is all pedantic crap anyway, because it doesn't take anything away from the purpose of the article. It should have been titled "What beautiful markup looks like." To that extent, it's a great article.
        • Nineless, on 11/09/2007, -0/+4True, but it's about the HTML code and how it's formatted. The picture does not talk about the format you have to use, it only shows a way to clean up standard code which has to appear on all pages.
        • therealgeddylee, on 11/11/2007, -0/+8I think that limb broke.
    • vade79, on 11/08/2007, -3/+10Indeed, people need to know when to use a GIF and when to use a JPG...this being the GIF. (or just text)
      • fitzsimj, on 11/09/2007, -2/+12PNG!
      • digitalpencil, on 11/09/2007, -1/+4Thankyou! call me easily-irritated but it's really annoying when jpgs are used for block colour and text!
      • thomashauk, on 11/10/2007, -7/+7You should never use a GIF...
        • vade79, on 11/09/2007, -0/+2Actually, you should. For images with a small amount of total colors, like this was. The image will be more clear and the filesize will be less.
          • thomashauk, on 11/15/2007, -0/+1No a .png will often be smaller even in that situation
    • benson304, on 11/09/2007, -1/+12Fits my 24" monitor just fine... ;)
    • PathDaemon, on 11/08/2007, -0/+1Obviously the writer didn't trust him/herself to code that diagram beautifully enough :-) .
  • CaptainCyanide, on 11/12/2007, -11/+40Its... Its... Its beautiful!
    • reversekilled, on 11/12/2007, -2/+57As beautiful as only demonstration code can be.
      • theodenking, on 11/09/2007, -3/+5My code looks like that, and it's strict.
    • altrego99, on 11/08/2007, -1/+8It's the supreme epitome of perfection in all creation good or evil. It gives me hope that the destiny of mankind is not doomed to oblivion as the galaxy fades. It is the sole reason for which we yet exist. It's... it's... it's beautiful!
    • theshizzler, on 11/08/2007, -0/+7Oh my God, it's full of stars
    • coachmcguirk, on 11/08/2007, -0/+0It's...x3
    • condormcs, on 11/08/2007, -0/+1they should have sent a poet...
  • CrossfireCurt, on 11/12/2007, -9/+177This is the first time I've never gotten mad after looking at someone else's HTML.
    • AngelaQ, on 11/09/2007, -0/+15I only get mad when they expect me to fix their messed up code for free.
    • gregdigg, on 11/09/2007, -0/+8This is the first time I've never gotten mad, too.
      • jd33, on 11/11/2007, -0/+5This is the first time I've never gotten mad so many times.
    • caddoo, on 11/09/2007, -3/+2IT's not that good :S you can easily remove some of those divs.
    • soupdawg30, on 11/09/2007, -10/+1Why would you get mad? As long as it displays properly why care?
      • JeffD, on 11/09/2007, -0/+4You get mad when you're the one who has to modify someone else's website and the code is so completely jumbled and out of spec that it takes you half an hour just to decipher it.
        • soupdawg30, on 11/09/2007, -0/+1Yea I guess that makes sense. However if it is my personal website I don't think anyone should get upset. I do see where you are coming from though.
    • theradical, on 11/09/2007, -0/+2This is the last time I've ever gotten mad before looking at some else's HTML.
  • psevium, on 11/09/2007, -28/+6Wait, what? Why do you have a div wrapper for the page when you can set the same styles for the body tag (as well as setting a style for the html tag in your stylesheet). Or having an id for the body tag when it has to be the only one of its kind on the page. If it wasn't for IE as well, then the :first-child selector (and other pseudo-classes) would've come in handy instead of classes for divs all the time.
    • purplegecko, on 11/08/2007, -0/+13Having an id on the body allows you to use one stylesheet across your site, but have different pages styled differently.

      But yeah, :first-child would be nice to be able to use consistently.
    • meat30, on 11/08/2007, -0/+12The id applied to the body makes perfect sense. Say for arguments sake you want all your h2s to be blue on every page except the home page and the about us page where you want them to be red, you can simply give an id to the body of those 2 pages and utilise it to perform a simple if statement:

      body#home h2, body#about h2 {
      }

      This method avoids having to add classes to each h2 that you want to style differently from the norm.
    • n0va, on 11/08/2007, -0/+11You have an ID on the body so you can style it specially for a certain style. Let's say you like your main page to look like a jumble of rubbish, and your content pages like organized crime. With body IDs, you can do that, and so much more.
      Please read the freaking text before you spew random nonsense.
    • kgdoom, on 11/09/2007, -8/+9You represent all that is wrong with this world.
    • Fordi, on 11/08/2007, -1/+8Besides the body id:
      With a div wrapper, you can fix-width your page, center it, etc - something you can't actually pull off just by styling the body tag.

      Seriously, man. Hand-code a few pages before you complain about what is refreshingly clean code. Or better: Maintain a few pages that were written by morons.

      I swear, if I ever meet my predecessor, I'm going to break his goddamn typing fingers. I've had to rebuild so many things from scratch because of that guy.
    • veracon, on 11/08/2007, -1/+1I completely agree with psevium. Semantic doesn't mean wrapping everything in a body div; that's what the body tag (hence the name) is for.
    • amadeusdemarzi, on 11/09/2007, -3/+2Yes, it's true, you can style a body tag as block and use it as a container with the html used as you once used the body. But guess what, IE5.5 doesn't like it :)
      • Elranzer, on 11/09/2007, -0/+4To be fair, no one likes IE5.5 either.
        • amadeusdemarzi, on 11/12/2007, -2/+1ahh the digguns are after me! (reffering to me being dugg down, even though I do speak the truth)

          IE5.5 is crap, no doubt, but regardless, I try to make sure my sites work everywhere they can, and degrade gracefully.

          The people using IE5.5 are probably no one we will ever know, but I am sure a lot of third world countries where computers were donated, still use those browsers and theres no reason to shut them out if you can help it. So yes, one little div to improve backwards compatibility? Might as well.
          • rationalist, on 11/08/2007, -0/+2Any computer that can run IE 5.5 can run more recent browsers, all of which are free. Anyone using IE 5.5 to browse the Web has Internet access of at least standard dial-up speed, which means they can download a more recent browser. In fact, only one person has to download it, they can then share it on a disk with everyone else locally. There is no reason for someone to run IE 5.5 just because they live in a third-world country. Your comment is not only illogical, it is condescending.
  • danoph, on 11/09/2007, -5/+44Hah. Not a lot of people would appreciate this!
    • Asianwaste, on 11/09/2007, -3/+17I know my web-dev professor would. She's all about the w3 verifications and forms.
      • zwaldowski, on 11/09/2007, -1/+23Good. At least you're not taught to use MS FrontPage.
        • Asianwaste, on 11/09/2007, -2/+3No, pretty close though. Dreamweaver. Dreamweaver is ideal compared to the ***** I had to deal with working with Front Page.
          • wpjmurray, on 11/09/2007, -1/+6C'mon, Dreamweaver is nothing like FrontPage. Just the ability to keep your sites organized in one place and set up staging and live environments for each site is worth the price of admission. You can also build a page very quickly and create styles quickly. Then you can edit as much as you want in the Code editor. I'll admit that the Display rendering is not that great (it won't render some CSS), but I tend to use F12 to test it in the browser anyway.
        • drakenlot, on 11/09/2007, -0/+8FrontPage is the devil of web developing. Dreamweaver's not bad, but I use Nvu cause I'm too poor to afford Dreamweaver.
      • MeatBiProduct, on 11/08/2007, -5/+1To bad w3 standards aren't supported by the browsers. Makes the ***** pointless. Semantic yes - W3C no.

        The great thing about teachers is that they generally have no real world experience.
      • DoctorX, on 11/08/2007, -0/+5I'm a web-dev professor. I'm going to show this chart to my students.
    • arjie, on 11/09/2007, -3/+3Thing is I learnt how to code in PHP the other way: looking at other people's stuff and then imitating the coding style. That pretty much means that the only things where I differ from this picture is where I write the stuff in order of the way it appears on screen (not in order of importance as this picture says). I'm no web designer, so that's just the way it comes out. So I'd do the banner first, then the top menu, and if there was no top, then the sidebar, then the content. I'm proud of me and I appreciate it because it makes me proud of me :)
    • joebaloney, on 11/09/2007, -3/+4Yeah, people who can code HTML are really really rare. Much like rocket scientists.
      • quade, on 11/09/2007, -6/+5No they're not. They're a dime a dozen.
      • wpjmurray, on 11/09/2007, -1/+4People who can code GOOD HTML are rare. My freelance career over the past two years has been just cleaning up ***** HTML and PHP code from previous designers. It makes me sick to know that those guys are still out there selling themselves as web developers. I'd love to find out where they are now and tell their bosses that their work is crap. Unfortunately, the boss doesn't know what's good and what's not, so as long as something just barely works it's OK.
    • undy242, on 11/08/2007, -1/+2That's why it's on the Top 10!...
  • peterjmag, on 11/12/2007, -9/+228Too bad they ruined such beautiful code with crappy JPG compression.
    • reversekilled, on 11/09/2007, -18/+6i wonder if the people who dugg this up are also too dumb to understand that their browser auto-scaled the image for them and if you view it at full size there aren't any jpeg compression artifacts?
      • primal, on 11/08/2007, -4/+15No, it's a low quality JPEG, it has tons of compression artifacts. Even full size it looks bad.
    • thailand1972, on 11/09/2007, -4/+9Yeah, a .gif would have been cleaner and lighter in file size (since not much colour used)
      • eliburford, on 11/09/2007, -8/+2File size would've been about the same I imagine.
      • wpjmurray, on 11/09/2007, -0/+14Why aren't more designers using PNG? It's lossless and supports 8-bit alpha transparency (IE6 blows, but you can still make 1-bit alpha PNGs for IE6) and is ideal for GIF type graphics or tonal JPEG graphics (photos). Plus it's great to use with the Adobe CS3 suite with Dreamweaver and Fireworks. Fireworks maintains an editable, layered PNG so you can edit graphics right from Dreamweaver.
        • ricksite, on 11/08/2007, -0/+1I have found that Photoshop CS3 (and maybe CS2) will create pretty optimized PNGs. In older versions, the PNGs were bloated and had to be optimized externally (i.e. pngcrush). The only times I have found GIFs to be smaller is on very small images. I imagine this is due to PNG having larger headers.
    • justok, on 11/08/2007, -0/+3And their own page source is such a remarkable example of what they espouse.
    • h4ppydotcom, on 11/11/2007, -1/+73When, oh when, are people going to learn the difference between GIFs and JPGs?

      * JPGs are for PHOTOS
      * GIFs (and PNGs) are for images with block colour - logos, screenshots of text, anything with large areas that are one colour as opposed to photos where more or less each pixel is a different shade

      It's not difficult, people! Using a GIF in this instance would give a higher quality of image with a smaller file size.

      Rant over ;)
      • srg13, on 11/09/2007, -2/+17"* GIFs (and PNGs) are for images with block colour - logos, screenshots of text, anything with large areas that are one colour as opposed to photos where more or less each pixel is a different shade"

        PNGs (but not so much gifs) are also great for gradients.

        Anyway, I'd probably use SVG for this image - the text and lines are perfect for a vector format. Too bad IE doesn't support it though (or most other cool web technologies)...
        • drakenlot, on 11/09/2007, -1/+17Screw IE and all it's users!

          I've always wanted to say that... I hate web developing for IE whores.
        • RockinRoel, on 11/09/2007, -1/+6Firefox doesn't support SVG either. Not good enough, that is. GNOME's or Adobe SVG Viewer's SVG rendering is awesome.
  • mozfet, on 11/09/2007, -1/+10Dugg. However would have liked to see a whole functional example.
    • wibambau, on 11/08/2007, -4/+4http://www.wisc.edu/urpl/
      View Source = not nearly as pretty anymore as the 'happening' jpg would like you to believe. Theories are nice though.
      • iamaelephant, on 11/08/2007, -0/+6Of course not, because the PHP includes are handled server-side. The coding is still pretty decent in the includes regardless, it just looks messy as hell because of the weird-ass class and id names for his menu items.
      • nullchris, on 11/09/2007, -1/+2All the menus are done up in tables, it appears. Given that the menus are not tabulated data, it would be more appropriate for them to be written up as styled lists.
    • Nanobe, on 11/08/2007, -0/+2http://www.webdevout.net/
      That's my site. It's dynamically generated by PHP. Anyone who says you can't have pretty markup generated by a server-side language is lying.
    • WildTang3nt, on 11/08/2007, -0/+1http://www.justinhayesconsulting.com
  • Cannon13, on 11/12/2007, -41/+83Yeah it's beautiful until you go and make, say, a practical website. In real life.
    • ZooKoo, on 11/09/2007, -6/+59This is how real websites should be made, there is no excuse for messy unmaintainable code.
      Saying otherwise shows you up as being a very low quality developer
      • postingbh, on 11/09/2007, -6/+8Have you ever view source'd a Google search result page? Looks like absolute *****. font tags all over the place, inline css, no DOCTYPE, the list goes on. So according to your rule, they must have very low quality developers. Good point.
        • incubusnb, on 11/08/2007, -2/+8the main reason the google web page is so simple is because Larry Page and Sergey Brin didn't know much HTML and couldn't make a web page even though they could write an algorithm that would index and sort the web.

          trust me, google is nowhere near a standards compliant web page
          • laoveja, on 11/10/2007, -3/+8That's a lame excuse... I'm sure Larry and Sergey could have hired a web developer who knows HTML in the last 10+ years to clean up their messy code.
          • wpjmurray, on 11/08/2007, -2/+2Not to mention that cleaning up their code would reduce bandwidth. Google is getting millions of page views per day. Stripping out unnecessary tags would probably save thousands of MB a day in bandwidth, if not more.
          • pickypg, on 11/08/2007, -0/+4They already have stripped out unnecessary tags. Their HTML is so bad to make it as compact as possible, yet still work on most/all browsers. They stripped out everything, from unnecessary whitespace to unnecessary tags. Long story short: it's intentionally messy at this point.
        • postingbh, on 11/09/2007, -6/+9Yeah, b/c Google is still a 2 man show with Brin and Page coding HTML...

          The HTML in Google's search result page looks like ass because it's the lightest HTML you can get without sacrificing browser compatability. Point being there are absolutely good reasons to have what some people would consider "messy unmaintainable code" that standards pricks would throw a hissy fit over.
        • pickypg, on 11/08/2007, -0/+1Yeah, but very few examples are as justifiable. I would not be surprised if Google simply had a page rendering phase on their end that strips out unnecessary line breaks and spaces, to conserve bandwidth, yet still look nice and usable on their end.
        • armbar, on 11/13/2007, -0/+2There's an option to view results as XHTML if you go to preferences. They just have it at the default 1997 HTML because they're trying to support everything. Google still works in the Mosaic browser. That said, their HTML sucks balls, and yes, they ARE wrong. I know this might concern some people, but Google isn't infallible.
        • slazer, on 11/08/2007, -0/+1all this conformity is to help what? making it easy for someone to change a tag style in the second phase of a site. there are two types of developers... one of them seeks importance.
        • postingbh, on 11/08/2007, -0/+0Sure, Google is fallible. But I would chose backwards browser compatability over standards compliance and pretty code any day (assuming I was in Google's shoes).
      • MeatBiProduct, on 11/08/2007, -2/+7If you can't make your way through ***** code you're a very low quality developer. Period.
        • Thuktun, on 11/08/2007, -0/+2That said, you shouldn't *NEED* to if it can be helped. I'd rather spend 5 minutes making a simple change than an hour or two slogging through messy code. Messy code often has more chance of simple changes having unintended consequences, so testing time--or worse, time spent fixing the problem after it's already inconvenienced a user--has to be added in.
      • koko775, on 11/08/2007, -0/+1IE. that's a perfectly good excuse. Messy work arounds, etc.
        • quii, on 11/08/2007, -0/+1Except, you'd use conditional comments and put it in an external CSS. There is no excuse for bad, unsemantic markup. Its easy. Gogo www.csszengarden.com
    • aussieNickuss, on 11/09/2007, -2/+19It's not that hard. When you code a page by hand, it is very easy to keep the code neat and tidy while you are coding it. Leave it till the end to tidy your code and it is an absolute bitch of a job.
    • pezholio, on 11/09/2007, -2/+19Looks like it's your crappy coding that's at fault then. I've made plenty of 'practical websites' in 'real life' with HTML that follows these exact rules...
    • daanishrumani, on 11/08/2007, -0/+2The whole document in a production web-page may not seem beautiful, But If you are working on the file, then it makes one FEEL beautiful. One can just focus on the problem at hand and not get distracted by the lack of order in the document.
    • AbsurdParadox, on 11/08/2007, -2/+4Combine this structure with dreamweaver templates and you can easily build even a non-server-side-scripted multi-page site without a whole lot of coding.
    • sickthoughts, on 11/09/2007, -10/+11this code sucks, the business and presentation logic are clearly mixed...

      you get a bunch of idiots saying this is great code, but really they dont know *****
      • mysql101, on 11/08/2007, -5/+5+1, first comment here that's logical. The developer who made that code knows about the tab key for indentation, that's about it. In about 10 years he'll figure out how to completely separate layout, content and code.
      • wpjmurray, on 11/08/2007, -1/+0Keeping the business and presentation logic separate are really hard to do. I still am not sure what the best methodology is. Is it wrong for that page to have PHP in the HTML page? If so, how should that be done?
        • Tippis, on 11/08/2007, -1/+3HTML in a separate template, with placeholders for dynamic data.
          PHP to prepare the dynamic data and process the template.
        • clandress, on 11/08/2007, -1/+3It's not wrong. In fact, it has several advantages that php nuts will say is wrong. Guys like this are the same ones who spend time building controller classes, business classes, part classes, ORM frameworks and other nonsense that doesn't need to be there for the simplest of tasks. If it makes you feel any better, know that their apps will be the first one to crash and burn under heavy load due to an excessive amount of abstraction.
        • skidooer, on 11/08/2007, -0/+3Business logic goes in your models. Presentation logic goes in your views. Application logic goes in your controllers. If you stick to that you should never have problems with code showing up in the wrong places.
      • skidooer, on 11/08/2007, -3/+1I don't see any business logic in the image at all. Including additional HTML is most certainly presentation logic, and thus belongs in the view, as they have done.
      • drummer1189, on 11/08/2007, -0/+1oh hell yeah we are idiots,+3 votes!
        idiots
  • Richandler, on 11/08/2007, -3/+30So what does the page look like?
    • h4ppydotcom, on 11/09/2007, -0/+16Whatever you want it to look like (i.e. whatever you define in the CSS).
      HTML is the content, CSS is the style and the two should, if using best practice, be separated.
      • djAnakin, on 11/08/2007, -0/+1He wants to know what that source code goes to. I'm guessing nothing, since it's a page for "Regional Planning". I'm guessing it was just for this article.
    • M4tt3r, on 11/08/2007, -0/+1It would look like a normal front page - Logo, menu bar, search, a news box, an event box, the main content on the front page, and the footer. It's a basic template design. That's without the CSS though to finish the look.
  • Lososaurus, on 11/12/2007, -28/+9You seem to forget that HTML is not code.
    • donkeySays, on 11/08/2007, -3/+25Yea HTML is a mamal!
    • milliamp, on 11/08/2007, -1/+12He is partly right, it is a markup language, not a programming language. You /could/ still call it "code" but you can also call a janitor a sanitation "engineer".
    • Justizzle, on 11/09/2007, -2/+10I would call him Ján Ïtor... Dr. Ján Ïtor
      • alecks, on 11/08/2007, -0/+3Tee Hee...

        It's benign, nine and a half.
    • troyfoley, on 11/08/2007, -1/+0Is it hot?
    • Fordi, on 11/08/2007, -0/+1And that leaves its cleanliness and maintainability as unimportant?
    • BlackPawn, on 11/08/2007, -0/+2An irrelevant and unimportant argument over the semantics... we all know what it meant and it is commonly referred to as a code (which it pretty much is). Why do people need to point out things that don't matter?
    • MalDON, on 11/08/2007, -0/+2The important think is that people that don't know html call it code. I know it and I still call it code. Just makes things easier to my non developer friends.
  • michaelphw, on 11/12/2007, -20/+0Hope the creator of the image knows that in CSS you can do body styling anyway with body { } instead of id'ing it.
    • theright, on 11/08/2007, -0/+14Yes, but when you have a website with multiple pages, you can give each a different id and create page-specific styling from a single stylesheet (or group of stylesheets)
      • XBSHX, on 11/08/2007, -1/+4gotta love people trying to look intelligent but instead looking ignorant.
  • darnit, on 11/11/2007, -9/+48I didn't realize HTML came in a .jpg extension....
    • zeptobyte, on 11/10/2007, -0/+24Beautiful HTML does.
    • Misapoes, on 11/08/2007, -4/+2*****
    • skidooer, on 11/08/2007, -1/+1File extensions are meaningless on the web. The content type is all you should be looking at to determine the type of file.
  • meat30, on 11/11/2007, -4/+33Didn't necessarily need the div id="menu" at all. Could just attach the id to the ul and do away with the extra div.
    • Nallep, on 11/09/2007, -2/+18No, you should put div tags around the different parts of your site, so that users with screen readers can skip over those parts. It makes your site more accessible.
      • Firehed, on 11/08/2007, -0/+6Not sure why that's being buried. The div tag is designed to (and named after) dividing up your webpage. While you can get exactly the same presentation effect by IDing the list instead of the div, using it on the div increases accessibility to screen-readers and such.
      • MeatBiProduct, on 11/10/2007, -12/+4Yah but who really gives a ***** about screen readers? The last time I saw a blind person navigating the internet was never.
        • gmiley, on 11/08/2007, -0/+4Actually in the corporate world quite often. In government even more often.
          • Tippis, on 11/08/2007, -0/+3Or, put another way:
            Q: Who really gives a ***** about screen readers?
            A: Anyone who wants to land one of those immensely fat multinational/governmental contracts.
        • ghoppe, on 11/08/2007, -0/+5Don't be an ass. Do you know any blind or visually impaired people? I do. They use the internet too.
        • MalDON, on 11/09/2007, -0/+3My friend I talk to everyday just happens to be a blind web developer. So stfu.
    • HigherLogic, on 11/08/2007, -0/+2The div tag is for markup that has no semantic equivalent tag, so until HTML 5 is introduced we'll be using it for a while. This is also what beautiful HTML (and CSS) looks like:
      http://www.crucialwebhost.com/blog/master-layout-g ...
  • kalrhael, on 11/08/2007, -8/+7Look at the cans on that beauty. wooo!
  • kgdoom, on 11/11/2007, -3/+209What's up with the unclosed ul tag in the "Semantically Clean Menu" section? Oh the irony...
    • iamaelephant, on 11/08/2007, -1/+17Nicely spotted!
    • zeptobyte, on 11/10/2007, -2/+5Ehh, it's there, just typoed. Just a typo, not an actual style issue.
    • h4ppydotcom, on 11/08/2007, -0/+1Oops! Nice spot!
    • riah, on 11/09/2007, -0/+3The JavaScript should be applied using the DOM instead of being inline, also...
    • senixon, on 11/09/2007, -0/+1Er... He was just testing us! Ironic.
  • nerfnick, on 11/08/2007, -0/+17HTML Tidy isn't bad for cleaning up dirty html:
    http://tidy.sourceforge.net/
    • Fordi, on 11/08/2007, -0/+3Except tidy is insufficiently clean; it chooses bad points for indentation, and uses spaces instead of tabs (I consider this a crime against fellow coders; you can't set the width of spaces in your text editor).
      • sexybobo, on 11/08/2007, -3/+1Never understood why every one indents their code. it is easier to read but all that white space adds to the file size.
        • Tippis, on 11/08/2007, -0/+2Your template processor should be able to rip out useless whitespace in no seconds flat.
          • Fordi, on 11/08/2007, -0/+1Mine does. And it corrects character encoding errors by uniformly replacing everything outside of the x20-x7f range with entities.

            I don't know how I got along before I implemented that.
        • MalDON, on 11/08/2007, -0/+1You know you can write a php or other type of script to strip all the tabs out right? Harder to do when you indent in spaces.
    • TheFoolyCooly, on 11/12/2007, -0/+2whoever uses spaces should be slapped...
  • pehpsi, on 11/08/2007, -10/+2No, it's great until you put a dot in the wrong place and everything falls apart... .
    • Justizzle, on 11/08/2007, -0/+1It should be pretty easy to correct, if you're talking about a dot in the HTML, since Firefox's "View Source Code" highlights errors in red.
      If it's PHP you're having trouble with, it will tell you the line number at the very least, so just go in there and fix that dot...
      Or am I missing your point?
    • Fordi, on 11/08/2007, -0/+4What, you can't be bothered to debug your own code?

      return false.
  • fekimoki, on 11/12/2007, -4/+91I got lots of my website clients saying: "I don't understand / care about it. Please use NOT beautiful HTML code to cut the work fees! As long as it rotates, blinking, and got marquees on it, I'd say it's beautiful!"
    • iamaelephant, on 11/09/2007, -0/+25Yeah, it's cheaper until they need to get someone to change something and you've moved somewhere else, and some poor schmuck has to figure out your messy, rushed HTML.
      • mokkos, on 11/08/2007, -2/+16Welcome to real life.
      • tim04, on 11/09/2007, -0/+1sorry itchy but thats just not how the world works. if they could do it then whats the point of hiring you?
    • Justizzle, on 11/08/2007, -1/+3I've never had a client tell me to cut time on a project due to coding, they mostly don't even know what the hell they're doing most of the time, let alone even know what "code" is referring to, they'd prolly think you were talking about sending message in Morse or something stupid.
      And even so, how is it so hard and time-consuming to write properly lined up, validated code, that you would need to cut time off a project to get it done?
    • Fordi, on 11/08/2007, -1/+5Ironic, isn't it? Clean HTML inevitably takes me less time to build and work on; I can do it in my sleep. The same goes for well-formatted CSS and Javascript (my JS looks even cleaner now that I've gotten addicted to Prototype).
    • MeatBiProduct, on 11/08/2007, -0/+1Its cheap till blind people need to read their website.
    • RyeBrye, on 11/08/2007, -0/+1You mean you charge extra for valid HTML?

      Cool. That's like the gas station charging me extra for gas without water in it.
  • delusr, on 11/08/2007, -18/+2its PHP code using HTML markup, but it would take a Coldfusion programmer to see this :)
    • Pissoff, on 11/08/2007, -0/+4What you've just said makes absolutely no sense whatsoever.
  • wwater, on 11/10/2007, -5/+4Very agreable!
    Although, I would have used less id and replaced some of them with class.
    • MeatBiProduct, on 11/08/2007, -0/+2Then how would you control things dynamically with your AJAX framework?
      • skidooer, on 11/08/2007, -0/+2$$('.classname').each(function(element) { element.doSomething(); });
    • MalDON, on 11/10/2007, -0/+3Okay, my face just did this :O
      You need to have your web rights taken away.
  • gencha, on 11/09/2007, -5/+1Didn't know that
  • Phoenyx, on 11/09/2007, -0/+16Why not use XHTML Strict instead of Transitional? Also, I find it easier to read if I only indent my tags two spaces and easier to tell if my tags are lined up if there are less blank lines.
    • Phoenyx, on 11/08/2007, -0/+2(One more nitpick: use monospaced fonts)
    • aussieNickuss, on 11/08/2007, -0/+1You can set your text editor to display a tab as two spaces. (Not two physical spaces...but the same width)
    • thailand1972, on 11/08/2007, -1/+1re XHTML Strict, it depends what's in the header and footer includes.....may not pass such validation
    • derrikirred, on 11/08/2007, -0/+1I agree for the most part. However, it's tough to use strict when a client insists on having certain links open in a new window.
      • beernutz, on 11/08/2007, -0/+1Just use the behavior library and open the window via java-script using an {a href="http://www.blah.com" class="newWindow"} or some such class, that way it will fall back to opening in the same window at least if java-script is disabled. Nothing in XHTML says you cant do that, or that it is bad form. It is separating code from content, and makes it easier to maintain.
    • HigherLogic, on 11/08/2007, -1/+1Why bother? Nothing wrong with transitional.
    • MalDON, on 11/09/2007, -0/+2I always use Strict. Makes me feel cool when my sites are all 100% valid and 100% accessible and still look better than 99.9% of the sites on the web.
  • uziko, on 11/09/2007, -27/+2 I have no idea what that technical mumbo jumbo means but, whoever builds web pages needs to study the ***** thing, I can think of dozens of businesses that have lost my business because their website pissed me the ***** off. Especially ***** ***** websites that have ***** ***** functionality and are designed like crap.

    It's like a video game based off a ***** movie, your making a god dam video game not a ***** movie study what makes a video game good, same thing like websites like bestbuy.com it's a got dam website not a ***** walk in store act like it.

    bestbuy.com has to be the biggest piece of ***** I've ever laid eyes on and their prices are a joke, walmart.com is a piece of ***** too. How come newegg.com is the only shopping website that is better than what I wiped my ass with after taking a *****.
  • haentz, on 11/12/2007, -20/+90That's not beautiful. There's PHP code...
    • ZooKoo, on 11/09/2007, -7/+4You can polish turds...
    • aussieNickuss, on 11/09/2007, -3/+15You don't find PHP beautiful?
      • markho, on 11/08/2007, -5/+4no
      • thailand1972, on 11/08/2007, -0/+8PHP is ugly....as most developers used it "in line" and mix it right up with the HTML - let's just say the common implementation of PHP is ugly
        • HigherLogic, on 11/08/2007, -0/+1So because most developers use it "in line" it makes it ugly? Most people don't format their HTML or CSS and it looks ugly, doesn't mean it can't be pretty either. Look at a nice MVC framework and tell me PHP 5 is ugly.
        • RyeBrye, on 11/08/2007, -0/+1Ok. I've looked at Spring framework. PHP is Ugly.
      • JosephStalin, on 11/08/2007, -1/+2Nope. However, PHP has Smarty (smarty.php.net) which is just freaking sweet. Templates ftw!
        • tidrion, on 11/08/2007, -1/+1AMEN! PHP isn't ugly, just shouldn't be co-mingled with HTML like this.
        • sfrench, on 11/08/2007, -0/+1PHP *is* a templating language.
      • mysql101, on 11/08/2007, -0/+1php is fine, but he's mixing code with layout and content. a clear sign of an amature, especially when trying to convince us of an elegant solution.
        • Mageling, on 11/08/2007, -0/+2Yeah, mixing code with html isn't what html was made for.. Honestly, I don't think you can call an include statement very much code.
        • skidooer, on 11/08/2007, -0/+1What? There's nothing wrong with including display logic in your HTML. It's only when you try to include application and business logic that you have a problem.
        • MalDON, on 11/08/2007, -0/+1He was showing an example of breaking the content into separate files.
      • sjmorton, on 11/08/2007, -0/+1Never mind beautiful, it's not HTML. Sort of defeats the purpose of the whole article, doesn't it?
    • MagicBobert, on 11/09/2007, -5/+15Warning! I'm sensing a stuck-up Mac-touting Ruby programmer!
      • Firehed, on 11/08/2007, -2/+2Just FYI, not all stuck-up Mac-touting types (such as myself) prefer Ruby to PHP.
      • Fordi, on 11/10/2007, -0/+9Hey, don't associate Macs and Ruby like that; they're completely different sets of zealots.
    • MalDON, on 11/09/2007, -1/+3I just happen to love PHP, no matter what her looks are. She has a great personality and very easy to get into.
  • cr1t, on 11/09/2007, -5/+11A good Html editor will format your HTML anyway you like. Point out the non closed tags and basically wipe you ass.
    So really writing HTML does not make you a Developer just makes you 1 up to a monkey.
    • kgdoom, on 11/08/2007, -2/+3Monkeys have moved on to javascript and AJAX.
    • TheFoolyCooly, on 11/08/2007, -0/+1AJAX is a method, one I've heard is the "next best thing", but I beg to differ
    • irriadin, on 11/09/2007, -0/+1Yea, except a good html editor can't automate proper indentation and won't know when to use a or how to establish your layout. And countless other things, really.
  • Dylson, on 11/12/2007, -12/+2Well ***** my ass and call me sally.
    • darnit, on 11/08/2007, -1/+10sally
      • thailand1972, on 11/08/2007, -2/+1so darnit......are you now smoking your post-coital cigarette?
  • TeeDeeNL, on 11/09/2007, -0/+33Ah, what if you want to place the 'right-sidebar' on the left? Are you gonna rename it? Or are you putting the right-sidebar on the left-side thus creating a naming scheme that doesn't make any sense?
    Think of it this way, I have a [h1 id=title24px]. Now in your next design, you don't want the title to be 24px but 34px. Brilliant.
    • magic6435, on 11/08/2007, -0/+8i spotted that in a split second, guy can't even properly name divs. Fail!
    • Fordi, on 11/12/2007, -4/+1'what if you want to place the 'right-sidebar' on the left?'

      There's already a left sidebar. Sure, they *should* be named by content (#navigation, #added_value, etc), but your argument is academic; maintainers don't care what ***** is named if WebKit or Firebug are available.
    • Houdini91, on 11/08/2007, -3/+0And what if you want the option of having the right sidebar to have a different look than the left (ie, the outside edge is close off with rounded corners, but the inside edge is open)? Naming the div's this way then makes perfect sense, even if you're just keeping that option open for the future. If you want to move content from the right side to the left simply cut/paste the "news box" and "events box" from the right sidbar div into the left sidebar div. No need to "rename divs".
  • DestroyFascism, on 11/09/2007, -3/+7OMG!!111 where do I put the java DOM and Widgets and more importantly the IE substitutes? (Because IE can't count!)
    • Fordi, on 11/08/2007, -1/+2(channeling my manager)
      "where do I put the java DOM"
      No where, unless you're writing an application that requires it.

      "and Widgets"
      Did you write them yourself? We'd appreciate it if you didn't expose our server to cross-site scripting attacks, thanks.

      "and more importantly the IE substitutes"
      Don't those usually go in the stylesheet rather than the HTML? Seriously. If you can't get these basic precepts, you're fired.
      • drakenlot, on 11/08/2007, -0/+1Your manger is actually intelligent if he really knows that.

        Mine comes and bothers me with retarded comments like 'Can you look at why my printer isn't turning on?'. I hate how I'm the only tech-savvy person in the IT dept, not to mention the company.

        FYI, my IT manager is actually an accountant.
        • Fordi, on 11/08/2007, -0/+1I work at two small companies. My manager(s) are CEOs of their respective companies. One of them is the sole employee as well. Basically, they're both designers with more than enough knowledge to be potentially dangerous, and little enough free time to be actually dangerous. Each can write a web page using a text editor and have it validate, though.

          Seriously, man. Putting up with a bean-counter for your direct boss is bad mojo; you should look into going freelance; you can make your own hours, and if you're talented, name your rate. Managing the feast or famine problem is just a question of buffering, so after the first few months, you'll be sitting pretty.

          Hell, even if you end up working for completely non-technical persons, they'll usually trust you and your opinion implicitly. When I started, it was a kind of disorienting freedom.
          • drakenlot, on 11/08/2007, -0/+1Agreed. But due to the fact I'm still in college, I don't exactly have the ability to freelance, since my needing a bucket-load of tuition money.

            So I'm working part-time with my summer co-op job, until I finish my final year and go full-time if I want.
            I'd love to freelance in the future, and I think I can build a respectable portfolio at my current job.
  • wibambau, on 11/09/2007, -2/+18Here's the site if you want to see this in context:
    http://www.wisc.edu/urpl/
    • darnit, on 11/08/2007, -0/+3Footer nav is all fubar in FF/Mac - yea, CSS is awesome.
    • primal, on 11/10/2007, -0/+14That site does not match the markup, which makes this even more entertaining.
      • Fordi, on 11/10/2007, -1/+3Mmmmm... tables for site layout. makes me want to slit my wrists.
    • Jist, on 11/08/2007, -0/+3I guess beauty really is on the inside.
    • kweeky, on 11/08/2007, -0/+9Just goes to show that good developers are not always good designers.
    • ultrafez, on 11/10/2007, -0/+4Please view the source for that page, it is quite disgusting...
    • MalDON, on 11/12/2007, -3/+1http://ojaisoft.com/
      That's what the code should kinda look like. Full xhtml strict valid too.
  • TheADOGuy, on 11/08/2007, -15/+4HTML isn't code, its data. Until you get that, your just a web hack...
    • sickthoughts, on 11/08/2007, -0/+16and until you understand the difference between your and you're, you're just a jackass.
    • Fordi, on 11/08/2007, -0/+6HTML tags are encoded structure for data, not the data itself.

      Oh, and get the ***** over yourself. The act of insulting other developers fails to make you competent.
  • DanAtkinson, on 11/08/2007, -0/+9I'd rather have the script tags at the bottom, just above the closing body tag so that the page is able to render quickly for the user.
    • Fordi, on 11/08/2007, -0/+2Hear hear!

      A good example of this is if a page uses the Google API; waiting for that thing to load leaves you with a stuck browser for nigh five seconds. It's nice, during that time to have a 'please wait' div that you can later add a 'hidden' className to, once everything is loaded.
  • reversekilled, on 11/08/2007, -1/+3His search input tag also lacks a name. And why is there a clearing div after it?
    • DanAtkinson, on 11/08/2007, -0/+4In XHTML, the name attribute is deprecated in favour of an ID: http://www.w3.org/TR/xhtml1/#h-4.10

      "Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML."

      Since the document actually uses XHTML 1.0, the name attribute is allowed, but should not be used.
    • Grimdotdotdot, on 11/08/2007, -0/+2Also, it contains:
      onfocus="this.value='';"
      That's possibly *the* most annoying bit of javascript on the web.
      What if I type something, click out to copy something else, then click back in ready to paste it? Oh no! Where's my stuff gone?
      It's not hard to use
      onfocus="if(this.value==this.defaultValue)this.value='';
  • Sputs, on 11/11/2007, -5/+5I came.
  • saynotocensors, on 11/12/2007, -0/+23Not really a good example at all... as mentioned before using 'right-content' and 'right-sidebar' is hardcoding style into your structure.
    Secondly inline styles and finally inline javascript.... not being a standards fascist but if you're going to submit what is supposed to be beautiful code then those are very basic mistakes.
    • Fordi, on 11/08/2007, -0/+1"as mentioned before using 'right-content' and 'right-sidebar' is hardcoding style into your structure."

      Not true. It's hardcoding semantics into your structure. Still a bad thing, but not as bad as inline styling.
  • wibambau, on 11/08/2007, -0/+1Awww, beautiful code and sub-standard callouts, all in the same breath. Sigh.

    Also, the source on the actual site is not nearly as pretty.
  • nlogax, on 11/08/2007, -5/+48Misleading headline, this is what mediocre HTML looks like.
    • me0wzilla, on 11/09/2007, -3/+4then show us what beautiful code looks like to compare?
  • TLAKABM, on 11/09/2007, -11/+25HTML isn't code, it's a mark up language.
    • darnit, on 11/08/2007, -2/+4Hence the "ML"
      • TLAKABM, on 11/08/2007, -2/+3Yes, it is a mark-up language by name and definition. What's your point?
      • darnit, on 11/08/2007, -3/+3Just clarifying my mastery of the obvious.
    • yonas, on 11/09/2007, -3/+4Do your homework before you type anything again, dude. *Any* type of markup (HTML, XML, etc) is still considered code. Just because it's super-easy to learn and not as challenging as Java or Ruby doesn't mean it's not code.
      • hughesj919, on 11/09/2007, -2/+2Yes, agreed. Do your homework. HTML and XML isn't considered code. Code is compiled. Hence, Hyper Text Markup Language as opposed to Hyper Text Programming Language. It has nothing do with the simplicity of it. I've written a lot of Java thats a heck of a lot simpler than some XML out there.
        • jp007, on 11/08/2007, -0/+3What if it is an interpreted language. Is it not code then?
      • Fanon, on 11/09/2007, -1/+8Uh... whether or not a language is compiled doesn't constitute if said language is considered code; it determines if the language is compiled or interpreted. I would've thought someone that writes alot of Java to know that. With your definition, the following languages cannot be considered code: ECMAScript (that's JavaScript and a few other dialects like ActionScript in case you did not know), PHP, PERL, Python, VBScript, LISP, LUA.

        Code is anything that instructs a computer to do something. HTML is a list of commands that instruct the browser, and thus the computer, on how to display the content it contains. Therefore, it is code. Programming 101, dude.
        • yonas, on 11/08/2007, -1/+1@Fanon - I totally agree, dude. Well put.
      • Pissoff, on 11/08/2007, -2/+1Ruby is infantile.
    • Fordi, on 11/09/2007, -1/+1Hey, I'm sorry. Did 'code' at some point get redefined to apply only to programming languages?

      JSON, for example, is nigh-pure data, but since it's syntactically correct Javascript, it's technically code - while HTML is not?

      Code is any encoded sequence of information - be that information instructions, serialized data, cross-bitwidth character data (base64), etc. HTML is code. Hell, MIME is code. Tab-separated text spreadsheets are, technically, code. SQL is code. It's all code: a simple term to refer to anything that is not prose.
    • hughesj919, on 11/09/2007, -1/+2That definition makes anything code, which completely strips the word of any meaning. That makes any representation a code. That makes the Shooting Stars in my Lucky Charms code for real stars. That makes anything that provokes an idea or thought some kind of "code."

      Dictionary.com: 7. Computers. the symbolic arrangement of statements or instructions in a computer program in which letters, digits, etc. are represented as binary numbers; the set of instructions in such a program: That program took 3000 lines of code. Compare ASCII, object code, source code.

      Emphasis on the "program" part. Seriously though, they call it a markup language for a reason. Because its not a programming language.
    • badlogik, on 11/09/2007, -0/+1I'm pretty sure most actual coders consider markup a non-code jargon-wise, regardless of whether it fits the dictionary definition.
  • Totov, on 11/08/2007, -1/+1I've seen better :P
  • gnatinator, on 11/11/2007, -4/+19*fap* *fap* *fap*
  • benguild, on 11/08/2007, -1/+5Beautiful HTML code looks like open < ul > tags? (Couldn't put it without spaces, Digg is ***** with them)
    • Tippis, on 11/08/2007, -1/+3<snobbery>Ye olde &gt; and &lt; entities will take care of that</snobbery>
      • muniak, on 11/08/2007, -1/+3It's not being snobby, this picture is touting good HTML and closing tags are good HTML.
  • nonokiaboy, on 11/09/2007, -9/+1saw this earlier on reddit today.. still nice though.
  • moortux, on 11/08/2007, -8/+0If he can use php, he can as well use a content management system and doesn't have to think about the beauty of his code at all, or if, then only once.
  • radjrown, on 11/08/2007, -5/+0Write beautiful code like this will end up saving you quite some time in the future. Great example of how to code HTML!
  • d7415, on 11/09/2007, -0/+4Did anyone else notice that it includes the menu and the left sidebar before the main content, and then explains that you should include them afterwards?
    • zdislaw, on 11/08/2007, -0/+1True, but the menu should probably be at the top so that screen readers don't have to go through all the content before the use can navigate to a new page. Same if there is any navigation in the left sidebar. Not really enough information in the code to determine that for sure, but you make a good point.
      • zdislaw, on 11/08/2007, -0/+1Of course, though, adding an accessible "skipnav" link at the top of the page would alleviate the need for having the menu at the top, but that's still an ongoing debate.
  • tybris, on 11/08/2007, -0/+1Looks sort of like mine. I still find it nonsense to use for style. Use .
    • gann, on 11/08/2007, -0/+3I believe part of your comment has been eaten by digg...
      Now, fill in the blanks!
      > Looks sort of like mine. I still find it nonsense to use _________ for style. Use ___________.
      • tybris, on 11/08/2007, -0/+1Correct. It was the link tag and the style tag respectively.
      • Fordi, on 11/08/2007, -0/+1link; style.

        And if that's the case, GPP is a moron; link is a nicely generic tag for invisibly connecting your document to other resources, and is easily overloaded by javascript to do things like JSON Object inclusion, designing a framework for simplified hand-coded widgetry, etc.
  • jamble, on 11/08/2007, -0/+6if this is what people are wetting their pants about then what the hell is everyone else doing with their code if it doesn't look like this?!

    As for the site linked above, come off it, that surely is nothing to do with it. It's nasty visually and the code doesn't come close to the jpg. I assume I'm missing something here?
    • MegaSmack, on 11/08/2007, -0/+1Well, it SHOULDN'T be exciting. People SHOULD be coding like this. But there is a lot of crap out there. I guess I'd get excited if everyone was already coding this way. This is a decent starting point. I'd like to see how clean his CSS files are now. ;)
    • cruppel, on 11/08/2007, -0/+1Yeah, I expected to see some amazing feat when I clicked the link but instead I saw marginally semantic HTML. This would have been impressive in 2002.
  • philsherry, on 11/09/2007, -1/+22*yawn* This is what happens when people who know what they're doing write their markup first, before styling it. It's nothing sensational - it's average, but as a few people have already mentioned, it's far from perfect (left-, right-, unclosed ul, etc). It's funny to see how the markup shown in the jpg gets raped by some asshat with a Dreamweaver license by the time the finished version hit the server.
    • quade, on 11/08/2007, -0/+1Amen to that. Because you know it'll happen...

      Plus, whatever "code" gets put into those PHP variables could look like crap, and blow any chances of validating the page.
    • UnkelJethro, on 11/08/2007, -1/+0This.
    • Snackmaster, on 11/08/2007, -0/+1Yawn is right. Very bland normal code for me a Dreamweaver user, except I would never have an unclosed tag issue < UL > as DW highlights invalid code as I type or if I choose auto completes any tag pair correctly with two key strokes ' < / ' Just saying since I don't like to blame tools for poor craftsmanship, especially tools I clearly don't know how to use. Any asshat can do that...
    • MalDON, on 11/08/2007, -0/+2I use Dreamwevaer, and I create very clean code. It's just how you use the program IE: not using the wysiwytywg editor.
      • Morky, on 11/08/2007, -0/+1Whoa, you threw me off there: i.e, not IE. I of course read IE as Internet Explorer.
    • irriadin, on 11/09/2007, -0/+1I use Topstyle, personally, but Dreamweaver isn't bad. Barring those two, I use notepad! (anything is better than Frontpage or Web Expressions... talk about terrible preview rendering...)
  • iMoth, on 11/09/2007, -11/+2frontpage!
  • MaxMow, on 11/08/2007, -0/+0Wow. Great. And I learned a lot from it. From now on, Clean Code FTW!!!
  • Fetching more discussions...
    Show 51 - 100 of 169 discussions
  •  

    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.