An Ode To Beautiful HTML


Roses are red

Violets are blue

Code can be beautiful

If you know what to do

My recent assignment in my web design course was to learn more about what beautiful code means as defined in Chris Coyier’s article, “What Beautiful Code Looks Like”. In this article, Coyier makes an intriguing statement that “Code is Poetry”. I never thought of it that way, but if all spoken language can be poetic if framed just right, then why can’t a hyper-text language do the same? Poetry often follows a certain structure and so should HTML.

Upon reading the article, I learned five helpful guidelines to beautiful HTML:

  • If structured correctly, the code should be simple and easy to follow along on the live page from top to bottom
  • Complicated page titles are not necessary. Page description and site title are all that is needed
  • Descriptive blocks replace the need for div and help to better identify the content they contain
  • Styling is not necessary in HTML markup. It should only include content descriptors, actual content or site resources
  • Validating HTML is key to finalizing beautiful code

As I’m in the beginning stages of learning my own style of beautiful code, I still struggle with the vocabulary. A couple points made in the article required further research on my end. Coyier talks about File Paths and using relative paths for site resources. In my research of finding out what a relative path was, I came across an article also written by Coyier – “Quick Reminder About File Paths”. The article mentions that file paths are an important part of making images appear correctly on a live site. I actually had the same problem happen to me earlier today when trying to create my first HTML website without the use of a template. While his explanation was simple, this additional article expanded on the topic a little more – Absolute Vs. Relative Paths / Links. It’s good to know that I’m not the only web design newbie to confuse file paths.

Another new word that the article introduced me to was a definition list. provides an example of what a definition list is and how it can be used in list tags. I can already think of ways that this tag will be useful in the future.

A poem wouldn’t be as memorable, at least in a positive way, with spelling errors or an uneven flow. The same can be said about HTML code. Coyier mentions W3C validation in his article and prior to this web design course, I wasn’t even aware that there were tools available to help insure that your code is up to the W3C standards. This is something that I will be sure to do as I strive to create my own beautiful code.