Writing beautiful HTML

3,662 views
3,461 views

Published on

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

Published in: Technology

Writing beautiful HTML

  1. 1. My name is @mintran I am • Web designer with 6 years of experience • Founder of Frexy Studio and IconEden.com • Beautiful HTML & CSS lover
  2. 2. Writing beautiful HTML HTML by @mintran Frexy.com
  3. 3. Beautiful HTML = Semantic <markup> <markup>
  4. 4. Web Standards are not about using DIV for everything for everything for everything
  5. 5. <div> stands for DIVision Use DIV to create the site structure
  6. 6. <div id=”header”> </div> <div id=”left”> <div id=”right”></div> </div>
  7. 7. Avoid using DIV for decoration for decoration
  8. 8. <h1>My headline </h1> <h4>Sub headline</h4> <p>A paragraph</p> rather than <div>My headline <br/></br></div> <div>Sub headline</div> <div>A paragraph</div>
  9. 9. Multiple nested-DIVs are EVIL EVIL
  10. 10. this is EVIL <div id=quot;navigationquot;> <div class=quot;activequot;> <div class=quot;buttonLeftquot;> <div class=quot;buttonRightquot;> <div class=quot;strongquot;> <a href=quot;#quot;>Home</a> </div> </div> </div> </div>
  11. 11. & hierarchic O O O O O
  12. 12. <div id=quot;navquot;> <ul> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul> </div>
  13. 13. Use best practices <div id=quot;navquot;> <ul> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul> </div>
  14. 14. Beautiful! <ul id=quot;navquot;> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul>
  15. 15. Beautiful HTML = Use proper tags every type of data
  16. 16. <p> for paragraph <p> this is a paragraph</p> <p> this is another paragraph</p>
  17. 17. <h1>, <h2>,...<h6> for headlines <h1>Site name</h1> <h2>Main Headline</h2> <h3>Normal Headline</h3> <h4>Sub headline</h4>
  18. 18. <ul> for • Unordered list • Navigation
  19. 19. <ul> for <ol> for • Unordered list • Ordered list • Navigation • Step indicators
  20. 20. <ul> <li><a href=quot;#quot;>Sign up</a></li> <li><a href=quot;#quot;>Login</a></li> <ul> <ol> <li>Step 1: Pick a username</li> <li>Step 2: Pick a password</li> <li>Step 3: Enter your email address</li> <ol>
  21. 21. <dl> for pair values <dl> <dt>Name:</dt> <dd>Min Tran</dd> <dt>Website:</dt> <dd>http://www.frexy.com</dd> <dl>
  22. 22. autiful HTML = meaningful & human-frien name convention
  23. 23. <h2 class=quot;titlequot;>Main article</h2> <p class=quot;summaryquot;>Article summary</h2> rather than <h2 class=quot;bluequot;>Main article</h2> <p class=quot;greenquot;>Article summary</h2>
  24. 24. Recommendation: naming classes and IDs for their PURPOSE rather than APPEARANCE
  25. 25. Class vs ID
  26. 26. Use a class 1. The style is used in various places throughout the document. 2. The style is very general. <span class=quot;alertquot;> <span class=quot;alert errorquot;> <h2 class=quot;headlinequot;>
  27. 27. Use an ID 1. The style is only used once ever in the document. 2. The style is specific to a certain area of the document. <div id=quot;headerquot;> <body id=quot;homequot;> <body id=quot;home pagequot;>
  28. 28. ID and class can be friends <li id=quot;homequot; class=quot;currentquot;>
  29. 29. Beautiful HTML = Separate presentation from the content the content the content
  30. 30. but HOW?
  31. 31. let’s create a photo gallery
  32. 32. turn on the X-ray machine leaves.jpg frame.gif
  33. 33. User add photos by editing html or uploading via a CMS photos gallery
  34. 34. Photos are content Drop shadows and borders are presentation
  35. 35. content is user input data HTML should hold content only HTML should hold content only
  36. 36. HTML <ul id= quot;galleryquot;> <li><img src=quot;leaves.jpgquot; /></li> <li><img src=quot;balloon.jpgquot; /></li> <li><img src=quot;sea.jpgquot; /></li> <li><img src=quot;trees.jpgquot; /></li> <ul>
  37. 37. CSS #gallery {list-style:none;} #gallery li { float:left; margin-right:20px; background:url(frame.gif) no-repeat; padding: 5px 5px 10px 5px; } #gallery img { display:block; width:150px; height:150px; }
  38. 38. readable & organized O O O O
  39. 39. Use <!--comment --> to create separated code blocks to create separated code blocks
  40. 40. <!-- header --> <div id=quot;headerquot;> ... <div> <!-- end of header --> <!-- main --> <div id=quot;mainquot;> ... <div> <!-- end of main -->
  41. 41. <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
  42. 42. rather than <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
  43. 43. Conclusion • There’s no rule, just recommendations • Always use the best methods and best practices • Say goodbye to bad coding habits • Build more websites • Code validator is your best friend
  44. 44. HTML thật là điệp! Đú dzồi! ng Đú dzồi! ng

×