HTML Cheat Sheet

Some useful HTML code snippets to enhance your articles. Simply cut and paste the HTML examples into your page and make a few minor customisations to the text.

Accessing the HTML view

Click on the Source button in the toolbar and the view will switch to show the HTML code, you can always switch back by clicking on the Source button again.

Tip: If you find the HTML difficult to read then you can space it out by adding some line breaks (hitting return a few times). Line breaks don’t affect how the page will look.

Add a purple button

<a class=”key-btn2″ href=”URL”>Link text here</a>


Make a link blue on the home page

<a class”w3-text-blue” href=”URL”>Link text here</a>


Add a horizontal separator line

<hr>


Add a grey box to sit behind text on a page

<div class=”grey-box”>
The text content
</div>


Add a paragraph

<p>Text content here</p>


Add a heading

There are six heading types ranging from <h1> which is the largest to <h6> which is the smallest.

<h1>Text content here</h1>

<h2>Text content here</h2>

<h3>Text content here</h3>


Make text bold

<strong>Text content here</strong>

These tags can be used with paragraph and heading tags. So to make a sentence or paragraph bold the code would be:

<p><strong>Text content here</strong></p>