HTML Cheatsheet

Draft
This page is not complete.

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.

Remember that HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

An "element" is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are "nested" inside larger ones. By default, "inline elements" appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.All inline elements can be implemented within the <body></body> tags.

Usage	Code snippet	Result
A simple link	`<a href="https://developer.mozilla.org">A link to MDN</a>`	A link to MDN
A simple image	`<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />`
Emphasize some text	`<em>I'm posh</em>`	I'm posh
Mark text as important	`<strong>I'm important</strong>`	I'm important
Highlight some text	`<mark>Notice me</mark>`	Notice me
Draw a line through irrelevant text	`<s>I'm irrelevant</s>`	~~I'm irrelevant~~
Underline a non-textual annotation	`This is <u>mispelled</u>`	This is mispelled
Text displayed lower than normal text	`H<sub>2</sub>O`	H₂O
Text displayed higher than normal text	`x<sup>2</sup>`	x²
A short inline quotation	`<q>The q element indicates a short inline quotation.</q>`	The q element indicates a short inline quotation.
A line break	`Line 1<br>Line 2`	Line 1 Line 2
Text displayed in code format	<p>This text is in normal format.</p> <code>This text is in code format.</code>	This text is in normal format. `This text is in code format.`
Embedded Audio	<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">The <code>audio</code> element is unsupported.</audio>
Embedded Video	<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">The <code>video</code> element is unsupported.</video>

Block elements

"Block elements," on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

Usage	Code snippet	Result
A simple paragraph	`<p>I'm a paragraph</p>` `<p>I'm another paragraph</p>`	I'm a paragraph I'm another paragraph
An extended quotation	`<blockquote>The blockquote element indicates an extended quotation.</blockquote>`	The blockquote element indicates an extended quotation.
An unordered list	`<ul> <li>I'm an item</li> <li>I'm another item</li> </ul>`	I'm an item I'm another item
An ordered list	`<ol> <li>I'm the first item</li> <li>I'm the second item</li> </ol>`	I'm the first item I'm the second item
A definition list	`<dl> <dt>A Term</dt> <dd>Definition of a term</dd> <dt>Another Term</dt> <dd>Definition of another term</dd> </dl>`	A Term Definition of a term Another Term Definition of another term
A horizontal rule	`<hr>`
Text Heading	`<h2> This is Heading 2 </h2>` `<h3> This is Heading 3 </h3>` `<h4> This is Heading 4 </h4>` `<h5> This is Heading 5 </h5>`	This is Heading 2 This is Heading 3 This is Heading 4 This is Heading 5

Inline elements

Block elements

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

Document Tags and Contributors