Learn HTML Code, Tags & CSS
MENU !
HTML For Beginners The Easy Way: Start
Learning HTML & CSS Today
Disclosure: Your support helps keep the site
running! We earn a referral fee for some of
the services we recommend on this page.
Learn more
Welcome! You’ve Found the Easiest Way
to Learn HTML and CSS.
Contents [hide]
1 Welcome! You’ve Found the Easiest Way to Learn HTML
and CSS.
2 HTML for Absolute Beginners
2.1 What is HTML?
2.2 The History of HTML
2.3 What are Tags and Attributes?
2.4 HTML Editors
2.5 Creating Your First HTML Webpage
2.6 Adding Content
2.7 How To Close an HTML Document
2.8 Troubleshooting
3 Our Other HTML Tutorials
3.1 Intermediate & Advanced Tutorials
3.2 HTML Reference Guides
3.3 HTML Attributes Reference Guide
3.4 HTML Cheat Sheet
3.5 The HTML.com Blog
3.6 The HTML.com Guide to Web Hosting
4 Improve Your HTML Skills
Whether you are a novice, hoping to delve into the world of
web design or an experienced webmaster keen to improve
your skills, we’ve got online tutorials tailored to your web
design needs.
In a rush? Go straight to our
tutorial and start learning HTML
now!
Our absolute beginner tutorial will turn you from wannabe to
webmaster in just a few hours. Unlike many other HTML
tutorials, it’s a step-by-step guide – not a boring long-winded
reference.
Our step-by-step guide teaches you the basics of HTML and
how to build your first website. That means how to layout an
HTML page, how to add text and images, how to add headings
and text formatting, and how to use tables.
We’ll get you building your new website in minutes, not
hours.
HTML for Absolute Beginners
While many guides on the internet attempt to teach HTML
using a lot of mind-boggling theory, this tutorial will instead
focus on giving you the practical skills to build your first site.
The aim is to show you ‘how’ to create your first web page
without spending the entire tutorial focusing too much on the
“why.”
By the end of this tutorial, you will have the know-how to
create a basic website and we hope that this will inspire you
to delve further into the world of HTML using our follow-on
guides.
What is HTML?
Okay, so this is the only bit of mandatory theory. In order to
begin to write HTML, it helps if you know what you are
writing.
HTML is the language in which most websites are written.
HTML is used to create pages and make them functional.
The code used to make them visually appealing is known as
CSS and we shall focus on this in a later tutorial. For now, we
will focus on teaching you how to build rather than design.
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau,
and others starting in 1989. It stands for Hyper Text Markup
Language.
Hypertext means that the document contains links that allow
the reader to jump to other places in the document or to
another document altogether. The latest version is known as
HTML5.
A Markup Language is a way that computers speak to each
other to control how text is processed and presented. To do
this HTML uses two things: tags and attributes.
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
They work together but perform different functions – it is
worth investing 2 minutes in differentiating the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and
they are usually enclosed in angle brackets. An example of a
<h1>
tag is: .
<h1> </h1>
Most tags must be opened and closed in
order to function.
What are HTML Attributes?
Attributes contain additional pieces of information.
Attributes take the form of an opening tag and additional info
is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my
dog.">
In this instance, the image source (src) and the alt text (alt)
<img>
are attributes of the tag.
Golden Rules To Remember
<tag>
1. The vast majority of tags must be opened ( ) and
</tag>
closed ( ) with the element information such as a
title or text resting between the tags.
2. When using multiple tags, the tags must be closed in the
order in which they were opened. For example:
<strong><em>This is really important
</em></strong>
HTML Editors
Now that we’ve gotten the basic theory out of the way. It’s
time to learn how to build our first website.
First off, we must ensure that we have the right tools. Most
important, we need an HTML editor.
There are many choices on the market. Here are a handful of
the most popular:
Sublime Text 3
However, for this tutorial, we will use the Sublime Text 3 as it
is free and also offers cross-platform support for Windows,
Mac, and Linux users.
Sublime Text 3 has a mini-preview window on the right.
Pros
Easily customizable
Beginner-friendly
Pleasant color schemes to choose from.
Cons
Can’t print documents or code
No toolbar or dashboard available.
Notepad ++
Another common choice for HTML and other language
coders is Notepad ++. It is a tiny program to download and
perform the functions you need for writing clean code.
This is Notepad ++. Far from glamorous but does the job.
Pros
Distraction-free interface
Auto-completion feature
Plugin options for extended functionalities.
Cons
Can be difficult to get used to for beginners
No support for Mac.
Komodo Edit
Komodo Edit is one of two editors released by the same label.
They offer a simple, open-source editor with a variety of
extensions and language support.
It is free to download.
Komodo isn’t one for a flash interface either but is simple to use.
Pros
Easy-to-grasp coding interface
Available for Mac, Windows, and Linux
Impressive language support.
Cons
No autocompletion by default
Visual settings are difficult to find and change.
What To Avoid
Your code’s front-end view varies
from browser to browser – you
will learn more about this with
advanced CSS.
Do not use Microsoft Word or any other word processor
when writing HTML code, only an HTML editor or at the very
least, your machine’s built-in notepad, is suitable for the task.
Secondly, ensure that you’ve installed a number of different
browsers such as Chrome and Firefox in order to preview
your upcoming creation.
Creating Your First HTML Webpage
First off, you need to open your HTML editor, where you will
find a clean white page on which to write your code.
From there you need to layout your page with the following
tags.
Basic Construction of an HTML Page
These tags should be placed underneath each other at the
top of every HTML page that you create.
<!DOCTYPE html>
— This tag specifies the language
you will write on the page. In this case, the language is
HTML 5.
<html>
— This tag signals that from here on we are
going to write in HTML code.
<head>
— This is where all the metadata for the page
goes — stuff mostly meant for search engines and other
computer programs.
<body>
— This is where the content of the page goes.
This is how your average HTML page is structured visually.
Further Tags
<head>
Inside the tag, there is one tag that is always
<title>
included: , but there are others that are just as
important:
<title>
This is where we insert the page name as it will appear
at the top of the browser window or tab.
<meta>
This is where information about the document is
stored: character encoding, name (page context),
description.
<head>
Let’s try out a basic section:
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This
field contains information about your
page. It is usually around two sentenc
es long.">.
<meta name="author" content="Conor She
ils">
</header>
Adding Content
<body>
Next, we will make tag.
<body>
The HTML is where we add the content which is
designed for viewing by human eyes.
This includes text, images, tables, forms and everything else
that we see on the internet each day.
How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1> <h2>
As you might have guessed and should be used
for the most important titles, while the remaining tags should
be used for sub-headings and less important text.
Search engine bots use this order when deciphering which
information is most important on a page.
Creating Your Heading
Let’s try it out. On a new line in the HTML editor, type:
<h1>Welcome to My Page</h1>
And hit save. We will save this file as “index.html” in a new
folder called “my webpage.”
The Moment of Truth: Click the
newly saved file and your first
ever web page should open in
your default browser. It may not
be pretty it’s yours… all yours.
*Evil laugh*
Well let’s not get carried away; we’ve still got loads of great
features that we can add to your page.
How To Add Text In HTML
Adding text to our HTML page is simple using an element
<p>
opened with the tag which creates a new paragraph.
<p>
We place all of our regular text inside the element .
When we write text in HTML, we also have a number of other
elements we can use to control the text or make it appear in
a certain way.
Other Key Elements
They are as follows:
Element Meaning Purpose
<b> Bold Highlight
important
information
<strong> Strong Similarly to bold,
to highlight key
text
<i> Italic To denote text
<em> Emphasised Text Usually used as
image captions
<mark> Marked Text Highlight the
background of
the text
<small> Small Text To shrink the text
<strike> Striked Out Text To place a
horizontal line
across the text
<u> Underlined Text Used for links or
text highlights
<ins> Inserted Text Displayed with an
underline to
show an inserted
text
<sub> Subscript Text Typographical
stylistic choice
<sup> Superscript Text Another
typographical
presentation
style
These tags must be opened and closed around the text in
question.
Let’s try it out. On a new line in the HTML editor, type the
following HTML code:
<p>Welcome to <em>my</em> brand new
website. This site will be my
<strong>new<strong> home on the web.
</p>
Don’t forget to hit save and then refresh the page in your
browser to see the results.
How To Add Links In HTML
As you may have noticed, the internet is made up of lots of
links.
Almost everything you click on while surfing the web is a link
takes you to another page within the website you are visiting
or to an external site.
Links are included in an attribute opened by the <a> tag. This
element is the first that we’ve met which uses an attribute
and so it looks different to previously mentioned tags.
The Anchor Tag
The <a> (or anchor) opening tag is written in the format:
<a href="https://blogging.com/how-to-
start-a-blog/">Your Link Text Here </a>
The first part of the attribute points to the page that will
open once the link is clicked.
Meanwhile, the second part of the attribute contains the text
which will be displayed to a visitor in order to entice them to
click on that link.
If you are building your own website then you will most likely
host all of your pages on professional web hosting. In this
case, internal links on your website will <a href=”
mylinkedpage.html”>Linktle Here</a>.
Let’s Create An Anchor Tag
Let’s try it out. Make a duplicate of the code from your
current index.html page. Copy / paste it into a new window in
your HTML editor.
Save this new page as “page2.html” and ensure that it is saved
in the same folder as your index.html page.
On page2.html add the following code:
<a
href="http://www.google.com">Google</a>
This will create a link to Google on page 2. Hit save and return
to your index.html page.
On a new line on index.html add the following code:
<a
href="*folder(s)*/page2.html">Page2</a>
Ensure the folder path to the file (page2.html) is correct. Hit
save and preview index.html in your browser.
If everything is correct then you will see a link which will
take you to your second page. On the second page, there will
be a link that will take you to google.com.
How To Add Images In HTML To Your Website
In today’s modern digital world, images are everything. The
<img> tag has everything you need to display images on your
site. Much like the <a> anchor element, <img> also contains
an attribute.
The attribute features information for your computer
regarding the source, height, width and alt text of the image.
Styling and Formats
You can check the file type of an image by right-clicking the item
and selecting ‘Properties’.
You can also define borders and other styles around the
image using the class attribute. However, we shall cover this
in a later tutorial.
The file types generally used for image files online are: .jpg,
.png, and (less and less) .gif.
Alt text is important to ensure that your site is ranked
correctly on search sites and also for visually impaired
visitors to your site.
The <img> tag normally is written as follows:
<img src="yourimage.jpg" alt="Describe
the image" height="X" width="X">
Let’s try it out.
Create Your Own Image With An Alt Text
Don’t be afraid to play around
with the test code – it’s a great
way to have fun while learning.
Save an image (.jpg, .png, .gif format) of your choice in the
same folder where you’ve saved index.html and page2.html.
Call this image “testpic.jpg.”
On a new line in your HTML editor enter the following code:
<img src="testpic.jpg" alt="This is a
test image" height="42" width="42">
Hit save and preview the index.html page in your browser.
How To Make an HTML List
In web design, there are 3 different types of lists which you
may wish to add to your site.
Ordered List
The first is an <ol>: This is an ordered list of contents. For
example:
1. An item
2. Another item
3. Another goes here.
Inside the <ol> tag we list each item on the list inside <li>
</li> tags.
For example:
<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
Unordered List
The second type of list that you may wish to include is an <ul>
unordered list. This is better known as a bullet point list and
contains no numbers.
An example of this is:
<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>
Definition List
Finally, you may wish to include a definition list <dl> on your
page. An example of a <dl> list is as follows:
HTML
Hypertext markup language is a programming
language used to create web pages and is rendered by
a web browser.
The code used for the above is as follows:
<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
Let’s try it out. Open index.html and on a new line, enter the
following HTML:
