Want to learn a little HTML?
Sounds like a great idea. Hence the reason I’ve put together this HTML tutorial for beginners.
There are at least 1.2 billion websites in the world today, and practically all of these websites use HTML in one way or the other.
P.S: If you don’t want to learn HTML and start building your website right away, with no coding required, take a look at this guide here: How to Make a Website for FREE (without learning HTML).
Introduction to HTML
What is HTML?
HTML, an acronym for HyperText Markup Language, is a computer language for creating websites and web applications. Consisting mainly of a series of codes usually written in a text file and then saved as html, code written in the HTML language translates into a beautiful, well-formatted text or a combination of text and media when viewed through a browser.
HTML was first developed by British physicist Tim Berners-Lee in 1990, and it has gone through so many evolutions since then that the most recent version can achieve far more than was imagined possible when the language was first invented.
In this tutorial, we will be going through the basics of the HTML language and all you need to know to get started with HTML as a beginner.
First, a quick rundown of all the HTML versions since HTML was invented.
- HTML 1.0: This was the barebones version of HTML and the very first release of the language.
- HTML 2.0: This version was introduced in 1995 and it gradually evolved to allow extra capabilities including: form-based file upload, tables, client-side image maps and internationalization.
- HTML 3.2: In an attempt to ensure development of standards for the World Wide Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994. By 1997, they published HTML 3.2.
- HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a version that adopted many browser-specific element types and attributes.
- HTML 4.0 will later be reissued with minor edits in 1998.
- HTML 4.01: In December 1999, HTML 4.01 was released.
- XHTML: The specifications for this was introduced in 2000 and it was recommended to be used as the joint-standard with HTML 4.01. It incorporated XML to ensure code is properly written and to ensure interoperability between programming languages.
- HTML5: The W3C published HTML5 as a recommendation in October 2014 and will later release HTML 5.1 in November 2016.
Choosing Your HTML Editor
If you will be creating web pages in HTML, you will need an HTML editor. There are several benefits to using an HTML editor.
A good HTML editor will keep your code clean and organized. It will also detect when you open a new tag and automatically close it to avoid you having buggy code and as a result reducing how much typing you have to do. Most HTML editors today also allow you to preview your web page to see how it will look in a web browser using their WYSIWYG feature.
There are many free and paid HTML editors, and below are some of the top options you can choose from:
Basic Building Blocks of HTML
Once you’ve decided on the HTML editor you want to use, the next step is to understand the building blocks of HTML. If you want to code in HTML, it is essential to understand these building blocks. They include tags, attributes and elements. We take a basic look at them below:
Introduction to Tags
Once you’re into HTML, the very first thing you need to understand is tags. In essence, tags separate normal text from HTML code.
So in essence, when it comes to HTML, tags make the difference between whether your document is displayed as ordinary text or “transformed text” — which is basically a code of text that appears to display a series of things (could be hyperlinks, images, media, or other formatting) based on what it is instructed to display based on tags.
Let’s take a look at the word “He is a boy” as a basic example:
- In ordinary text format you get: He is a boy.
- In bold text format you get: He is a boy.
However, to achieve what we have in the bold format you have to use the <b> tag.
So in raw HTML we have something like <b>He is a boy</b> which the browser then translates to this: He is a boy.
However, the very same “He is a boy” could come out italicized.
This is achieved using the <i> tag.
So we have: <i>He is a boy</i> which then comes out as He is a boy.
It could also come out hyperlinked. This is achieved using the <href> tag.
In raw HTML we have: <a href=”https://websitesetup.org/”>He is a boy</a> which then comes out as He is a boy.
There are a few things you should understand about tags, though:
- Tags are practically the building block of HTML — you can’t do HTML without tags; if stuck on what tag to use, be sure to check out our HTML periodic table.
- Almost every open tag must be closed. However, there are exceptions. An example of a tag that does not have to be closed is an empty tag, such as the line break: <br>.
- Tags are contained in a less than (“<”) and greater than (“>”) angle bracket. Closing tags contain a trailing slash that becomes before the name of the tag being closed, though: Example of an open tag: <b>. Example of a closed tag </b>.
- Every HTML file begins with the opening tag <html> and ends with the closing tag </html>. Of course, the very first line of the HTML file should declare the type of document so that the browser know what HTML flavor you use. This is why you see HTML pages start with “<!DOCTYPE html>” before the HTML code begins.
Based on the above, most HTML files basically look like this before content is added:
The section that follows the <head> tag usually contains information about the document such as its title, meta tags and where to locate its CSS file — most content that is not visible directly on the browser page. The section between “<body> and </body>” (which we represented with “MAIN CONTENT”) is where the main content of the HTML file, that the viewer will see in the browser, will be included. This includes everything from the first paragraph to hyperlinks to formatting to multimedia and all else.
Introduction to Elements
In HTML, an “element” consists of the opening and closing tag as well as the content in-between these tags.
Going back to our “He is a boy” (in bold) example, we have this in HTML: <b>He is a boy</b>. The text “He is a boy” is surrounded by an open and closed tag. However, everything, including the opening tag, the content and the close tag is an element.
So whenever a tag is opened, content is introduced and the tag is then closed, we have an element.
An element could be in the most basic form or in the most complex form. Why? Because anything in between an open tag and a closed tag as well as those tags is an element. That means we can have elements within an element. In this case, our simple example in which we bold he is a boy (<b>He is a boy</b>) is an element. However, you will note that we said earlier that HTML documents contain the <body> tag before the content begins — the content could include hundreds of different elements, but all these elements are part of the “body” element (since the body element was opened, contains content and was closed).
Introduction to Attributes
While HTML documents basically use tags for everything, we sometimes want to communicate additional information inside an element, in this case we use an attribute. The attribute is used to define the characteristics of an element, and it is used inside the opening tag of the element. Attributes are made up of a name and a value.
Basically, the value of an attribute is placed inside a quotation mark using the format <tag attribute=”value”>Your Text</tag>.
<p align="center">He is a boy</p>
In this example, we are instructing that “He is a boy” be aligned to the center of the document.
Getting Started With HTML
Assuming you want to create your own basic HTML document today, how do you get started? From creating page titles to creating forms, we walk you through how to get started with HTML below.
Creating The HTML <head> Element
When creating an HTML document, one of the first things you will create is the <head> element. This contains metadata (or data about the HTML document). This includes information such as the character set, document title, document styles, scripts, etc.
Some of the elements in the <head> include the title, which is created with the <title> tag.
<title>This is our page title</title>
This title will be displayed in the browser tab, and it is also what will be indexed as the title for the page when search engines crawl your website.
This also includes the <meta> element, which is often used to specify information search engines can use to describe the content in their listings; this includes the description, keywords, author information, etc. The <meta> element also specifies the character set the HTML document uses.
Creating Headings in HTML
Headings play a major role in the success of a website. Firstly, they make it easy for readers to scan the content of your pages. Secondly, and perhaps more importantly, they communicate the structure of your web pages to search engines — and can as a result impact how your content is ranked in search engines.
That said, it is important to avoid using heading tags to make your text big or bold. There are other tags that can be used for that (which we’ll get to later in this section). Instead, heading tags should be used solely for structure.
There are six heading tags in HTML: <h1> to <h6>, with the <h1> tag indicating the most important heading and the <h6> tag indicating the least important heading.
To create headings, simply decide what heading you’re creating, open the heading with the regular heading tag and close once you’re done.
HTML Headings Example:
- <h1>This is Your First HTML Heading</h1> (the largest)
- <h2>This is Your Second HTML Heading</h2>
- <h3>This is Your Third HTML Heading</h3>
- <h4>This is Your Fourth HTML Heading</h4>
- <h5>This is Your Fifth HTML Heading</h5>
- <h6>This is Your Sixth HTML Heading</h6>
The next step is to start creating paragraphs. Paragraphs can be created with the <p> tag.
<p>This is your first paragraph.</p> <p>This is your second paragraph, and you will be creating many more paragraphs.</p>
That said, it is important to realize that writing in HTML is very different from writing in pure text; so if you break up text inside HTML without starting a new paragraph, it won’t really matter when the text is displayed by the browser. Instead, you want to use a line break, which is represented by the <br> tag.
<p>This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.</p>
This will not come out as the following:
This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.
Instead, it will come out as this:
This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.
So, how do you break texts into new lines like in the example below?:
This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.
By using line breaks.
<p>This is a new paragraph.<br>And I want to use a number of new lines.<br>So I’m breaking it up.</p>
That said, it is important to note that the line break (<br>) tag is an empty tag, so you don’t have to close it.
Formatting Text in HTML
The next step is to format your text in HTML. This is where you can indicate whether you want your text to come out bold, italicized, underlined, subscripted, superscripted, etc. This is a basic guide, so this section won’t be the be-all-end-all for formatting; instead, we will only include some basic formatting tags. The process for using other forms of formatting is simple; just find the tag you want and go ahead:
Using bold: <b>He is a boy</b> comes out as He is a boy
Using italics: <i>He is a boy</i> comes out as He is a boy
Underlining text: <u>He is a boy</u> comes out as He is a boy. However, it is worth noting that the <u> tag was deprecated in HTML 4.01 and was redefined to represent stylistically different text in HTML5. As a result, it is recommended to use CSS to indicate text that should be underlined. Since this is a basic guide, though, we’re keeping it here.
Using subscript: <sub>He is a boy</sub> comes out as He is a boy
Using superscript: <sup>He is a boy</sup> comes out as He is a boy
For other tags that can be used to format, you might want to take a look at the glossary at the end of this resource where we include a lot of relevant HTML tags.
Ordered and Unordered Lists
Sooner or later you will have to create lists. Lists could be ordered (i.e. numbered) or unordered (i.e. unnumbered).
Here is an example of an ordered list:
- Item 1
- Item 2
- Item 3
Here is how to create it:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Here is an example of an unordered list:
- Item 1
- Item 2
- Item 3
Here is how to create it:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
If it is not already obvious. Here’s a breakdown:
The <li> tag is used to indicate each item on the list. When making a list, you can use the <ol> tag to indicate an ordered list (“o” = ordered and “l” = list) or the <ul> tag to indicate an unordered list (“u” = unordered and “l” = list). You get the gist?
We can also have nested lists, or a list within a list.
- Item 1
- Item 1 nested
- Item 2 nested
- Item 2
- Item 3
This can be created with:
<ul> <li>Item 1 <ul> <li>Item 1 nested</li> <li>Item 2 nested</li> <li>Item 3 nested</li> </ul> </li> <li>Item 2</li> <li>Item 3</li> </ul>
As you can see, you simply open another list tag — ordered (<ol>) or unordered (<ul>) — depending on what you want before closing the item you want nested.
The web is one massively interconnected network of pages. If you create a website, whether internally or externally, or both, you will have to link to other pages. A link to an internal page on your website, or to an external page on the web, is called an hyperlink. Also, while people usually link a text, any HTML element — an image, for example — can be linked.
The <a> tag is used to define links in HTML, while the “href” attribute is used to specify the destination of a link, the link is then put in a quote after the “equal to” sign before the tag is closed.
To create an hyperlink, this: <a href=”https://websitesetup.org”>YOUR LINK TEXT HERE</a> will come out as YOUR LINK TEXT HERE
Now, assume you are linking to a local file; in which you have all your html pages in the same folder, you don’t have to include a website URL. Just add the file path. For example, if linking to a file titled about-page.html, your hyperlink becomes <a href=”about-page.html”>YOUR LINK TEXT HERE</a>, which links to the about-page.html file.
If the HTML file you want to link to is local but in a folder different from the main folder, you simply specify the file path. For example, if the file is in the “files” folder under the main document where the current document you are writing is, your hyperlink goes something like this <a href=”files/about-page.html”>YOUR LINK TEXT HERE</a>
You might want to specify how you want the link to be opened e.g. in a new window/tab. This is done with the target attribute.
<a href=”about-page.html” target=”_blank”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in a new tab.
<a href=”about-page.html” target=”_self”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in the same tab.
There are other attributes that can be used to communicate different ways a link should be opened. They are:
- _blank – Open in a new tab.
- _self – Open in the same tab.
- _parent – Open in the parent frame
- _top – Open in the full body of the window
- framename – Open in a named frame
You can also have an image point to a link.
<a href="https://websitesetup.org"> <img src="heisaboy.jpg" alt="He is a boy"> </a>
This tells the browser to display an image pulled from the image file “heisaboy.jpg” and have it link to https://websitesetup.org. The “alt” attribute represents what should be shown if the image is unable to be displayed (due to browser settings or some other stuff that present images from showing).
Images are added to an HTML document with the <img> tag. The <img> tag is an empty tag, so it does not need to be closed.
<img src="heisaboy.jpg" alt="He is a boy">
This is a basic example of telling the browser to display an image titled “heisaboy.jpg” pulled from the same directory as the HTML document. The “alt” attribute tells the browser to show a text (known as an “alternative text”) called “He is a boy” if for some reason the browser or internet settings prevents the browser from displaying images. If you want to pull an image in another directory, or on an external site, the full address/path should be specified.
Going beyond the basics, we could also use other attributes to better customize the image. For example, the “style” attribute can be used to specify the width, or the height, or both of the image.
<img src="IMAGE PATH" alt="YOUR ALTERNATIVE TEXT" style="width:width;height:height;">
(the italicized “width” and “height” should be replaced with the actual values in “px” (e.g. “20px”) you want for your image.)
As you get deeper into HTML, you will want to learn various ways to present information in a more organized way. One such way is through the use of tables.
Tables are created with the <table> tag. Each header in a table is specified with the <th> (“table header”) tag while each row is specified with the <tr> (“table row”) tag. The table data is then indicated with the <td> tag.
<table> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Input 1 under header 1</td> <td>Input 1 under header 2</td> <td>Input 1 under header 3</td> </tr> <tr> <td>Input 2 under header 1</td> <td>Input 2 under header 2</td> <td>Input 2 under header 3</td> </tr> <tr> <td>Input 3 under header 1</td> <td>Input 3 under header 2</td> <td>Input 3 under header 3</td> </tr> </table>
This gives us something like this:
As you can see, while we have a table it is a bit unorganized. To make this organized, we can style our code. To do this, we add some styling to the code. In this case, we are increasing width:
<table style="width:100%"> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Input 1 under header 1</td> <td>Input 1 under header 2</td> <td>Input 1 under header 3</td> </tr> <tr> <td>Input 2 under header 1</td> <td>Input 2 under header 2</td> <td>Input 2 under header 3</td> </tr> <tr> <td>Input 3 under header 1</td> <td>Input 3 under header 2</td> <td>Input 3 under header 3</td> </tr> </table>
This results in something more organized, as you can see below:
Now, you might want to go more advanced and use borders, set horizontal or vertical alignment for the content of the table, introduce dividers, padding, etc. However, you will need to learn some CSS to do stuff like this. We’re keeping this tutorial basic, wo we won’t get into that.
Quotations in HTML
There are different types of quotations, and these quotations are represented by different elements.
For a basic quotation, here’s an example:
<p>This is a sample. And <q>Here is our quote</q></p>
This comes out as: This is a sample. And “Here is our quote”
When you use the <q> tag, quotation marks are automatically added to what is enclosed within the tag.
You can also use blockquotes, which is done with the <blockquote> tag.
<p>This is a sample. And <blockquote>Here is our blockquote. In this example, we try to demonstrate how to format text to indicate a blockquote in HTML. This is different from ordinary quotes, in that the actual "quote" symbol may or may not be added depending on CSS styling, but the text is highlighted.</blockquote></p>
This comes out as this:
Using Comments in HTML
When doing any form of coding, it is important to learn how to include comments in your code. Comments are used to make your code more organized; basically, you can include a reminder to yourself or a note to others to make things easier. Initially, it might not seem important, but when you start writing hundreds or thousands of lines of code, and when things seem to start to get complicated, comments will come in handy.
Comments won’t be shown to the viewer by the browser. However, they can be seen in the source code.
Comments can also be used anywhere in the code, and they won’t change the function of your code in anyway.
You can include a comment by opening a bracket, including a double hyphen, adding your comment, including another double hyphen and closing your bracket.
<!-- This is a comment used to indicate information I want to remember, or that I want others to take note of, when looking at this code in the future -->
It is also worth noting that, especially when debugging, you can comment out lines of code. This way, the code remains in the document but does not function since you have commented it.
<!-- <b>He is a boy</b> -->
In this case, while “He is a boy” is supposed to come out as bold we have commented it and it would be ignored by the browser. In this case, as far as the browser is concerned, we have nothing.
This could also be used this way:
<b>He <!– is a –> boy</b> which shows He boy. This is because we commented out “is a.” We’re just trying to show you that practically anything, within or outside an element, can be commented out. You can include a note in your comment for reference sake — it doesn’t change the nature of what is displayed.
Using Colors in HTML
Sooner or later, you will want to use colors to indicate certain elements of your HTML document. This can be done in three main ways: with the HEX value, with the RGB value or with the name of the color.
Using color in HTML is usually done with the style attribute.
<p style="color:#0000FF";>This is the blue color</p>
In this example, using the HEX value for the blue color “#0000FF” we are telling the browser to show your text (in this case “This is the blue color”) using the color blue.
<p style="color:rgb(153, 255, 153);">This is the color green</p>
This time around, we ask that the text be highlighted in the color green using the RGB value.
<p style="color:hsl(60,100%,50%);">This is the color yellow</p>
In this example, using the HSL value, we asked that the text be highlighted in the color yellow.
<p style="color:orange;">This is the color orange</p>
In this example, we use the HTML color name (in this case “orange” — which we highlighted in the code by italicizing it) to ask that the text be highlighted in the color orange. Obviously, this is only feasible for texts for which you know the color names and can be difficult for certain color shades that can be easily done with the HEX code or RGB value. Regardless, you can find a list of 140 HTML color names compiled by HTML Color Codes.
Understandably, you don’t have all the necessary information — such as HEX code, RGB value, etc — for all colors. Don’t panic, the color picker by W3Schools is a great tool that allows you to select any color and shows you all information about that color including the HEX code, RGB value and HSL value.
Using iFrames in HTML
In an HTML document, an iFrame (inline frame) can be used to embed a file in the current document. In essence, you can use it to display another website or content from another web page inside the current one.
With the above code, I am telling the browser to display the content of https://websitesetup.org in a frame directly inside this page.
Iframes can be used to display a website, video, images or any other form of content.
The code for this is simple:
(simply replace “URL” with the link to the website/content you want displayed.)
You can further customize to specify certain values, such as the height and width for example, of your iframe.
<iframe src="URL" height="350px" width="400px"></iframe>
In this case we’re telling the browser to display the iframe using an height of 350px and a width of 400px.
Fonts in HTML
Understanding how fonts work is essential to creating effective HTML documents. For one, fonts make it easy to set the size of your text. It also makes it easy to set the color as well as the face (or font “type”) of your content.
To indicate the font your HTML document will be using, you will need to use the <font> tag. However, you can set the font size, the font color or the font face by using the “size”, “color” or “face” attribute.
Setting size — example:
<font size = "6">Display this text using the font size 6</font>
In this example we tell the browser to display our text using the font size 6. It is important to note that the range of accepted font sizes is 1 to 7. Anything above 7 will automatically adjust to font size 7. The default font size is 3.
Font color — example:
<font color = "blue">Display our text in the blue color</font>
Again, we’re using the <font> tag to ask the browser to display our text in the color blue. In this instance, we used the HTML color name (“blue”). This can be replaced with the HEX code or the RGB value if you want.
Font face — example:
Do you prefer Verdana instead of Times New Romans? This is how you set this.
<font face = "Verdana">Kindly display this text in the Verdana font</font>
In this example, we are telling the browser to display our text in the Verdana font. You can simply change the font face value to indicate any font you want to use.
Alternate font faces:
It is important to note that people will only be able to see your text displayed in the font you specify if they have that font installed on their computer. If not, the default font face — usually Times New Roman — will be displayed; which is why it is highly recommended to use “web safe” fonts. In this instance, it might help to include as many alternate font faces as you can. This way, even if they don’t have your main font face, you can specify other fonts in order of importance. This is done with the use of the comma.
Back to our example:
<font face = "Verdana, Helvetica, Arial, Comic Sans">Kindly display this text in the Verdana font first, or Helvetica, or Arial, or Comic Sans… in that order, if the main font is not available</font>
In essence, in the above example. We instruct the browser to show the text in Verdana. However, if Verdana is not available, instead of reverting to the default Times New Romans, it can show Helvetica, or Arial if Helvetica is not available or Comic Sans is Arial also is not available.
In conclusion, HTML is more complicated than what you have in this guide. However, if you can grasp the basic concepts in this guide, you are up to a good start. It’s like knowing the ABC of a language; everything else becomes much easier.
If you went through this tutorial with the aim to create a stunning website, we’re sorry to disappoint — it just doesn’t work that way. This is basic HTML tutorial, to help you develop a foundation you can build upon, and it takes significantly more effort — and a lot of development time often using a combination of languages, to pull that off. However, with WordPress, which we covered in great details in our guide on creating a website, you can have a stunning website ready in minutes.
- HTML Periodic Table – This lists all HTML tags in the form of a periodic table, making it easy to learn/use them.
- W3Schools/Tags – List of all HTML tags ordered alphabetically.
- Mozilla/HTML Attributed – List of all HTML attributes ordered alphabetically.
- HTML Cheat Sheet
- HTML Color codes/Color Names – List of 140 HTML color names including HEX code, RGB value and HSL value.