Thanks to software like WordPress you no longer have to type HTML code to make websites. However it’s definitely beneficial to know some basic HTML because you can still use it on your WordPress website and lots of other places on the Internet like forums and comment sections.
HTML stands for HyperText Markup Language and as far as programming languages go it’s actually not too difficult to learn.
Pretty much everything with HTML is done with what are called tags which are bits of text surrounded by < and >. Tags usually come in pairs with an opening tag and a closing tag.
For example an opening HTML tag simply looks like <html> and a closing tag adds a / which in this case would look like </html>.
That’s all you really need to know about the structure of HTML now you just need to learn a few basic tags. At any time in the WordPress editor you can click the Text tab and see the code for the post you’re currently working on.
While HTML code isn’t case sensitive it’s recommended that you type all your code in lowercase letters. If you ever do XHTML which is essentially a more strict version of HTML that does require everything to be lowercase.
Site Structure
Every HTML page begins with an opening <html> and ends with a closing </html>.
Within these two tags is all the content of the web page.
A web page is further divided into two sections, a head and a body.
The head of a web page contains information that your user won’t see. This includes meta data for your site’s search engine optimization, styling information for your site’s fonts and colours and analytics tracking codes for example.
The head of a website is simply set up with an opening <head> tag and ends with a closing </head> tag.
The other section of a web page is the body. This is where all the content that a user sees will go.
The body is set up just like the head with an opening <body> tag and a closing </body> tag.
Therefore your site’s structure will look like this:
<html> <head> The code for the head stuff goes here </head> <body> All of your site's content goes here </body> </html>
Text and HTML
The most common HTML tags you’re probably going to use are the ones to format your text.
Paragraphs
The paragraph tag will divide your text into paragraphs usually with a gap between them. To make a paragraph simply add an opening <p> tag to the beginning of your paragraph and a closing</p> to the end of your paragraph.
For example:
<p>This is a paragraph.</p> <p>This is a second slightly longer paragraph.</p>
Headings
It’s a good idea to divide the content on your page up into headings and sub headings. With HTML you have 6 heading tags, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5 and Heading 6.
Headings not only make things easier for people reading your content but they help with your site’s search engine optimization by telling search engines what the different sections of the page are about and what’s important.
The title of your page usually uses Heading 1 tag. On this page the main section titles are using the Heading 2 tag and sub headings like the one above are using the Heading 3 tag.
Heading tags are simple. Heading 1 is <h1>, Heading 2 is <h2>, Heading 3 is <h3>, etc.
For example:
<h1>This is the largest heading</h1> <h2>This is the second largest heading</h2> <h3>This is the third largest heading</h3> <h4>This is the fourth largest heading</h4> <h5>This is the fifth largest heading</h5> <h6>This is the smallest heading</h6>
Which looks like:
This is the largest heading
This is the second largest heading
This is third largest heading
This is the fourth largest heading
This is the fifth largest heading
This is the smallest heading
Text Formatting
You can use HTML tags to format your text to make it bold or italic for example. These tags often work on forums and in comment sections of websites as well.
Bold
To make your text bold you simply use <b> like this:
<b>This is bold text</b>
Which looks like:
This is bold text
Alternatively you have the <strong> tag. This makes your text bold but also tells your browser that the text is slightly more important than the rest of the text. You use this in the same way like:
<strong>This text is bold and slightly more important</strong>
If you click the Bold icon in the WordPress toolbar to make your text bold it’ll use the <strong> tag.
Italics
To make your text italic it’s simply a <i> tag like this:
<i>This is italic text</i>
Which looks like:
This is italic text
There’s also a similar emphasis tag which makes your text italic and also tells the browser that it’s slightly more important, just like with the <strong> tag. The emphasis tag is simply an <em> and works like this:
<em>This is emphasized text and it's still italic</em>
If you click the Italic button on the WordPress toolbar to make your text italic it’ll use the <em> tag.
Subscript and Superscript
If you want to make your text subscript or superscript then you use the <sub> or <sup> tags like this:
This is regular text <sub>This is text in subscript</sub> <sup>and this is text in superscript</sup>
Which looks like:
This is regular text This is text in subscript and this is text in superscript
Block Quotes
You can also create block quotes which usually indent both sides of the text to make it stand out more. This uses a <blockquote> tag like this:
<blockquote>This is text in a block quote</blockquote>
Which looks like:
This is text in a block quote
The theme I’m using has some extra styling elements that add those nice quotation marks to both sides of the block quote.
Colours with HTML
There are a couple of ways to express colour using HTML code. For some very simple colours you can just type the colour name like “green” or “blue”.
For example to change the colour of some text the best way to do it is with some simple CSS code added to the paragraph tag that looks like this:
<p style="color:red">This text is a red colour</p>
Which would look like:
This text is a red colour
You can also use Red, Green, and Blue values to express colour in HTML. For example:
<p style="color:rgb(255,0,0)">This text is a red colour</p>
Or you can use the hex code for the colour which is my preferred way of doing it. For example:
<p style="color:#ff0000">This text is a colour</p>
Hex Codes for Colours: every colour on the computer has a 6 digit hex code which translates into red, green and blue values to make the colour. This is probably the best way to use colours on your website. If you’re trying to find good colours and shades I recommend the site paletton.com. It has a colour picker you can play around with and when you find a colour you like it’ll give you the hex code for it to copy and paste into your site.
A Note on the Spelling of the Word Colour: html code uses the American spelling “color” not the correct spelling of “colour”. If you’re in Canada or the UK and you’re used to spelling “colour” this won’t work if you type it into your code.
What is CSS Code?
You’ll notice in the colour example above I used something a bit more complicated than the HTML code you’ve been learning about.
CSS stands for Cascading Style Sheets and is a type of code that’s similar to HTML but used to control the styling of elements on your website. It basically makes the styling much easier.
Say for example you decide that you want your links to be a green colour not the default blue one. You can put the styling code that says to make all links green in a master style file (usually style.css). Then in the head of your web page you put a line of code that basically says to pull the styles from this .css file.
Then all the links on that page will be green. You won’t have to update each one individually and if you want to change the colour to something else you just have to make one edit to the .css file and all the links will update at once.
I’m not going to get much into CSS in this tutorial and you don’t really have to worry about it. In the example above with the colours though, using the CSS code “style=color:#ff0000” is the most correct way to change the colour of that text and I didn’t want to do it an older way like using the <font> tag which isn’t really supported any more.
Depending on what kind of element you’re changing the colour of the HTML code will be slightly different. I just want you to be aware of how colours work and whenever possible be sure to use the hex code to get exactly the colour you want.
Image Tags
To show images on your page you use the <img> tag. To just display a simple image the code would look like this:
<img src="http://yourwebsite.com/the-path-to-the-image/filename.jpg">
You don’t need to put a closing tag with images, the above code is enough. Src is the “source” of the image and is the path to the image on your server.
Remember how I changed the colour of my text before by adding extra code to the paragraph tag? You can do the same thing here and add extra code to the <img> tag.
Alt Text
This is text that you enter for the image to describe what the image is about. Because search engines can’t read images when they crawl your website you should always include alt text describing what the image is about. To do this you simply add: alt=”your alt text here” to the image tag like this:
<img src="http://yourwebsite.com/the-path-to-the-image/filename.jpg" alt="your alt text here">
Everything in-between those quotation marks will be the alt text.
Titles
Titles work exactly like the alt text does and is the text you see in a little tooltip when you mouse over the image. To add a title to your image the code looks like this:
<img src="http://yourwebsite.com/the-path-to-the-image/filename.jpg" title="your title goes here">
Height and Width
You can also specify the height and width of your image in pixels. When you insert an image with WordPress these values will be added to the code automatically.
It’s best practice to include the height and width because when the page is loading your browser will automatically reserve the space for the image. If you don’t do this your layout might be broken for a bit until everything loads.
Adding the height and width is just like adding the alt text or a title:
<img src="http://yourwebsite.com/the-path-to-the-image/filename.jpg" height="800" width="600">
The alt text, title, height, width and many other bits of code can all be added to the same image at once.
Links
You can use HTML code to make a link by sticking <a> tags around the text you want to make a link. For example:
This is text and now <a href="URL">this is a link</a> and my text continues...
Which looks like:
This is text and now this is a link and my text continues…
Don’t click that link, it’ll just take you to the top of the page.
Href stands for Hypertext Reference and the “a” stands for anchor.
Anything you put in between the opening <a> tag and the closing </a> tag can be a link. You can put text between the tags or even an image like in this example:
<a href="URL"><img src="http://yourwebsite.com/the-path-to-the-image/filename.jpg></a>
That would make the image into a clickable link.
Just like with the <img> tag there’s extra bits of code we can add to change the behaviour of the link. The only really important ones are the target and rel attributes.
Target
The target controls where the page you’re linking to opens. If you don’t put anything by default it’ll open in the same window or tab.
if you want the link to open in a new tab you have to add “_blank” as the target like this:
<a href="URL" target="_blank">This is the text of my link</a>
Rel=”nofollow”
The rel attribute has a few different options but the only one you really need to worry about is “nofollow”.
When you link to a web page you’re essentially providing a vote for the quality of that web page. Google and other search engines count the number of links to a page and use that as part of the equation to determine that page’s ranking in searches.
When you add “nofollow” to a link you’re not passing on that vote to the page you’re linking to.
In the early days of the Internet people would leave comments on websites with a link back to their website which would help their site rank better. Then “nofollow” was invented which prevented those links from helping their SEO. This was done to help combat spam.
Also, Google has gone on record saying that if you have any affiliate links on your site you should nofollow all these links otherwise it could look like spam or paid advertising.
To nofollow a like just ad rel=”nofollow” like this:
<a href="URL" rel="nofollow">This is the text of my link</a>
If you’re just linking to another site you like then don’t use this but if you have a link to a product that you’re an affiliate for hit the text tab quickly, find the code for that link and just add the rel=”nofollow” and you’re good.
There’s probably a WordPress plugin out there that can nofollow your links for you without having to go into the code of your page but I like installing as few plugins as possible.
Plus now that you know some HTML adding this to your link should be no problem. Just find the opening <a> tag and add it in right before the >.
Lists
There are two kinds of lists in HTML, ordered lists and unordered lists. An ordered list is simply a list where each item is ordered like 1. 2. 3. or A. B. C. Unordered lists are simply lists with bullet points.
Unordered Lists
To make an unordered list you need an opening <ul> tag and a closing </ul> tag at the end. Then each item in your list uses a “list item” tag, <li>. Here’s the code for a simple example list:
<ul> <li>This is the first item in my list</li> <li>This is another item in my list</li> <li>This is the third item in my list</li> </ul>
Which looks like:
- This is the first item in my list
- This is another item in my list
- This is the third item in my list
Ordered Lists
Ordered lists work in exactly the same way except you use an <ol> tag instead of a <ul> one. For example:
<ol> <li>This is the first item in my list</li> <li>This is another item in my list</li> <li>This is the third item in my list</li> </ol>
Which looks like:
- This is the first item in my list
- This is another item in my list
- This is the third item in my list
You have a couple of bonus options too with ordered lists. By adding type=”X” you can change the numbers to various other things:
type=”1″ will mark the items with numbers which is what happens by default.
type=”A” will mark the items with uppercase letters
type=”a” will mark the items with lowercase letters
type=”I” will mark the items with uppercase roman numerals
type=”i” will mark the items with lowercase roman numerals
For example:
<ol type="i"> <li>This is the first item in my list</li> <li>This is another item in my list</li> <li>This is the third item in my list</li> </ol>
Gives you:
- This is the first item in my list
- This is another item in my list
- This is the third item in my list
Nested Lists
Finally you can created lists within lists by adding another list to the <li> tags. For example:
<ul> <li>Option 1 <ul> <li>Sub Option 1</li> <li>Sub Option 2</li> <li>Sub Option 3</li> </ul> </li> <li>Option 2</li> <li>Option 3</li> </ul>
Looks like this:
- Option 1
- Sub Option 1
- Sub Option 2
- Sub Option 3
- Option 2
- Option 3
Tables
If you’re going to be making tables on your WordPress site I highly recommend a plugin called MCE Table Buttons. This plugin adds a series of buttons to the toolbar in the WordPress editor to insert and edit tables.
If you want to know what the code for HTML tables looks like or how we used to have to do it in the old days then here’s how.
Every table starts with an opening <table> tag and ends with a closing </table> tag.
Every row in the table starts with an opening table row tag <tr> and ends with a closing one </tr>.
Every cell in the table has an opening tag <td> (for “table data”) and ends with a closing </td>.
The code for a simple 3 by 3 table would look like this:
<table> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> </table>
This gives you a table that looks like this:
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
| cell 7 | cell 8 | cell 9 |
My WordPress theme has built in CSS code that is adding the formatting to change the colours of the rows in the table.
just like you could add code to the <a> and <img> tags you can also add bits of code to the <table>, <tr> and <td> tags.
For example if you want your table to be 600 pixels wide you add width=”600″ to the <table> tag like this: <table width=”600″>.
There’s a bunch of different options here but you’re probably never going to use any of them so don’t worry about making tables to fancy with HTML code. Just install the MCE Table Buttons plugin and you’ll be able to do everything you need to just from the visual editor.
A Couple Other Useful HTML Tags
If you want to insert a line through your content you can use <hr> and it’ll put a “horizontal rule” which is usually just a 1 pixel line from one edge of the screen to the other.
There’s no closing tag for this. Adding <hr> just inserts the line all the way across that line.
If you ever need to force a space between lines you can use the <br> tag which gives you a single line break. Multiple <br>s will give you multiple line breaks.
For some reason WordPress really doesn’t like the <br> tag. If you ever go to the text editor and add this in and then switch back to the visual editor WordPress will remove the tag. The only way to prevent this is to switch to the text editor, add the <br> and then hit publish or update. If you ever edit the page again in the visual editor though the <br> will be removed.
You can still usually use the <br> tag in forums and comment sections to break your text up into more readable chunks though.
Comments
When writing code most languages let you insert comments which won’t affect the final output but that you can use to describe sections of the code.
With HTML you can add comments and it won’t be shown on the webpage but if someone views the code they’ll see your comments.
To make HTML comments you open with a <!– and close with a –>. For example:
<!-- Your comments go here and won't be visible on the actual page -->
That’s It!
That’s pretty much all the HTML code you’ll ever need to know.
Even though you’ll probably never need to type HTML code if you’re using WordPress there are some situations where it might be useful.
Say for example you want to add an image to your site’s sidebar. There’s probably a plugin that you can install to create a widget for that or you could just drag a text widget there and type the HTML code for an image. The image will show up in your sidebar and you didn’t have to install any additional plugins.
And of course lots of other sites support HTML code in their comments or editors so you can stand out from everyone else with some nicely formatted text every time you use a comment.
If there’s anything you don’t fully understand or you have any questions feel free to ask in the comments.
You May Also Like...
The Importance of Mobile Friendly Web Design
Mobile friendly website design is becoming increasingly more important. Take a look at some of these stats about mobile…
A Comprehensive Guide to Using Facebook for Your Business
Facebook is definitely the largest social media site out there with over 1.65 billion users. If you’re going to choose…