Below is a complete guide of HTML codes that you can copy and paste for use on your own blog or website.
Although I like to insist on bloggers taking the time to learn how to write these codes and know what each part of them does, sometimes you need a code in a pinch!
Be sure to view the other CSS tutorials on this site for more in-depth demonstrations and explanations of coding.
Quick jump:
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:[email protected]">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:[email protected]?subject=Your%20Email%20Subject">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:
<img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/>
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 ♦
♦
