Writing beautiful HTML
- 1. My name is @mintran Web designer with 6 years of experience Founder of Frexy Studio and IconEden.com Beautiful HTML & CSS lover I am
- 2. Writing beautiful HTML HTML by @mintran Frexy.com
- 3. Beautiful HTML = Semantic <markup> <markup>
- 4. Web Standards are not about using DIV for everything for everything for everything
- 5. <div> stands for DIVision Use DIV to create the site structure
- 6. <div id=”header”> </div> <div id=”left”> </div> <div id=”right”></div>
- 7. Avoid using DIV for decoration for decoration
- 8. <div>My headline <br/></br></div> <div>Sub headline</div> <div>A paragraph</div> <h1> My headline </h1> <h4> Sub headline </h4> <p> A paragraph </p> rather than
- 9. Multiple nested-DIVs are EVIL EVIL
- 10. <div id="navigation"> <div class="active"> <div class="buttonLeft"> <div class="buttonRight"> <div class="strong"> <a href="#">Home</a> </div> </div> </div> </div> this is EVIL
- 11. BE structural & hierarchic O O O O O
- 12. <div id="nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> </ul> </div>
- 13. <div id="nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> </ul> </div> Use best practices
- 14. <ul id="nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact Us</a> </li> <li> <a href="#">Services</a> </li> </ul> Beautiful!
- 15. Beautiful HTML = Use proper tags every type of data
- 16. <p> for paragraph <p> this is a paragraph</p> <p> this is another paragraph</p>
- 17. <h1>, <h2>,...<h6> for headlines <h1> Site name </h1> <h2> Main Headline </h2> <h3> Normal Headline </h3> <h4> Sub headline </h4>
- 18. <ul> for Unordered list Navigation
- 19. <ul> for Unordered list Navigation <ol> for Ordered list Step indicators
- 20. <ul> <li> <a href="#">Sign up</a> </li> <li> <a href="#">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. <dl> for pair values <dl> <dt> Name: </dt> <dd> Min Tran </dd> <dt> Website: </dt> <dd> http://www.frexy.com </dd> <dl>
- 22. Beautiful HTML = meaningful & human-friendly name convention
- 23. <h2 class= "title" >Main article</h2> <p class= "summary" >Article summary</h2> rather than <h2 class= " blue " > Main article </h2> <p class= " green " >Article summary</h2>
- 24. Recommendation: naming classes and IDs for their PURPOSE rather than APPEARANCE
- 25. Class vs ID
- 26. Use a class 1. The style is used in various places throughout the document. 2. The style is very general. <span class= " alert "> <span class= " alert error "> <h2 class= " headline ">
- 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= " header "> <body id= " home "> <body id= " home page ">
- 28. ID and class can be friends <li id= " home " class=" current ">
- 29. Beautiful HTML = Separate presentation from the content the content the content
- 30. but HOW?
- 31. let’s create a photo gallery
- 32. turn on the X-ray machine leaves.jpg frame.gif
- 33. photos User add photos by editing html or uploading via a CMS gallery
- 34. Photos are content Drop shadows and borders are presentation
- 35. content is user input data HTML should hold content only HTML should hold content only
- 36. <ul id= "gallery"> <li> <img src="leaves.jpg" /> </li> <li> <img src="balloon.jpg" /> </li> <li> <img src="sea.jpg" /> </li> <li> <img src="trees.jpg" /> </li> <ul> HTML
- 37. #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; } CSS
- 38. STAY readable & organized O O O O O
- 39. Use <!--comment --> to create separated code blocks to create separated code blocks
- 40. <!-- header --> <div id="header"> ... <div> <!-- end of header --> <!-- main --> <div id="main"> ... <div> <!-- end of main -->
- 41. use indent to improve hierarchy
- 42. <div id="left"> <ul id="nav"> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
- 43. <div id="left"> <ul id="nav"> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div> rather than
- 44. 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
- 45. HTML thật là điệp! Đúng dzồi! Đúng dzồi!