Friday, April 29, 2011

From my humble experience as a web developer here are 20 tips that can help to build clean XHTML markup: 
1. Use the right doctype
Doctypes should be the very first thing you write in an XHTML Document which instructs the browser how to render the following document correctly.
2. Create your XHTML page structure first then add CSS
It's common practice to start writing both HTML & CSS at the very start. Writing only the page layout markup first then positioning, floating those blocks with CSS has considerably decreased my time markup writing time.
3. Always close your tags 
Not closing tags leaves the browser to do so, and your final page may cause strange inconsistencies across browsers. 
4. Keep tag names lowercase
HTML is cas insensitive but XHTML recommends to use lowercase for both tags and attributes and all attributes should be quoted (alt="test")
5. Use a reset to eliminate browser inconsistencies such as padding & margin
Browsers have their own default margin and padding for some tags like p, ul, body. Always reset these default margin and padding to avoid inconsistencies across browsers. 
6. Never use inline styles
XHTML markup should be kept as simple and minimal as possible and free from any CSS styles. 
7. Combine elements h1, h2, h3 {font-family: tahoma, color: #333}  
Combining elements makes your CSS rules simple and cleaner.
8. Use shorthand (font instead of font-family & font-size)
Use shorthand properties to instruct more than one rule in a single line. 
9. Don’t tag qualify unnecessarily (ul#header)
id is already unique and tag qualifying here is unnecessary.
10. Comment your CSS (/*** BEGIN HEADER ***/ & /*** END HEADER ***/
Break your CSS into logical blocks through comments.
11. Don’t overdo on descendant selectors (html body a {color#000;} is unnecessary)
Descendant selectors further helps to reduce markup, but are very expensive and should be used with care.
12. Use {margin: 0 auto;} to center your layout
13.Don’t write unnecessary markup (<div class=”header-title”><h1>Heading 1</h1></div>)
14. Use Firebug and developer tools in browsers
15. Use position absolute least possible and only where needed
Position absolute is not a solution to layout and should be used only when necessary.
16. Validate continuously your XHTML & CSS
Don't wait for the last minute to validate, validate continuously.
17. Use lists wherever they fit (for navigation, footer, breadcrumbs)
Use lists wherever it's logical to use.
18. Use h1 – h6
Use heading and descendant selectors to format with CSS rather than div with classes for titles.
19. Use fieldsets, labels for forms and give label the “for” attribute
Use appropriate tags for form building.
20. Use Google or your favorite search engine!
Always search for solutions on the Internet to save time.

0 comments:

Post a Comment