Writing beautiful HTML

My name is @mintran ,[object Object],[object Object],[object Object],I am

Writing beautiful HTML HTML ,[object Object],[object Object]

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

[object Object],[object Object],[object Object],<h1> My headline </h1> <h4> Sub headline </h4> <p> A paragraph </p> rather than

Multiple nested-DIVs are EVIL EVIL

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],this is EVIL

BE structural & hierarchic O O O O O

[object Object],Use best practices

[object Object],[object Object]

[object Object],<p> this is a paragraph</p> <p> this is another paragraph</p>

[object Object],<h1> Site name </h1> <h2> Main Headline </h2> <h3> Normal Headline </h3> <h4> Sub headline </h4>

<ul> for ,[object Object],[object Object]

<ul> for ,[object Object],[object Object],<ol> for ,[object Object],[object Object]

<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

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

let’s create a photo gallery

turn on the X-ray machine leaves.jpg frame.gif

photos User add photos by editing html or uploading via a CMS 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

<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

STAY readable & organized O O O O O

Use  to create separated code blocks to create separated code blocks

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

use indent to improve hierarchy

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],rather than

Conclusion ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

Writing beautiful HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Writing beautiful HTML