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

& hierarchic O O O O O

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

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>

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>

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

<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 <h2 class=quot;bluequot;>Main article</h2> <p class=quot;greenquot;>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=quot;alertquot;> <span class=quot;alert errorquot;> <h2 class=quot;headlinequot;>

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

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

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=quot;headerquot;> ... <div>   <div id=quot;mainquot;> ... <div>

rather than <div id=quot;leftquot;> <ul id=quot;navquot;> <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

http://www.fresco20.com	29
http://www.slideshare.net	11
http://sotayblog.com	4

Writing beautiful HTML

by mintran on May 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 44

Statistics

Writing beautiful HTML — Presentation Transcript