Skip to main content

What Beautiful HTML Code Looks Like

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it!

I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if its beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.

It gets me to thinking, what makes beautiful code? 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.



It’s big enough to print out and tape up inside your locker to impress your friends. Well, it might be a bit of an awkward size. I’ll make the PSD available in case you want to alter it.

* HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet.
* DOCTYPE – HTML5 has the best DOCTYPE ever
* Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.
* Charset – Declared as first thing in the head, before any content.
* Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
* CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
* Body – ID applied to body to allow for unique page styling without any additional markup.
* JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
* File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
* Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
* Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
* Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.
* Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
* Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
* Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
* Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)
* Classes – Are used any time similar styling needs to be applied to multiple elements.
* IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
* Dynamic Elements – Things that need to be dynamic, are dynamic.
* Characters Encoded – If it’s a special character, it’s encoded.
* Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
* Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.
* Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

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

Popular posts from this blog

Search Engine Optimization – How to Get the Best Rankings

Effective search engine optimization is absolutely crucial for any website proprietor that likes to boost their traffic. No issue how many promotion you location on other websites and in the press the best way to get a bigger number of exclusive tourists is through search engine rankings and online directories.The idea behind seo edinburgh is to make your world broad web falls as appealing as likely to the engine crawlers. You may have a attractively conceived website that comprises unbelievable images and a flawless layout for reading but this solely will not advance your search rankings, there are other components that are important.If you believe of the times when you use one of the foremost search engines you should inquire yourself how many distinct falls do you actually gaze through? It is rather uncommon for any individual to get to the fourth of fifth falls of the results. For creative search engine optimisation edinburgh your location desires to be on the very first page.There...

10 Tips on designing a fast loading web site

Seems to me like most web users (me included) are always in a hurry when browsing. Statistics show that, without a compelling reason, the average user will not wait for much more than 10 seconds for a page to load. So does that explain why your visitors seem to spend less than 5 seconds in your site? Probably your site is taking too long to load thus putting off visitors. As you design your site, loading time should always be a priority if your site is to be an effective business tool. Balancing usability and aesthetics is a delicate matter when creating a fast loading site. You can have a colourful website but takes ages to load while on the other hand you can design a simple site that loads faster than you can brink. Below are 10 tips and tricks that I have found very useful that you can use while designing your fast loading website. Read more: http://www.site-reference.com/articles/Website-Development/10-tips-to-creating-fast-loading-websites.html#ixzz0pmGVZEk6 1. Use images sparing...

VISIBONE HTML AND COLOR POPUPS

These handy popups by VisiBone will open a separate window to the left side of your screen for quick reference and will get out of your way and hide as soon as you click on another window screen, ready for when you need it next. Use these popups online, or download the Desktop Popup zip file below to use them offline. Big thanks to VisiBone for this wonderful free service mirrored here (with permission) for your convenience. We wholeheartedly recommends VisiBone's exceptional tools, well known in the design community . HTML Popup The HTML Popup by VisiBone is a tall skinny on-screen quick reference showing all HTML tags and attributes in use or universal. Included: color-coded indications of support by Netscape®, Microsoft® Internet Explorer and W3C®, style sheet alternatives, and bug and clash icons with details online. Read AT : http://websitetips.com/visibone/