My name is @mintran
I am
• Web designer with 6 years of experience
• Founder of Frexy Studio and IconEden.com
• Beautiful ...
Writing beautiful
    HTML
    HTML

     by @mintran
      Frexy.com
Beautiful HTML =
Semantic <markup>
   <markup>
Web Standards
       are not
about using DIV for
     everything
   for everything
   for everything
<div> stands for
      DIVision

Use DIV to create the site structure
<div id=”header”> </div>


<div id=”left”>        <div id=”right”></div>
    </div>
Avoid using DIV
 for decoration
 for decoration
<h1>My headline </h1>
         <h4>Sub headline</h4>
         <p>A paragraph</p>



               rather than
<div>My hea...
Multiple nested-DIVs
      are EVIL
       EVIL
this is EVIL
<div id=quot;navigationquot;>

  <div class=quot;activequot;>

          <div class=quot;buttonLeftquot;>

  ...
& hierarchic

     O
     O
     O
     O
     O
<div id=quot;navquot;>

  <ul>

         <li class=quot;activequot;><a href=quot;#quot;>Home</a></li>

         <li><a hre...
Use best practices

<div id=quot;navquot;>

  <ul>

         <li class=quot;activequot;><a href=quot;#quot;>Home</a></li>
...
Beautiful!
<ul id=quot;navquot;>

    <li class=quot;activequot;><a href=quot;#quot;>Home</a></li>

    <li><a href=quot;#...
Beautiful HTML =
Use proper tags every
    type of data
<p> for paragraph
<p> this is a paragraph</p>
<p> this is another paragraph</p>
<h1>, <h2>,...<h6> for
      headlines
 <h1>Site name</h1>
 <h2>Main Headline</h2>
 <h3>Normal Headline</h3>
 <h4>Sub head...
<ul> for
• Unordered list
• Navigation
<ul> for           <ol> for
• Unordered list   • Ordered list
• Navigation       • Step indicators
<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 ...
<dl> for pair values
<dl>
  <dt>Name:</dt>
  <dd>Min Tran</dd>
  <dt>Website:</dt>
  <dd>http://www.frexy.com</dd>
<dl>
autiful HTML = meaningful & human-frien
          name convention
<h2 class=quot;titlequot;>Main article</h2>
<p class=quot;summaryquot;>Article summary</h2>



              rather than
<...
Recommendation:
naming classes and IDs for their
          PURPOSE
           rather than
       APPEARANCE
Class vs ID
Use a class

1. The style is used in various places throughout the
document.

2. The style is very general.


<span class=...
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
documen...
ID and class can be friends
<li id=quot;homequot; class=quot;currentquot;>
Beautiful HTML =
          Separate
presentation from the content
        the content
        the content
but HOW?
let’s create a photo gallery
turn on the X-ray machine


         leaves.jpg




          frame.gif
User add
             photos
         by editing html
         or uploading via
             a CMS



photos              ...
Photos are content

Drop shadows and borders
    are presentation
content is user input data

HTML should hold content only

HTML should hold content only
HTML


<ul id= quot;galleryquot;>
  <li><img src=quot;leaves.jpgquot; /></li>
  <li><img src=quot;balloon.jpgquot; /></li>...
CSS

#gallery {list-style:none;}
#gallery li
{ float:left;
   margin-right:20px;
   background:url(frame.gif) no-repeat;
 ...
readable
& organized

    O
    O
    O
    O
Use <!--comment -->
 to create separated code blocks
 to create separated code blocks
<!-- header -->
<div id=quot;headerquot;>
 ...
<div>
<!-- end of header -->

<!-- main -->
<div id=quot;mainquot;>
 ...
<d...
<div id=quot;leftquot;>
   <ul id=quot;navquot;>
       <li>
         <ul>
             <li> ... </li>
             <li> ....
rather than
<div id=quot;leftquot;>
 <ul id=quot;navquot;>
 <li>
 <ul>
 <li> ... </li>
 <li> ... </li>
 </ul>
 </li>
 <li>...
Conclusion
• There’s no rule, just recommendations
• Always use the best methods and best practices
• Say goodbye to bad c...
HTML thật là điệp!
  Đú dzồi!
    ng
  Đú dzồi!
    ng
Writing beautiful HTML
Upcoming SlideShare
Loading in...5
×

Writing beautiful HTML

3,323

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×