I cannot help but view source code on each web site look nice I see. It is as if you have X-ray glasses that allowed you to see anyone who has been in his underwear at will. How could not you? It is so tempting to see if a beautiful website is built with beautiful code, or if its beauty if only superficial. Code? Beautiful? Clear. After all, the Code is poetry. This is just HTML, so it may not be as intricate and elegant as a dynamic language, but still bears his creative brushstrokes.
It makes me wonder, what makes beautiful code? In HTML, it comes down to the craft. Let's look at some of writings marking must be written beaten path and see how beautiful it can be.
It is large enough to print and tape on the inside of your cabinet to impress your friends. Well, it could be a bit of an awkward size. I will do the PSD available in case you want to modify.
- HTML5 - HTML5 and new elements to make the most beautiful HTML yet.
- DOC-TYPE - HTML5 DOCTYPE is the best ever
- Sangria - Code is indented to show parent / child relationships and emphasize hierarchy.
- Charset - Declared first thing in the head, before any content.
- Title - Title of the site is simple and clean. Purpose of the page is first, a separator is used, and finishes with site title.
- CSS - only one style sheet (media types declared within styles) is used, and only served to good browsers. IE 6 and below a sheet of universal style is served.
- Body - ID applied to the body to allow single-page style without any additional profit margin.
- JavaScript - jquery (the most beautiful JavaScript library) is available from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
- File paths - site resources used file paths for efficiency. Content file paths are absolute, in the course content is syndicated.
- Image Attributes - Images include alternate text, especially for applications with visual disabilities but also for validation. Height and width apply to the processing efficiency.
- Main content First - The main content of the page comes after basic identity and navigation, but before any auxiliary content like sidebar material.
- Appropriate descriptive elements Block-level - header, nav, section, article, aside ... everything adequately describe the content they contain better than the divs old.
- Hierarchy - Title tags are reserved for real content, and follow a clear hierarchy.
- Appropriate descriptive tags - Lists are marked as lists, depending on the needs of the list: unordered, ordered, and the list of definitions underutilized.
- Included Common content - Common across multiple pages things are inserted through server-side includes (through any method, tongue, or CMS that works for you)
- The semantic classes - Beyond the names of appropriate elements, classes and IDs are semantics: describe unspecified. (For example, "col" is much better than the "left")
- Classes - any time similar styling to apply to multiple elements are used.
- IDs - are used any time an item appears only once on the page and cannot reasonably be otherwise.
- Dynamic elements - things that must be dynamic, are dynamic.
- Encoded characters - If it is a special character, which is encrypted.
- Free Styling - Nothing on page apply a style or even imply it could be like that. Everything on the page is either a site resource, the required content, or content description.
- Comments - comments are included for things that may not be immediately obvious when reviewing the code.
- Valid - The code must comply with the W3C guidelines. Tags are closed necessary attributes used, nothing obsolete, etc.
