digg

Facebook Connect Join Digg About

What Beautiful HTML Code Looks Like [inforgraphic]

css-tricks.com — In HTML, it comes down to craftsmanship. Let’s take a look at some markup written they way markup should be written and see how beautiful it can be.

Who dugg this? Made popular 19 days ago

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

403 Comments

show profanity settings
expand all
  • drmangrum, on 11/09/2009, -77/+411HTML is not code, it's markup. It even says so in it's name.

    Code implies logic, HTML has no logic constructs.
  • inactive, on 11/09/2009, -6/+259I'm still waiting for my <sarcasm> tags to be included in HTML5...
  • borez, on 11/09/2009, -2/+159A tech submission... on the digg front page?
  • ayeroxor, on 11/09/2009, -1/+157They're getting right on that...

    http://img25.imageshack.us/img25/5350/w3ctwitter79 ...
  • msaleem, on 11/09/2009, -5/+145Friendly advice: You should never hotlink to images in a post. Really annoys the site owners because all the traffic is useless for them and uses resources. (And no, I'm not affiliated with this site, I've made the mistake before and gotten angry emails)
  • Iexist08, on 11/09/2009, -4/+115Original post here http://bit.ly/FblVP
  • Random314, on 11/09/2009, -25/+125"Code" is a set of rules that converts one form of communication (ie. an algorithm) to another form.
    or to quote wiki. "In communications, a code is a rule for converting a piece of information (for example, a letter, word, phrase, or gesture) into another form or representation (one sign into another sign), not necessarily of the same type"

    I think HTML fits this definition. Logic or not.
  • ZeNiTH456, on 11/09/2009, -9/+104beautiful-code.html
    <?php include("this/wont/workhere.php"); ?>

    PHP in an html file?
  • TheNik, on 11/09/2009, -6/+92Yeah, it will add up over the course of centuries. 2 or 3kb (maximum) of whitespace in a normal HTML document is hardly enough to worry about.

    Also, this infographic is illustrating certain things about HTML5, not showing you how to organize the code.
  • mrebay007, on 11/09/2009, -2/+75Oh yeah a sarcasm tag. That's REALLY useful.
  • Phatlip012, on 11/09/2009, -21/+94It IS code. What's so funny? Yes, it's not a programming language. But it's still code.
  • enoxard, on 11/09/2009, -10/+81real men generate their html dynamically.
  • MAGZine, on 11/09/2009, -7/+76New designers don't know this. Especially the ones who learn to code by example - formatting is typically not an example learnt.

    If I'm worried about bandwidth, I'll keep a condensed version of the code, and a regular version. Trying to dig through non-whitespaced/indented code is a bitch. Really, HTML should never be condensed. It's not wasting THAT much bandwidth.
  • ZebZ, on 11/09/2009, -4/+70If you are concerned about the "wasted" bandwidth of whitespace, run GZip on the server. Problem solved.
  • enoxard, on 11/10/2009, -1/+66men.
  • grnicon, on 11/09/2009, -7/+69Let's see some realistic HTML now. Who cares what beautiful HTML looks like, it's not going to be seen that way on the browser end once you insert a ton of PHP/Perl and Javascript mess that ruins the nice little line breaks and indentation.

    The irony of this article is that it's one giant PNG image. Further proof that the most beautiful HTML is the nonexistent kind.
  • fraglerock, on 11/09/2009, -15/+77For arguments sake:

    Languages, like english, are code because they contain logic constructs. HTML is language; it says so in the name. Thus, HTML is code.
  • spworm, on 11/09/2009, -20/+75I link to one stylesheet. It works on firefox, safari and ie8.

    If you can't be bothered to upgrade your browser, I can't be bothered with you.

    None of this If IE>blabla *****.

    Oh, and spare me the "but i need IE6 to use some of the software at my office". I DONT CARE! Use a more recent browser to surf the internet, and stop spreading viruses because you're too lazy.
  • somebodyscream, on 11/09/2009, -52/+107lol@ "code"
    Also, what kind of web designer doesn't already know this? It's called being organized. However, all that white-space is going to add-up and waste bandwidth, which makes this "beautiful code" (a self-serving, inaccurate, subjective description) not-so-perfect.
  • Phatlip012, on 11/10/2009, -5/+57I already said HTML isn't a programming language. What you guys are describing is a programming language. So yes, of course HTML has no logic constructs.

    HTML is a markup language. When you're looking at an HTML document you're looking at code (or markup, both are acceptable terminology to describe it.

    What do you click to see the HTML in your browser? View source code. Furthermore, here is a definition I found for computer code on Princeton website.

    computer code- ((computer science) the symbolic arrangement of data or instructions in a computer program or the set of such instructions)

    http://wordnetweb.princeton.edu/perl/webwn?o2=& ...

    HTML is a set of symbolic instructions given to the browser.

    So yes, you're absolutely correct in saying HTML isn't a programming languages. But it isn't a false statement referring to it as code.

    Trust me, I'm a nerdy computer science major.

    haha :P
  • strongsad, on 11/09/2009, -3/+49Maintainability is underrated. There are much bigger fish to fry, when in comes to bandwidth, than white space.
  • lorddazzer, on 11/09/2009, -3/+48Tell that to my boss :(
  • Iexist08, on 11/09/2009, -5/+42Thanks for the advice Saleem. Will remember it for future.
  • somebodyscream, on 11/09/2009, -10/+45I will quote a commenter below me:
    "HTML is not code, it's markup. It even says so in it's name.

    Code implies logic, HTML has no logic constructs."

    Sure, HTML may fit the technical definition for "code," but it doesn't fit the implied definition. It's just data organized for styling purposes. I'm not a stickler for the word "code," though. You can feel free to call JavaScript "code," but I disagree with saying that HTML is code.
  • samthurston, on 11/10/2009, -3/+36THEY DID INCLUDE SARCASM TAGS. YOUR BROWSER JUST RENDERS IT AS ALL CAPS.
  • tgc1, on 11/09/2009, -2/+35Unless you configure the server to parse HTML files as PHP.

    For fun I created different extensions to be parsed as php. Such as .sht and .fck .ass -- They all work great. Can also be .cockbag if you want. Any extension works. Just have to declare it. It helps if you're trying to hide what you're using on the server and keep the little bastard script kiddies from figuring out the best way to ***** over your site. Like via SQL injection. Which still is a vulnerability on an amazing number of sites.
  • Dunge, on 11/09/2009, -13/+45Why I am not surprised to see a MacOS window?
  • spect3r, on 11/09/2009, -8/+40Dugg for proper indentation. Keep your HTML tidy people!
  • Garciat, on 11/09/2009, -6/+37The other way 'round, fella.
  • PowderedToasty, on 11/09/2009, -1/+31Too bad most html I see in the real world makes my eyes bleed and my head hurt.
  • foucaultsvac, on 11/09/2009, -3/+33Hopefully that IE6 css generates just a huge background image of a finger, with everything else display: none;
  • strad2, on 11/09/2009, -2/+32You're easily impressed.
  • th3heretic, on 11/10/2009, -8/+38No, no they don't.
  • Phatlip012, on 11/10/2009, -3/+32Yes, that is correct. Not a programming language, but code. Code includes things OUTSIDE of the computer world too. :)
  • IllBeBack, on 11/10/2009, -1/+26kitchen appliances?
  • Psygnosis, on 11/09/2009, -5/+28WTF this isn't twitter, short URLs make you look like a *****, post full links!

    http://css-tricks.com/what-beautiful-html-code-loo ...
  • obrien317, on 11/09/2009, -4/+27Where's the website?

    This page has a story, a sidebar, and a footer. 'Real' websites are far more dynamic than this, and by 'real' I mean ones that people will go to. Complex websites have complex markup. You shouldn't be bragging just because you've passed your w3schools tests.
  • manicleek, on 11/09/2009, -0/+20I link to 1 stylesheet, and it works in all browsers, one day when you get better at it, you could turn this hobby into a career
  • aegis17, on 11/09/2009, -0/+20Ahh, good ol' Security Through Obscurity.
  • pjhorrex, on 11/09/2009, -3/+23Someone who writes only HTML and CSS documents is not a coder. They are a designer. Someone who writes HTML and CSS docs but also writes client and/or server side code is a designer and a coder.

    People need to stop being embarrassed of being called a "designer". Without good web designers every site would like like geocities or myspace pages and then we would be forced to put the internet out of its missery.
  • TheShad0w, on 11/09/2009, -3/+23Its not a few lines of code, more often than not its hours figuring out how to get the page to look right and making sure that we have a working environment to even run the craptacular browser. The only simple part is the style sheet inclusion everything else is a pain in the ass. This doesn't even cover making sure other things like JS work correctly.

    That being said it is because companies like yours that people like me get stuck burning those hours hacking our style sheet to make it look right in your antiquated browser and seeing as you have no plans of ever upgrading unless people force you too I will begin to gracefully fail with IE6 starting next year. You want to use our site and have it look and work correctly? Upgrade the browser or better yet, just install Firefox and stop worrying about IE and then its no longer an issue at all.

    Unless you're doing some wonky active X stuff you don't need IE and by doing a distributed install you can have the latest and greatest FF running on all your machines. Its just a couple clicks of a button isn't it? (/sarcasm)
  • driverdave, on 11/09/2009, -4/+23conditional browser check hacks? php includes? beautiful code?
  • aquapete, on 11/10/2009, -0/+19what do women use?
  • djhash, on 11/09/2009, -4/+21Tell me about it. When I heard that some people were outraged about sites removing support for IE6, so they can keep with the times and be compatible with IE8, I was "you've got to be kidding me". IE6 is so old and has so many vulnerabilities.

    Yet Microsoft decided to implement a compatibility mode in IE8 so people can view sites properly.

    If programmers can't take their time to update their sites and stay within markup specs, then I don't want to view their website.

    With every line of code I write I do a validation check, and if something is deprecated then I get rid of it. If my markup won't work without the deprecated item, then I'll re-write from scratch.
  • offrdbandit, on 11/09/2009, -2/+19You're an idiot if you think any of this trivial argument of labels is at all significant.

    It's like bashing a car designer because he/she doesn't weld.

    HTML is as much "code" as anything else. What is C? It's a syntactic abstraction of the mechanics of a general purpose processing unit. What is HTML? It's a syntactic abstraction of the mechanics of web browser.

    They are the same. Are they the same at the hardware level? No. Does it matter? Not in the least. Your definition is simplistic and your conclusion is juvenile.
  • wassamatta, on 11/09/2009, -1/+18If the server is set up to parse the html extension as php it can be done. But they screwed it up... it is not relative to docroot (see comment 2 below this one)
  • chmpdog, on 11/09/2009, -0/+17no. no it doesn't.
  • serif69, on 11/09/2009, -2/+17* html * { display: none }
    * html body { display: block; background: url(*****.jpg) repeat top left; }
    /* I prefer to repeat the middle finger as much as possible */
  • eanbowman, on 11/09/2009, -2/+17You bandwith people are crying over very little. Even large files don't have enough whitespace to even worry about.

    Run gzip on the server, don't use spaces to tab your work and you should be well under the extra bytes that fit in an ethernet frame along with your whole site. :P
  • StuartGibson, on 11/09/2009, -0/+15Man up and write your own doctype.
  • Fetching more discussions...
    Show 51 - 100 of 423 discussions

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
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.