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://realityripple.com/">A link to RealityRipple</a> A link to RealityRipple
A simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="25" />
A generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p>

p its used to style and group particular elements
Another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</span> that we will work on differently </p>

span its used to differentiate a part of the content that we will work on differently
Emphasize some text <em>I'm posh</em> I'm posh
Italic textt You can mark a phrase in the text in <i>italics</i> You can mark a phrase in the text in italics
Bold some text <b>Bold a word or phrase</b>within the text Bold a word or phrase within the text
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 H2O
Small text Used to represent the <small>small print </small>of a document Used to represent the small print of a document
Used for an address <address>Main street 67</address>
Main street 67
Used for a textual cite <cite>Lorem ipsum</cite> lorem ipsum
Text displayed higher than normal text x<sup>2</sup> x2
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
Suggesting a line break It is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line It is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line
Date in readable form It is used to format the date legibly for the user, such as: <time datetime="2020-05-24" pubdate>published on 23-05-2020</time> It is used to format the date legibly for the user, such as:
Text displayed in code format

<p>This text is in normal format.</p>

<code>This text is in code format.</code>

<pre>This text is in predefined format.</pre>

This text is in normal format.

This text is in code format. 
This text is in predefined format.
Embedded Audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">Your browser does not support the HTML5 Audio element.</audio>
Embedded Audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> Your browser does not support Audio. </audio>
Embedded Video <video controls src="https://udn.realityripple.com/samples/1f/6cc66528b8.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.
Aditional information <details><summary>Html Cheatsheet</summary><p>Inline elements</p><p>Block elements</p></details>
Html Cheatsheet

Inline elements

Block elements
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>
  1. I'm the first item
  2. 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

<h1> This is Heading 1 </h1>

<h2> This is Heading 2 </h2>

<h3> This is Heading 3 </h3>

<h4> This is Heading 4 </h4>

<h5> This is Heading 5 </h5>

<h6> This is Heading 6 </h6>

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6