HTML Cheat Sheet for Beginners

Text Formatting

Headings

Defines an important heading in your text.

You can use <h1> to <h6>, with the highest number resulting in the smallest font size.

<h1>Your important heading</h1>

Aligned Heading

Aligns your heading using a little bit of CSS. You can use “left”, “right”, or “justify” in place of “center” below:

<h1 style="text-align:center;">Your aligned heading</h1>

Paragraphs

Inserts a paragraph break. Defines each paragraph.

<p>Your paragraph here</p>

Aligned Paragraph

Aligns your paragraph using a little bit of CSS. You can use “left”, “right”, or “justify” in place of “center” below:

<p style="text-align:center">Your paragraph text is aligned</p>

Line Breaks

Line breaks are used instead of paragraphs, when you want to create a new line without starting a new paragraph.

The end of your sentence.<br />

Bold Text

Makes the weight of your font bold

<b>Your bold text</b>

Strong Text

Same look as bold text, but is semantic. Instead of it being simply a style, strong text shows how the text should be read or understood.

<strong>Your strong text</strong>

Italic Text

Makes your text italicized

<i>Your italic text</i>

Emphasized Text

Same look as Italic text in HTML, but is semantic. Specifies that the text should be emphasized when read.

<em>Your emphasized text</em>

Underlined Text

Underlines your text

<u>Your underlined text</u>

Strike-through

Places a line through your text to strike it out.

<s>Your text here</s>

Font Family

Changes the font of the text using a little CSS. You can change the font to any web safe font or Google web font.

<span style="font-family: Arial, Helvetica, sans-serif;">Your new font</span>

Font Size

Changes the size of the font using a little CSS. You can use px, em, or a percentage. Here is an example with px:

<span style="font-size:16px;">Your font in a new size</span>

Font Color

Changes the color of your font to any hex color value of your choice:

<span style="font-color:#030303;">Your new font color</span>

Highlighted Text

Highlights the text with a background color using a little CSS:

<span style="background-color:#C2F2CA">Your highlighted text</span>

Block Quotes

Useful when quoting someone or when you need a particular part of your text to stand out.

<blockquote>Your quoted text here</blockquote>

Links

Basic Text Link

Use to add a link to specific text or a word. Replace the http://www.yourlink.com with your own link:

<a href="http://www.yourlink.com">Your linked text</a>

Open Link in New Tab

Used to open the link in a new window or tab instead of in the same web page:

<a href="http://www.yourlink.com" target="_blank">Your linked text</a>

Link To An Email Address

Opens the user’s email program to quickly send an email to the address supplied. Replace the email address with your own:

<a href="mailto:you@youremailaddress.com">Your email address or link</a>

Link To An Email Address With Subject Line

Useful if you want the email to have a specific subject when a user clicks your link. Use %20 in place of any spaces and replace the text with your own subject line:

<a href="mailto:you@youremailaddress.com?subject=Your-Email-Subject-;Your email address or link</a>

Anchored (“Jump”) Link

Anchor links, or “jump-to links“, are used for jumping to a particular part of a page with the click of a link.

This happens in two parts.

First, include the code below wherever you want the user to end up when they click the link, for example, at the top of the post.

Name it something unique:

<a name="backtotop"></a>

Then, add the anchor to your link that the user will click on to jump to that section:

<a href="#backtotop">Back to top</a>

Images

Basic Image

Include an image in your post.

Replace the image URL with your own URL.

You will need to have this image uploaded somewhere online.

Describing your image helps with SEO:

Image Link

For adding a link to a certain image.

Replace the image URL and link with your own:

<a href="http://www.yourlink.com">
<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Image Link Opens In New Window

<a href="http://www.yourlink.com" target="_blank">
<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Image Width and Height

You can change the width and height of the image if you need to, however it’s usually best to resize your image prior to adding it to your site.

You can specify the width and height below for browser compatibility.

Change the width and height values to those of your actual image:

<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" width="450" height="600"/>

Align Image to Left or Right of Paragraph

If you want to place your image to the left or right of a paragraph, use the following code, replacing “left” with “right” if you like:

<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" align="left"/>

Backgrounds

The following should be completed in your site’s main CSS file, or a dedicated CSS section of your website/blog editor.

If you don’t have a CSS section or file, you can place these codes in between <style> and </style> tags in the <head> section of your website’s HTML, although it is recommended to have an external CSS file.

Page Background Color

Change the overall background of your website or blog with this code.

Replace the color hex code with your own.

body {background-color:#c3c3c3;}

Repeating Background Image

For smaller backgrounds that you want tiled, or larger backgrounds that were made to be repeating, use this code and replace the image URL with your own.

You will need to upload the image online first:

body {background-image:url(http://www.yourwebsite.com/background-image.jpg);background-repeat:repeat;}

Change the above red “repeat” if you want the image to only repeat vertically: repeat-y‍Change the above red “repeat” if you want the image to only repeat horizontally: repeat-x

Non-Repeating Background Image

For background images that you want displayed only once (not repeated or tiled). Replace the image URL with your own.

body {background-image:url(http://www.yourwebsite.com/background-image.jpg);background-repeat:no-repeat;}

Top Centered Non-Repeating Background Image

Center your background image on the page, at the top. Replace the image URL with your own.

body {background-image:url(http://www.yourwebsite.com/background-image.jpg);
background-repeat:no-repeat;background-position: top center;}

Top Centered Vertical Repeating Background Image

Center your background image on the page, at the top.

It will repeat vertically down the page.

Replace the image URL with your own.

body {background-image:url(http://www.yourwebsite.com/background-image.jpg);
background-repeat:repeat-y;background-position: top center;}

Lists

Ordered List

This will create a numbered list.

Replace list elements with your own:

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol>

Unordered List With Bullets

This will create a list with bullets instead of numbers. Replace list elements with your own:

<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>

Unordered List With Different Bullet Types

You can change the bullet type of any unordered list to circle, square, or disc (default):

<ul><li style="list-style-type:square">List item 1</li></ul>

Unordered List with Custom Image Bullet

If you want to use your own bullet image instead of the default ones, you can do that as well with a little CSS.

Perhaps a star or a heart or check mark? You will need to create a small enough image and upload it somewhere online:

<ul style="list-style-image:url('http://yourimageurl.com/yourbullet.jpg')">
<li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>

Special HTML Characters

Copyright symbol ©

©

Less Than Symbol <

<

Greater Than Symbol >

>

Ampersand &

&

Trademark Symbol ™

™

Non-breaking Space

 

Quotation Mark “

"

Registered Trademark ®

®

Heart ♥

♥

Euro sign €

€

Left Arrow ←

←

Right Arrow →

→

Up Arrow ↑

↑

Down Arrow ↓

↓

Spade ♠

♠

Club ♣

♣

Diamond ♦

♦