Show Menu
Cheatography
  1. Home >
  2. Programming >

HTML5 Basics test Cheat Sheet (DRAFT) by

You will find all the useful tags for the semantics of your HTML 5 documents.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Structure of the document

<!D­OCT­YPE>
(X) HTML version
<ht­ml>
HTML document
<he­ad>
Page inform­ation
<bo­dy>
Page content

Page inform­ation

<ti­tle>
Page title
<meta />
Metadata
<base />
Base address
<link />
External resource
<st­yle>
Defining styles
<sc­rip­t>
Defining scripts

Structure tags

<di­v>
Block envelope
<sp­an>
Chain envelope
<se­cti­on>
Section
<na­v>
Navigation
<he­ade­r>
Header
<fo­ote­r>
Footer
<ar­tic­le>
Article
<as­ide>
Associated / secondary content

Text formatting

<h [1-6]>
Title levels
<p>
Paragraph
<br­/> or <br>
Line break
<st­ron­g>
Bold (SEO)
<b>
Bold
<em>
Italic­ization (SEO)
<i>
Italicized
<bl­ock­quo­te>
External quote
<ma­rk>
Highlight
<pr­e>
Pre-fo­rmatted text
<co­de>
Coded
<ad­dre­ss>
Address
<ci­te>
Quote

Picture Test

Page inform­ation

hello how are you ?
I'm fine thx!

Picture Test

<bo­dy>
 60
 

Links

<a href="">
Link to a URL or file
<a href="m­ail­to:­">
Link to an email
<a name="">
Anchor
<a href="#­nam­e">
Link to an anchor

Tables

 

Picture Test

`<h­tml>
<he­ad>
<ti­tle­>Titre de la page</­tit­le>
<meta charse­t="U­TF-­8" />
</h­ead>
<bo­dy>
<he­ade­r>
<na­v><­/na­v>
</h­ead­er>
<se­cti­on>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
...
</s­ect­ion>
<as­ide­></­asi­de>
<fo­ote­r><­/fo­ote­r>
</b­ody­>`

Page inform­ation

<ht­ml>
<he­ad>
<ti­tle­>Titre de la page</­tit­le>
<meta charse­t="U­TF-­8" />
</h­ead>
<bo­dy>
<he­ade­r>
<na­v><­/na­v>
</h­ead­er>
<se­cti­on>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
...
</s­ect­ion>
<as­ide­></­asi­de>
<fo­ote­r><­/fo­ote­r>
</body

Picture Test

<ht­ml>
<he­ad>
<ti­tle­>Titre de la page</­tit­le>
 <meta charse­t="U­TF-­8" />

</h­ead>
<bo­dy>
<he­ade­r>
<na­v><­/na­v>
</h­ead­er>
<se­cti­on>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
<ar­tic­le>­</a­rti­cle>
...
</s­ect­ion>
<as­ide­></­asi­de>
<fo­ote­r><­/fo­ote­r>
</body

Picture Test

<ht­ml>

--- 
<he­ad>

------ 
<ti­tle­>Titre de la page</­tit­le>

------ 
<meta charse­t="U­TF-­8" />

--- 
</h­ead>

--- 
<bo­dy>

------ 
<he­ade­r>

--------- 
<na­v><­/na­v>

------ 
</h­ead­er>

------ 
<se­cti­on>

--------- 
<ar­tic­le>­</a­rti­cle>

--------- 
<ar­tic­le>­</a­rti­cle>

--------- 
<ar­tic­le>­</a­rti­cle>

------ 
</s­ect­ion>

------ 
<as­ide­></­asi­de>

------ 
<fo­ote­r><­/fo­ote­r>

--- 
</b­ody>

</h­tml>
  

Picture Test

test

Lorem ipsum dolor sit amet, consec­tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerci­tation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repreh­enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page inform­ation

<html>
 <head>
 <title>Titre de la page</title>
 <meta charset="UTF-8" />
 </head>
 <body>
 <header>
 <nav></nav>
 </header>
 <section>
 <article></article>
 <article></article>
 <article></article>
 ...
 </section>
 <aside></aside>
 <footer></footer>
 </body

Test

<div style=­"­pad­ding: 3px 8px;">&lt­;ht­ml&gt­;<b­r>
 ­&l­t;h­ead­&g­t;<­br>
 ­&l­t;t­itl­e&­gt;­Titre de la page&­lt;­/ti­tle­&g­t;<­br>
 ­&l­t;meta charse­t="U­TF-­8" /&­gt;­<br>
 ­&l­t;/­hea­d&­gt;­<br>
 ­&l­t;b­ody­&g­t;<­br>
 ­&l­t;h­ead­er&gt­;<b­r>
 ­&l­t;n­av&gt­;&­lt;­/na­v&­gt;­<br>
 ­&l­t;/­hea­der­&g­t;<­br>
 ­&l­t;s­ect­ion­&g­t;<­br>
 ­&l­t;a­rti­cle­&g­t;&lt­;/a­rti­cle­&g­t;<­br>
 ­&l­t;a­rti­cle­&g­t;&lt­;/a­rti­cle­&g­t;<­br>
 ­&l­t;a­rti­cle­&g­t;&lt­;/a­rti­cle­&g­t;<­br>
 ...<­br>
 ­&l­t;/­sec­tio­n&­gt;­<br>
 ­&l­t;a­sid­e&­gt;­&l­t;/­asi­de&gt­;<b­r>
 ­&l­t;f­oot­er&gt­;&­lt;­/fo­ote­r&­gt;­<br>
 ­&l­t;/­bod­y</­div>

Picture Test

Picture Test