12 Steps for Creating Beautiful HTML Code


12 Steps for Creating Beautiful HTML Code

There’s been a movement in the past several years to cleanup HTML code. Messy markup has contributed to rendering bugs, difficult maintenance and also poor search engine performance. For example, using HTML that doesn’t display the data (content) semantically can have a severe impact on a website’s SERPs.

Using modern HTML is not difficult to do. Chris Coyier at CSS-Tricks has compiled an excellent list that outlines how to make your code beautiful.

Twelve Steps to Better HTML

  1. Properly Declare the DOCTYPE
  2. Keep the Head Section Tidy
  3. Use CSS IDs in the Body Element
  4. Use a Semantically Clean Menu
  5. Wrap Content Into a Main DIV
  6. Keep the Important Content First
  7. Always Include (PHP) Common Content, Like Footers and Menus
  8. Tab Your Code Sections
  9. Always End Your Elements Properly
  10. Use and Maintain Header Element Hierarchy (H1, H2, H3, etc…)
  11. Use Proper Elements for Content (<p>, <blockquote>, etc…)
  12. Keep Styling Outside of the HTML and Inside the CSS

You can read What Beautiful HTML Code Looks Like to get a more detailed description of each step and to get a PDF (or high-resolution image) of a visual representation of the steps.

Related Posts Plugin for WordPress, Blogger...

Tell us what you think