 | |
| View this Picture |
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.
- 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.
| Posted by Azziet Singh follow me on twitter |
Subscribe me on Facebook