n

1 fast PAPER { HTML quick GUIDELINES }

Use <h1> ~ <h6> to define HTML headings. <h1> defines the
largest heading and <h6> defines the smallest heading. Use Use the id attribute to identify a specific element.
<h1> for the main headings, <h2> for subheadings and so on. Don’t use the same id for different elements.

<h1> First Paragraph Title </h1> <p id="main-paragraph" > Sed ut perspiciatis unde
omnis iste natus error sit voluptatem
Use the CSS
Use <p> to separate text-transform property <span class="uppercase"> ACCUSATION</span>
<p> Lorem ipsum dolor sit amet, consectetur
paragraphs. for uppercase text
adipisicing elit, sed do eiusmod tempor incididunt ut instead of writing all doloremque laudantium, totam rem aperiam, eaqueipsa
labore et dolore magna aliqua.</p> letters in capitals. quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
Don’t use multiple <br/> tags
to separate paragraphs. Use <br/><br/> Ut enim ad minim veniam, quis nostrud Don’t use the <font> tag
Use <em> and
<p> instead. exercitation ullamco laboris nisi ut aliquip ex ea <strong> instead of <em>Nemo</em> enim ipsam <font size="+1”> inline with the content.
<i> and <b>. Use Style Sheets instead.
Use <span> for voluptatem</font> quia voluptas sit aspernatur aut odit
<span> commodo</span> consequat.
inline content.
aut fugit, sed quia consequuntur magni dolores eos qui
Avoid CSS inline
definition lists. Use an <div style="background:#EFEFEF"> Duis aute ratione voluptatem sequi nesciunt.
external file instead.
irure dolor in reprehenderit in voluptate velit esse cillum Don’t use inline event
The <img> tag requires two declarations. Write <a href="#" onclick="alert('hello!')"> Neque
dolore eu fugiat nulla pariatur.</div>
attributes src and alt . The alt unobtrusive code.
attribute specifies an alternate porro quisquam</a> est, qui dolorem ipsum quia dolor
text for an image. Declare
<img src="mypicture.jpg" alt="My Picture"/> sit amet, consectetur, adipisci velit, sed quia non
always the width and height of
an image.
Use <div> to define a Don’t use multiple
Use the attribute class to division or a specific <div> &nbsp;&nbsp;&nbsp; numquam eius modi &nbsp to indent a text.
apply the same style to <p class="myclass"> Excepteur sint occaecat Use the CSS text-indent
section. If your section is
different elements. cupidatat non proident, sunt in culpa qui officia deserunt a paragraph use the <p> tempora incidunt ut labore et dolore magnam aliquam property instead.
tag instead. quaerat voluptatem. fugiat quo voluptas nulla pariatur?
mollit anim id est laborum.<p>
</div>
Avoid inline JavaScript definition. <script type="text/javascript">...</script> Use <blockquote> for
Use an external file instead.
long quotations and <q> <blockquote>Ut enim ad minima veniam, quis
fot short quotation. Use
the attribute cite to nostrum exercitationem ullam corporis suscipit
specify the source of a laboriosam, nisi ut aliquid ex ea commodi consequatur?
quotation.
</blockquote>

<!DOCTYPE> <style> External Style Sheets Favicon

The doctype declaration is not an HTML tag; it is an instruction to the The <style> tag is used to define style information for an HTML The <link> tag defines the relationship between a document and an The <link> tag is used to link to a custom favicon:
web browser about what version of the markup language the page is document.The style element always goes inside the head section. Use external resource and is most used to link to style sheets.
written in. The doctype declaration refers to a Document Type <link rel="shortcut icon" href="favicon.png" type="image/png" />
an external file to define the style of the page instead of using the
Definition (DTD). The DTD specifies the rules for the markup <link rel="stylesheet" type="text/css" href="stye.css"/>
<style> tag.
language, so that the browsers can render the content correctly

THE k fast PAPER / HTML quick PRACTICES

WORKING
BRAIN Design copyright © 2009 Antonio Lupetti • http://woorkup.com • http://twitter.com/woork | Source • http://www.w3schools.com