Writing beautiful HTML

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

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

Avoid using DIV for decoration for decoration

<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>

Multiple nested-DIVs are EVIL EVIL

this is EVIL <div id=\"navigation\"> <div class=\"active\"> <div class=\"buttonLeft\"> <div class=\"buttonRight\"> <div class=\"strong\"> <a href=\"#\">Home</a> </div> </div> </div> </div>

& hierarchic O O O O O

<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 <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>

Beautiful! <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 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 headline</h4>

<ul> for • Unordered list • Navigation

<ul> for <ol> for • Unordered list • Ordered list • Navigation • Step indicators

<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>

<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=\"title\">Main article</h2> <p class=\"summary\">Article summary</h2> rather than <h2 class=\"blue\">Main article</h2> <p class=\"green\">Article summary</h2>

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=\"alert\"> <span class=\"alert error\"> <h2 class=\"headline\">

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\">

ID and class can be friends <li id=\"home\" class=\"current\">

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 gallery

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= \"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>

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; }

readable & organized O O O O

Use  to create separated code blocks to create separated code blocks

<div id=\"header\"> ... <div>   <div id=\"main\"> ... <div>

rather than <div id=\"left\"> <ul id=\"nav\"> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>

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

HTML thật là điệp! Đú dzồi! ng Đú dzồi! ng

Writing beautiful HTML

0 comments

Notes on slide 1

6 Favorites