When working with your own website, it can be handy to know some basic HTML skills. HTML is the code behind every website and is still being used behind the scenes if you use content management systems such as WordPress or so called WYSIWYG editors. In this basic tutorial I will show you the most essential HTML skills for your website.
What is HTML?
In short, HTML is the name of the code or coding standard behind every website on the internet. It is a definition of a language that describes the markup of how your website should look like and be displayed to your visitors. HTML stands for Hyper Text Markup Language.
Between the version that was produced back in the 80s (1980+) and the current version, a lot has changed. While it had basic functionality back then, now we can implement different types of media and even program games and applications in it.
The newer version of HTML also covers a lot of readability for both search engines and the impaired visitors.
With HTML, we can tell the browser how and where to display a title, a paragraph of text, an image or video, a table of items and so on. With HTML, we also define the font or typeface and styling to text (such as underline, bold, italic, strike through etc).
In the next part I will teach you the basics of HTML every web publisher should know.
Why Learn HTML
Before I dive right into the coding aspect, I want to explain to you why it is important to understand some basics in HTML before or while you are also just working on your website on a higher level (such as writing content through WordPress).
HTML skills can be useful for:
- Fixing content within posts
- Adding custom header and footer code (as well as widgets)
Fix Content Within A Post
While the newer CMS systems and other ways of producing website content do all the HTML coding for you, there are still occasions you want to fix some stuff yourself.
To give a few examples: sometimes you would want to add code to your blog post such as an affiliate link with banner link. This is not possible through the WYSIWYG (what you see is what you get) editor but needs to be done hard-coded in HTML.
Or an invisible hard-return is stopping you from getting content nicely under each other. You need to update an image or want to add some horizontal lines to space your content quickly. It is all possible from within the HTML view of your content.
Within WordPress there is this option to show the HTML version of the post you are writing. (IMG HERE).
Add Custom Header or Footer Code
There are some more places one could hard-code HTML code. When you want to implement an opt-in form, some form of script or you need to add meta information to confirm that you own your domain, you also need to add special HTML code to your site.
There are plugins to do so, some themes come with an option to add HTML header and footer code and there is the option to use the editor under appearance to manually change some of your theme’s files for this purpose.
What I am trying to get at here is that it really can be of use to know and understand something about HTML, even if its pure basics. The next time that you run into some HTML code, even if its an affiliate link with a banner or some verification meta tag, you will at least understand its function and where it should be placed.
Basic HTML Skills
I will not make this guide too detailed, so that it will be easy to understand. With the skills you will be able to understand what the code does and where it needs to be placed to be able to function properly.
The skeleton of any website
The skeleton of any web page or website consists of:
- HTML tag
- head tag
- meta tags
- body tag
- body content
It looks like this:
The scripts that you need to place on your site to get, for example, adsense to work is in the head section. If you use plugins in WordPress, you don’t really get to deal with the HTML code, but for example the script for Google Analytics is placed right before the /body tag.
<HTML> defines the start of any HTML page. This is followed by the head section where you define the title of the page (the name of the page in a way). Here you can also place certain scripts that make sure that functionality on your site will work. The meta tags, especially the ones for redirection and for the description are also positioned in the <head> section.
As you can see every tag needs to be closed as well. That’s why you will find a </head> after defining the header of the document and a </body> and </HTML> element on the end of the document, showing the end of the content and the end of the file has been reached.
The only exception here on the rule is the !DOCTYPE definition, which simply defines the document type before starting the first tag.
When tags are not closed by a closing tag, you can use a different technique to close a tag off. You can use a forward slash before closing the tag, like so:
the break line tag <br> was previously closed with a </br> tag but can nowadays be closed with a forward slash, <br />, meaning open break line and close tag. The same goes for image tags, which I will get to in a bit.
HTML Content Tags
When you write content within WordPress or another Content Management System, everything you write is saved between the <body> and </body> tags (there where I wrote ‘content here’ ).
The text you write has no definition and stays the same through HTML code, but having text between two defining tags, will change its properties. As such you can define a text to be a paragraph using <p> tags, or use a <font> tag to define a different font face. In the same way you can define something to be bold <b> or <strong>, to be italic <i> or underlined <u>.
There are many more definitions for text and I will go into detail for the most important ones. If you want to learn absolutely everything about HTML, there are some great sources out there that can teach you the A-Z of HTML.
Nowadays a lot of these special definitions are actually also put into something called CSS, so a lot of these tags you won’t find any longer within the HTML code. To reduce difficulty, I will not go into the details of CSS today.
The Image Tag
Whenever you are including an image using WordPress, the editor will automatically produce an image tag within HTML. There are times that you may want to dive into the source code (through the text or HTML option within the editor) to change or edit these tags. Other times you get code from for example an affiliate website that you need to place within the HTML version of your content.
Images have their own tag for defining the image file, the size, the alternative text that shows up when you mouse-over the image (as well as for blind people and Google) and a couple of other things.
The image tag works as follows:
You have perhaps heard about the importance of filling something in for the ALT text of an image. The original design of the alt tag is to explain what is on the image, for the people that do not download images.
When an image doesn’t work for some reason, the text will be displayed in the browser instead.
Nowadays with fast internet, people do not really see this anymore, but in the old day’s internet wasn’t stable enough to see images quick enough or mobile internet was so slow and expensive that people generally switched the downloading of images off on their phone browser. The result was a page with image descriptions in the form of ALT text.
Below you see the alternative solutions created for people that also make use of the ALT text for images.
ALT text is used by blind people. Their browsers reads all the readable text on the website and it is then read up by a voice towards the blind person.
ALT text is nowadays also used by blind & deaf people. A special computer can read the readable text on the website and then produces braille in a special pad for the user to read.
ALT text is used a lot by search engines when they read your entire web page and website and index the content in their databases. It is therefore important to make use of this and give the search engines a good description of what your related images are about.
There are two different lists in HTML, the ordered list and the unordered list. Ordered lists increment in a certain order. The most simple explanation is a list that goes numerical such as 1,2,3,4,5,6 etc. but there are also variations of that, which go like a,b,c,d,e,f, etc or I, II, III, IV, V, VI etc.
The unordered lists use dots, stripes and other signs and symbols by each indent. Within CSS one can nowadays define the usage of images and more things instead of the simple dots. The point is that the order of the items do not really matter and therefore the name unordered list.
Lists use two tags, one for the definition of a list and one for each item within the list.
The definition is opened by either <ul> for unordered list or <ol> for ordered list. What follows after and before the closing </ul> or </ol> list tag, are the items which are each defined with <li> for list-item and the closing tag </li>. Below an example of that.
The result of this code you see below:
HyperText Link or HyperLink or Simply Links
Links are produced by a bit more complex code, but once you understand them, it will be much easier for you to create links when your editor doesn’t want to do the job you want to achieve or to quickly add the same link all over your content. This is one of the reasons I still use HTML sometimes, because with the editor you have to go through a menu several times, while in HTML I can just copy-paste the code on several places.
Hyperlinks are similar to other defining tags that the text you want to be clickable, needs to be within the opening and closing tag. There are some more advanced features you can do with links, such as linking within the same article / blog post.
Apart from text you can also link images, by making sure the previously learned <img> tag is within the opening and closing tag of the hyperlink.
The hyperlink tag is opened with the <a> tag. The A stands for ‘Anchor’. You are hanging an anchoring site to your piece of text you want to make click-able. Here you got an example:
Linking Within The Same Page
To link to content within the same page, such as a review with a table of contents on the top part of your site, you need to anchor the destination position in your page with the following code:
As you can see, you can use the anchor text to give your destination content a name. This name can then be referred to from your link in for example a table of contents.
Linking within the same page means you need to use a special symbol to let the browser know the content is to be found within the same page: ‘#’, as you can see from the bottom part of the above image.
Do you see how the link refers to the earlier created anchor name?
In the same way you can link to a certain section within another page. This time the #anchor name will be placed behind a link target, like so:
The anchor name and anchor linking within the same page is often also used for creating a link at the bottom of the page to get back to the top of the page. At the beginning of the content an anchor is created named top and then in the bottom a link is going to #top.
With the Horizontal Line, you can divide content or bits of content better and give it a better overview. The horizontal line is pretty easy to produce like this:
There are some extra definitions you can give the line, but at the core basics it is like that. Most themes on WordPress will have a definition for the looks of this tag within the CSS code, so it can look quite different from site to site. I will give you an example how it works by putting the hr tags around this paragraph. To make this text extra visible within the HR tag, I have also made this tag Italic <i>.
Before I conclude, I thought I would dive into yet one more HTML tag that can be of great use. WordPress doesn’t offer this type of content by standard, so it can be a great way to get images next to each other or to create a comparison table without the use of a plugin.
Tables start with the <table> tag. That just defines you are starting a table. It doesn’t do anything else yet. You need to create rows and data cells as well as a header (for each column). It is pretty simple when you understand what is going on. Here is an example of a table with header:
After the <table> tag, each table row is defined by <tr> and each table data cell with <td>. All of them are closed of course when they are completed. A table can have multiple rows and multiple table data cells.
The result of above code is this:
A table has only one table header, right at the beginning. The table header has the definition of the table columns in each table data cell. The difference is really about layout and how a header will look different from the other cells in your table.
If you are just about to put some images next to each other, you do not need a table header, but just the <tr> <td> stuff. Each image is then placed within a <td> </td>.
Although this is strictly not really allowed anymore, because nowadays we define everything in CSS, you can also enforce a border on a table, so that you can easily see the table data cells in your table. This can sometimes be an effect really you want within your content. You do that by adding border=”1″ to the table tag, like so:
The result you get is like this:
There are many more interesting HTML tags to be used within your content. You have at least now gotten the absolute basics in HTML that can help you a great deal in producing your own piece of unique content for your own website.
If you have any questions regarding HTML, please be sure to post them below and I will help you out!