HTML Cheat Sheet
Body Tags Formatting
Element Description Example Snippet Element Description Example Snippet
<html></html> Defines the root of an HTML document. <html> ... </html> <p></p> Paragraph <p>Welcome to our online
bookshop where you can find a
wide selection of books.</p>
<head></head> Contains meta-information about the <head> ... </head>
<br> Line break Line 1<br>Line 2
document.
<body></body> Contains the content of an HTML document. <body> ... </body> <blockquote></blockquote> Block quotation <blockquote>"Reading is to the
mind what exercise is to the
body." - Joseph
<title></title> Sets the title of the webpage, shown in the <title>Bookshop Home</title> Addison</blockquote>
browser tab. <div></div> Division or section in an HTML document <div class="bestsellers">Our
Bestsellers</div>
Links <span></span> Inline container for text <span class="highlight">Special
Offer</span>
Element Description Example Snippet
<a href="URL">clickable Hyperlink to a URL <a
Text Tags
text</a> href="[Link]
sit Our Store</a> Element Description Example Snippet
<a Email link <a
href="[Link] <pre></pre> Preformatted text <pre>New Arrivals\nSpecial
href="[Link] Offers\nBestsellers</pre>
">Contact Us</a>
">clickable text</a>
<a name="NAME"></a> Anchor in the page <a name="section1"></a> <h1></h1> Defines HTML headings (h1 to h6) <h1>Welcome to Book Haven</h1>
<a href="#NAME">clickable Link to an anchor <a href="#section1">Learn <strong>Exclusive Sale</strong>
<strong></strong> Bold text
text</a> More</a>
<em></em> Emphasized text (italic) <em>Must-read Classics</em>
Lists
Element Description Example Snippet <tt></tt> Monospaced teletype text <tt>ISBN:
978-3-16-148410-0</tt>
<a href="URL">clickable Hyperlink to a URL <a
text</a> href="[Link] <code></code> Computer code text <code>alert("Welcome to our
sit Our Store</a> bookstore!");</code>
<a Email link <a
href="[Link] <cite></cite> Cited work <cite>by Jane Austen</cite>
href="[Link]
">Contact Us</a>
">clickable text</a>
<a name="NAME"></a> Anchor in the page <a name="section1"></a> <address></address> Contact information <address>123 Book St.,
Bibliopolis, BK 12345</address>
<a href="#NAME">clickable Link to an anchor <a href="#section1">Learn
text</a> More</a>
Graphics Forms
Element Description Example Snippet Element Description Example Snippet
<hr> Horizontal rule <hr> <form></form> Form element <form
action="/submit_form">...</form
>
<hr size=?> Horizontal rule with size attribute <hr size="5">
<select multiple name=? Dropdown list with multiple <select multiple name="genres"
size=?></select> selections size="5">...</select>
<hr width=?> Horizontal rule with width attribute <hr width="50%">
<select name=?></select> Dropdown list <select
name="genre">...</select>
<hr noshade> Horizontal rule without shading <hr noshade> <option>Fiction</option>
<option> Option within a dropdown list
<img src="URL" /> Embeds an image with a source URL <img src="[Link]"> <textarea name=? cols="x" Multiline text input <textarea name="review"
rows="y"></textarea> cols="30" rows="10"></textarea>
<img src="URL" align=?> Aligns the image relatively <img src="[Link]" <input type="checkbox" name=? Checkbox input <input type="checkbox"
align="left"> name="newsletter"
value=?>
value="subscribe">
<img src="URL" border=?> Sets border width around the image <img src="[Link]"
border="1"> <input type="checkbox" name=? Pre-checked checkbox <input type="checkbox"
value=? checked> name="newsletter"
<img src="[Link]" value="subscribe" checked>
<img src="URL" height=?> Sets height of the image
height="200">
<input type="text" name=? size=?> Single-line text input <input type="text" name="name"
size="20">
<img src="URL" width=?> Sets width of the image <img src="[Link]"
width="150"> <input type="submit" value=?> Submit button <input type="submit"
value="Submit Review">
<img src="URL" alt=?> Provides alternative text for the <img src="[Link]" alt="Book
image Cover"> Colors
<input type="reset"> Reset button <input type="reset">
Tables Videos
Element Description Example Snippet Element Description Example Snippet
<table></table> Table element <table>...</table> <video></video> Video embedding <video controls> <source
src="promo.mp4"
type="video/mp4"> </video>
<tr></tr> Table row <tr>...</tr> <source> Media source <source src="promo.mp4"
type="video/mp4">
<td></td> Table data cell <td>Price</td>
<track> Text tracks for video <track kind="subtitles"
src="[Link]"
srclang="en">
<th></th> Table header cell <th>Book Title</th>