What is HTML?

HTML, an acronym for HyperText Markup Language, is

a computer language for creating websites and web applications. Consisting mainly series of codes
usually written in a text file and 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 go through the basics of the HTML language and all you need to know to get
started with HTML as a beginner.
HTML Versions
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. It gradually evolved, allowing 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 was later reissued with minor edits in 1998.
HTML 4.01: In December 1999, HTML 4.01 was released.
XHTML: The specifications were 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 later released HTML 5.1
in November 2016.
Choosing Your HTML Editor
 If you are thinking of creating web pages in HTML, you
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 a buggy code and as a result reducing how much
typing you have to do. Most HTML editors today allow you to preview your web page to see how it will
look like in a web browser using their WYSIWYG feature.
There are many free and paid HTML editors, below are some of the top options you can choose from:
HTML-Kit
CoffeeCup
KompoZer
Komodo Edit
Notepad++
Bluefish
CodeLobster
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. When coding in HTML, it is essential to understand these building blocks. They include
tags, attributes and elements. We will take a basic look at them below:
Introduction to Tags
Once you’re into HTML, the first thing you need to understand is tags. In essence, tags separate normal
text from HTML code.
Consequently, 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 which appears to
display a series of things (hyperlinks, images, media, or other  methods of 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 an example:
In ordinary text format you get: He is a boy.
In bold text format you get: He is a boy.
To achieve what we have in the bold format you have to use the <b> tag.
In raw HTML we have <b>He is a boy</b> which the browser then translates to this: He is a boy.
“He is a boy” could also come out italicized.
This is achieved using the <i> tag.

We have: <i>He is a boy</i> which then comes out as He is a boy.

Hyperlinked is achieved using the <href> tag.

In raw HTML we have: <a href=”https://websitesetup.org/”>He is a boy</a> which shows as He is a boy.
There are a few things you should understand about tags:
Tags are practically the building block of HTML – you can’t do HTML without tags! If you’re stuck on
which tag to use, be sure to check out our HTML periodic table.
Almost every open tag must be closed. Keep in mind that 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 less than (“<”) and greater than (“>”) angle bracket. Closing tags contain a trailing
slash that becomes before the name of the tag being closed. 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>. The first line
of the HTML file should declare the type of document so that the browser knows what HTML flavor you
use. This is why you see HTML pages start with “<!DOCTYPE html>” before the HTML code begins.
Before content is added, most HTML files basically look like this:
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 – content which 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, is located. This
includes everything from the first paragraph to hyperlinks to formatting to multimedia and everything
else.
Introduction to Elements

In HTML, an “element” consists of the opening and closing tag as well as the content between the tags.
In the “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. Everything, including the opening tag, the content and the
close tag is an element.
When a tag is opened, content is introduced and the tag is closed, we have an element.
An element could be in a basic form or in a complex form. Why? Because anything in between an open
tag and a closed tag as well as those tags is an element. It means that we can have elements within an
element. In our current example, “he is a boy” (<b>He is a boy</b>) is an element.
You will notice that we said earlier that the 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 is open, contains content and is then 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, it’s used inside the opening tag of the element. Attributes are
made up of a name and a value.
Note that the value of an attribute is placed inside a quotation mark using the format <tag
attribute=”value”>Your Text</tag>.
Example:
<p align="center">He is a boy</p>
In this example, we are instructing that “He is a boy” is aligned in 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 will 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.
Example:
<title>This is our page title</title>
This title will be displayed in the browser tab. It’s also what will be indexed as the title for the page when
the search engine bots 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 therefore often impact how your content is ranked in search
engine results.
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 always remember to close the tags 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>
Creating paragraphs
The next step is to start creating paragraphs. Paragraphs can be created with the <p> tag.
Example:
<p>This is your first paragraph.</p>
<p>This is your second paragraph, and you will be creating many more
paragraphs.</p>
Keep in mind that writing in HTML is very different from writing in pure text. Therefore, 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.
Example:
<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 so that it would show like this:
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.
Example:
<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. It’s 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 article is a basic
guide, we’re keeping it simple.
Using subscript: _{He is a boy} comes out as He is a boy
Using superscript: ^{He is a boy} 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 have included plenty 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). Got the gist?
Nested lists
We can also have nested lists or a list within a list.
Example:
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 listing tag – ordered (<ol>) or unordered (<ul>) – depending on
what you want before closing the item you want to be nested.
Hyperlinking

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 a hyperlink. 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 into a quote after the “equal to” sign before the tag is closed.
Example:
To create a 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. In
this case 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 your
current document 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. You will use
target attribute for that. 
Examples:
<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:
_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.
Example:
<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 linked 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 prevent images from showing).
Using Images

Images are added to an HTML document with the <img> tag. The <img> tag is an empty tag, so it doesn’t
need to be closed.
Example:
<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, the height or both.
Example:
<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.)
Creating Tables

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.
Example:
<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’s a bit unorganized. For organizing, we can add some styling to
the code. In this case, we are increasing the 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:
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 and won’t get into that in this article.
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.
Example:
<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>
It will look like 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. 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. Remember that they can be seen in the
source code.
Comments can also be used anywhere in the code. They won’t change the function of your code in any
way.
You can include a comment by opening a bracket, including a double hyphen, adding your comment,
including another double hyphen and then closing your bracket.
Example:
<!-- 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.
Example:
<!-- <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 scenario, 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 – 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.
Example 1:
<p style="color:#0000FF";>This is the blue color</p>
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 blue color.
Example 2:
<p style="color:rgb(153, 255, 153);">This is the color green</p>
We are instructing the text to be highlighted in the green color using the RGB value.
Example 3:
<p style="color:hsl(60,100%,50%);">This is the color yellow</p>
Using the HSL value, we asked that the text is highlighted in the yellow color.
Example 4:
<p style="color:orange;">This is the color orange</p>
We use the HTML color name (in this case “orange” – which we highlighted in the code by italicizing it)
to ask that the text is highlighted in the orange color. 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.
Example:
<iframe src="https://websitesetup.org"></iframe>
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:
<iframe src="URL"></iframe>
(simply replace “URL” with the link to the website/content you want to be displayed.)
You can further customize to specify certain values, e.g the height and width, of your iframe.
Example:
<iframe src="URL" height="350px" width="400px"></iframe>
We’re telling the browser to display the iframe using a 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. You can set
the font size, the font color or the font face by using the “size”, “color” or “face” attributes.
Setting size — example:
<font size = "6">Display this text using the font size 6</font>
In this example, we’re telling 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>
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 it:
<font face = "Verdana">Kindly display this text in the Verdana font</font>
We’re 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. For that reason it is highly recommended to use “web safe” fonts.
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>
We instructed the browser to show the text in Verdana. 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 if Arial is not available either.
Conclusion
In conclusion, HTML is more complicated than what you have in this guide. Do not give up hope – 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 and 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. It’s here to help you develop a foundation you
can build upon. You can be sure that it will take significantly more effort – and a lot of development time
often using a combination of languages – to create an outstanding website.
With WordPress, which we have covered in great details in our guide on creating a website, you can
have a remarkable website ready in minutes.
HTML Resources
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.