Writing beautiful HTML

My name is @mintran

•Web designer with 6 years of experience

•Founder of Frexy Studio and IconEden.com

•Beautiful HTML & CSS lover

I am

Writing beautifulHTML

by @mintranFrexy.com

Beautiful HTML = Semantic <markup>

Web Standardsare not

about using DIV for everything

<div> stands for DIVision

Use DIV to create the site structure

<div id=”header”> </div>

<div id=”left”>

</div>

<div id=”right”></div>

Avoid using DIVfor decoration

<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

Multiple nested-DIVs

are EVIL

<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

BEstructural

& hierarchic

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>

<div id="nav">

<ul>





</ul>

</div>

Use best practices

<ul id="nav">





</ul>

Beautiful!

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

• Unordered list• Navigation

<ol> for

• Ordered list• 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>

Beautiful HTML = meaningful & human-friendly

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

but HOW?

let’s create a photo gallery

turn on the X-ray machine

leaves.jpg

frame.gif

photos

User add User add photosphotos

by editing by editing html html

or uploading or uploading via a CMSvia a CMS

gallery

Photos are content

Drop shadows and borders are presentation

content is user input data

HTML should hold content only

<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

#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

STAYreadable

& organized

O

Use  to create separated code blocks

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

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

useindent

to improve

hierarchy

<div id="left"> <ul id="nav">

<li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li></ul>

<div>

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

rather than

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!Đúng dzồi!

Technology

Writing beautiful HTML