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:
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>
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>
Inserts a paragraph break. Defines each paragraph.
<p>Your paragraph here</p>
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 are used instead of paragraphs, when you want to create a new line without starting a new paragraph.
The end of your sentence.<br />
Makes the weight of your font bold
<b>Your bold text</b>
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>
Makes your text italicized
<i>Your italic text</i>
Same look as Italic text in HTML, but is semantic. Specifies that the text should be emphasized when read.
<em>Your emphasized text</em>
Underlines your text
<u>Your underlined text</u>
Places a line through your text to strike it out.
<s>Your text here</s>
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>
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>
Changes the color of your font to any hex color value of your choice:
<span style="font-color:#030303;">Your new font color</span>
Highlights the text with a background color using a little CSS:
<span style="background-color:#C2F2CA">Your highlighted text</span>
Useful when quoting someone or when you need a particular part of your text to stand out.
<blockquote>Your quoted text here</blockquote>
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>
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>
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>
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>
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>
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"/>
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>
<a href="http://www.yourlink.com" target="_blank"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>
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"/>
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"/>
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.
Change the overall background of your website or blog with this code.
Replace the color hex code with your own.
body {
background-color:#c3c3c3;
}
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
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;
}
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;
}
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;
}
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>
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>
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>
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>
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 ♦
♦]]>
I know that we all have to start somewhere and there are many website owners and bloggers who don’t have a clue about basic HTML codes. This post was created as a reference guide for those that are eager to learn.
Throughout the teachings on this website, I always recommend that you physically type the codes out instead of simply copying and pasting them.
Tip: if you get lost on this page, check out our HTML cheat sheet. This cheat sheet is a quick reference for the most commonly used HTML codes, which allows you to save time when learning.
To get started, let’s start with some super basic HTML codes.
To bold text is one of the easiest and most commonly used HTML codes. But did you know there are two ways to do this?
The first looks a little something like this:
<b>This is your text</b>
As always in HTML, we start the code <b> (“b” for bold), enter the text that you want displayed bold, and then close the code: </b>.
The second method is by using the <strong> code.
You’ve probably noticed that when switching from Visual mode to HTML mode in your blog editor, they use <strong> instead of <b>. <strong> gives the text “strong” importance, usually also being displayed in bold.
The difference between the two, in simple terms, is that you can further style a <strong> tag by using CSS attributes. We will get into CSS in a different post because I don’t want to start confusing you in a “basics” tutorial.
<strong>This is your text</strong>
Another reason for using <strong> instead of <b> is that even though they both produce bold text visually, web crawlers and bots see something totally different.
They see <b> as simply a stylistic feature. There is no importance to the bold text, you just wanted it to appear bold.
That’s where the <strong> code takes importance. A web crawler can see that the text is important, and we always want to make those crawlers happy, don’t we? Yes – that is a key principle of SEO.
Very similar to the above, there are also two ways to produce italicized text.
The first:
<i>This is your text</i>
“I” of course meaning “Italic”. Once again, <i> is more of a style than an actual emphasis of the text.
Both “b” and “i” are common in text editors like Microsoft Word as stylistic formatting options, but when we create websites we always need to be aware of what the bots can read behind the scenes of your web pages. The alternate method is to use:
<em>This is your text</em>
“em” means to emphasize and will also produce italicized text.
Both <strong> and <em> are logical tags. The are used purposely if you want to add physical emphasis or importance to a word or phrase.
You should use them in these cases, and use <b> and <i> when you simply want to visually bold or italicize the text without telling web crawlers that those words or phrases are of utmost importance.
Sometimes you can’t always rely on your blog editor to automatically link your text with the click of a button, so it is always good to know how to form a link using HTML code.
<a href=”http://www.yoursite.com”>This is the text that will be linked</a>
The URL you want the visitor to be directed to always appears in quotations within the <a href> code.
HTML links are always wrapped in an <a href> element. Always, whether it be a text or image link.
Make a mental note right now that <a href> means “link”. With a lot of HTML, you will have your element, followed by the action.
In this case, the element is a link (<a href>) and the action is the destination (your URL).
Links should always start with http:// as that is their true URL. If you forget this part and just start it with “www“, you’ll quickly realize that your link does not direct to your URL but rather tries to open that URL within the page you are on by adding it to the end of your current URL.
One other quick example I wanted to show was how to open your link in a new window/tab.
Sometimes you want to keep visitors on your website instead of directing them completely away from your content. Here is what that code looks like:
<a href=”http://www.yoururl.com” target=”_blank”>This is the text that will be linked</a>
All I added here was a simple link target within the same link code.
Target means just that, where you would like to target your link to. See how the quotations separate each action?
They are still contained within the image link (<a href>) but now you’re telling it to do something extra. “_blank” is standard HTML talk for opening in a blank (aka NEW) window.
Inserting an image is easy to do.
First, you’ll need to upload your image somewhere to produce a URL for that particular image.
You cannot just try to insert an image from your computer without uploading it somewhere on the web first. The image needs to be on the internet.
You can use photo hosting sites, like Photobucket, if you need to, or simply upload the image to a directory on your web server.
You can also add an image from another website (although I highly recommend saving that image to your computer and then uploading it to your own web/image server as a courtesy).
Either way, an image you upload or an image already online will have a unique URL.
Online photo hosts usually provide you with a URL after you upload. Alternatively, you can right-click on an image and choose “Copy Link Location”, which will copy the URL of the image to your clipboard.
<img src=”http://www.yoursite.com/images/yourimage.jpg” alt=”image description”>
<img src> means “image source“. In other words, the source of your image. Easy, right?
Just like the link element, your code is simply asking you where your image is located. Enter the URL of your image in between quotations as shown above.
The required “alt” attribute specifies alternate text for your image, if your image cannot be displayed. You can put whatever you like here that describes your image.
The img tag is a bit rare in that you don’t need to add a closing tag to the end like other codes.
<img src=”http://www.yoursite.com/images/yourimage.jpg” alt=”image description” width=”100″ height=”100″>
In the code above, I’ve added the width and height attributes. Specifying the exact dimensions (in pixels) that you want your image to display at allows the browser to reserve the space needed to load the images.
The <p> tag is used when you want to create a paragraph. The start of the paragraph should contain the <p> code, followed by the closing </p> tag at the end like so:
<p>This is a paragraph.</p>
<p>This is a new paragraph</p>
Adding paragraph tags will properly add that paragraph spacing for you between each paragraph.
A line break is similar to a paragraph, but instead of creating a complete paragraph, you’re just starting a new line.
Think of this like a typewriter. When you hit the end of a line on a typewriter, it creates a new line below the first. Because of this, the visual difference between a paragraph and a line break is the amount of space between each line.
The <br> tag is used to create a line break. It is an empty tag which means you don’t need to close it, much like the <img> tag above.
This is a new line<br>
See how the line spacing is different from the paragraph above?<br>
I’m simply creating a single line break!
You can combine line breaks like <br><br> to create a double line break. You should use <br> to create line breaks, not to separate paragraphs.
In the “old” days, it was common to use the <font> tag to format text with code such as <font color=”#000000″>, however this code is now obsolete so I highly recommend not using it in any form. We will cover font and text formatting through the CSS portion of these lessons.
Those are some of the common basic HTML codes that you should practice if you are eager to learn. I will cover additional codes and more advanced tutorials in separate posts!
]]>