| HTML template |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your title goes here.</title>
</head>
<body>
Your content goes here.
</body>
</html>
|
|---|---|
| Text structure |
<h1>Top-level heading</h1> <h2>Sub-heading</h2> <h3>Sub-sub-heading</h3> <p>Paragraph</p> <br> (forced line break) <b>Bold text</b> <i>Italic text</i> <code>Monospaced</code> <sub>Subscript</sub> <sup>Superscript</sup> |
| Special characters |
< <
> >
& &
° °
• •
Δ Δ
π π
“ “
” ”
‘ ‘
’ ’
— —
− −
 
(More at http://www.webstandards.org/learn/reference/charts/entities/)
|
| HTML comment |
<!-- This comment won't affect the page display. --> |
| Link |
<a href="http://site.com/path/file.html">Link text goes here</a> |
| Image |
<img src="imagefile.png" width="200" height="100"> |
| Lists |
<ul> <!--bulleted list--> <li>Item</li> <li>Another item</li> <li>Yet another item</li> </ul> <ol> <!--numbered list--> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> |
| Generic elements |
<div>Generic block element</div> <span>Generic in-line element</span> |
| Fonts and colors |
<h1 style="font-size:24px; color:red;"> <body style="font-family:sans-serif; background-color:#d0d0d0;"> |
| Centered text |
<h1 style="text-align:center;">Centered Heading</h1> |
| Floating block |
<div style="width:200px; float:right; margin:0 0 10px 10px;"> Floating content (often an image) goes here. (Note the 10-pixel bottom and left margins.) </div> <p>This paragraph will wrap around the floating block.</p> |
| Centered layout |
<div style="width:600px; margin-left:auto; margin-right:auto;"> This 600-pixel-wide block will be centered in the window. </div> |
| Two-column layout |
<div style="width:610px;">
<div style="width:400px; float:left; margin-right:10px;">
Left column content
</div>
<div style="width:200px; float:left;">
Right column content
</div>
</div>
|