HTML for Beginners:


The Ultimate Guide

by and FirstSiteGuide team (Last updated: September 29, 2017)

The Timeline of Web Technologies



2009



2005


2002

2000

1998
1997
1996

1994


1991


HTML5



AJAX


Tableless Web Design

XHTML1

CSS2
HTML4
CSS1 + JavaScript

HTML2


HTML

Introduction

If you want to become a webmaster and develop your own website, you may find the prospect of getting to grips with HTML quite daunting.

This is something than cannot be avoided, however, as the vast majority of website landing pages that you visit will have been written and structured using HTML elements. In fact, HTML is now used by more than 74% of all known websites, while this language also helps to enhance everything from the design of your site to the quality of the content that it features.

In this guide, we will explore the basic principles of HTML and its potential applications, before looking at examples of the individual elements that you use when coding your website.

What is HTML?

Percentages of websites using various subcategories of HTML
various subcategories of HTML percentages

In simple terms, HTML represents the standard markup language for creating web pages online. It stands for Hyper Text Markup Language, and its most primary function is to establish the structure, layout and presentation of individual landing pages. While web browsers do not directly display HTML language, it plays a pivotal role in helping to create a visible, accessible and easy to use site.

HTML is also underpinned by a number of individual elements, which gradually build web pages, structure the presentation of content and bring your website to life. These elements are created and contained within ‘tags’, which define alternate pieces of content such as headings, paragraphs, and similar examples.

We will explore these elements and their construction in further detail below, while also looking at how they can be personalised to introduce colour, links and variable typography to your website.


Where is HTML Used?

Popular websites using HTML

Where is HTML Used

As we can see, the most common application for HTML is the design of the individual landing pages that make up your website. This is not the only application of the popular coding tool, however, understanding its additional uses will help you to get the most from the language as a new webmaster. So, here are some of the further ways in which HTML can be applied:

  • Create Customisable Elements Within an Existing Page

    If you intend to allow blog posts comments or the publication user-generated content on your website, you can use HTML code fragments to enable this. These elements will enable users to emphasise keywords, embed links and format comments depending on the restrictions that you put in place as a moderator.

  • Create Additional Content for Email

    Email also uses HTML as the language for rich text messages, which feature links, text and a variety of other elements that cannot be featured in plain-text alone. So, if you are looking to share an ebook that relates to your website through email, you can utilise HTML to optimise the impact of your message.

  • Understand Offline Help Documents That are Installed on Your Computer

    Interestingly, HTML is used as the format for computer-based help documents that are accessible offline. A basic knowledge of HTML can therefore help you to understand issues with your hardware and resolve them quicker, which in turn may ensure that you are able to restore your website quicker in instances when it has gone offline.

HTML Page Structure

<html>
<head>
<title>
</title>

</head>
<body>
Page content
</body>
</html>

The html, head, and body elements have been part of the HTML specification since the mid 1990s, and up until a few years ago they were the primary elements used to give structure to HTML documents.
However, the situation has changed dramatically in the last few years as HTML5 has added a slew of new tags that can be used to add rich semantic meaning to the structure of an HTML document.

HTML documents are required to start with a Document Type Declaration (informally, a "doctype"). In browsers, the doctype helps to define the rendering mode. HTML5 does not define a DTD; therefore, in HTML5 the doctype declaration is simpler and shorter.


Before you can build out a html page, you need the basics in place.

Typically, a page will be made up of three structural elements:

1. Header: The header contains content relevant to all pages on your site, such as a logo or website name, and a navigation system. The header is seen on each page.

2. Main Body: This occupies the largest area on a web page. It contains content specific to the page being viewed.

3. Footer: Footer content usually includes contact information, a shipping address or legal notices. Like the header, the footer appears on every page, but it’s positioned at the bottom.


Here’s what those basic structural elements look like when they come together:

<html>
<head>

You can put text or code here, like a
Google Analytics tracking code for
example.

</head>
<body>

The main body of your page goes
here. Fill it with text and images!

</body>
</html>


Here’s another example, using header tags and the paragraph tag to structure content aesthetically. Plus, we’ve thrown in a footer tag for content below the main body of a page:

<html>
<head>

You can put text or code here, like a
Google Analytics tracking code for
example.

</head>
<body>

<h1>My First Heading</h1>
<p>Welcome to mywebsite!</p>

<footer>
<p>contact information could go here</p>
</footer>
</body>
</html>


HTML Tags

HTML Tags

The starting point for any HTML code is individual tags, which can be used to create all crucial elements and help to structure your web pages. Below, we will take a look at the most common tags before we explore how they can be leveraged to generate specific, on-page elements:

Heading Tags

All online documents, including web pages, begin with a heading. These are constructed using HTML tags, with the language currently allowing for up to six variably sized elements that also enable you to structure your content with additional titles, subtitles and highlighted lines of bold text. To start your heading, you simply prefix the relevant text with the <h1> , <h2> , <h3> , <h4> , <h5> or <h6> tag depending on the desired size.
You must then apply a closing tag at the end of the heading to encapsulate the text, and will be displayed as follows in HTML format:

There are 12 categories of tags:


<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Leading HTML Tags technologies
share on the web

0.27%
HTML5
Canvas Tag
0.29%
HTML5
Audio Tag
0.69%
HTML5
Video Tag
3.1%
HTML5
SVG Tag
6.54%
HTML5
Embed Tag


Once confirmed, this will translate into the following aesthetic on your website’s landing page:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6


Here, the various sizes of the variable headings is clear to see, as is the fact that the browser adds a line before and after the heading. You will also notice that the closing tag at the end of the heading text has a slightly different aesthetic, but will cover this in the following chapter as we look to use tags to define specific elements.

Paragraph Tags

Video and Audio Support
Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags.

A similar principle is applied to starting paragraph tags, which are depicted by <p>. This allows you to structure your content and divide it into relevant paragraphs, which in turn translates into an easier and more seamless reading experience. Once again, the <p> tag should be placed at the beginning of the relevant text, before the alternate closing tag is applied at the end to complete the effect. Unlike heading tags, however, there are no numerical various that can alter the size of the text featured in the paragraph. For example:

<p>Your First Paragraph</p>

<p>Your Second Paragraph</p>

<p>Your Third Paragraph</p>


HTML5 Video Tag usage by websites across the globe

Country
Number of Websites
United States
140,008
Russia
87,508
Germany
34,519
United Kingdom
26,609
France
25,697
Japan
23,578
Taiwan
19,798
Ukraine
19,204
Brazil
16,773
China
16,523
Rest of the World
  265,371

Outside of the HTML format, this will break the text down as follows on your finished web page:

Your First Paragraph

Your Second Paragraph

Your Third Paragraph

Line Break Tags

The first examples represent the most basic HTML tags, but there are others that utilise a different format and alternative closing takes. Take line breaks, for example, which create a distinction at which lines of text are broken and continued on the following line. There is a core difference between line breaks and paragraphs in the field of HTML, as while the latter are standard block elements that contain text, the former creates a separation within an existing <p> element.

Because of this, line breaks represent an empty element in HTML and are therefore not defined by either opening or closing tags. Instead, they are depicted by the <br /> tag, which can be inserted into existing <p> elements to break up text and potentially highlight important pieces of information. The single space between the character br and the forward slash is crucial, as otherwise the tag is not recognisable in HTML format.

Here is an example:

<canvas> is the drawing HTML5 drawing tag that allows you to utilize even more possibilities of web interactivity and web animation than the previous rich internet application platforms like Flash.
You can even develop games using HTML5’s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive game
<p>Good morning<br />
Many thanks for your enquiry, we will contact you if we require anything else. <br />
Best Regards<br />
Mr. J ones</p>


Once applied, this will break the text up as follows:

Good morning,

Many thanks for your enquiry, we will contact you if we require anything else.

Best Regards

Mr. Jones

As you can see, you can apply line breaks as often as you like within an existing paragraph element, so long as they add value and make the information easier to digest. You will also see that the opening and closing paragraph tags remain unchanged, with line break tags used to amend the layout of the text included within.

This is one of the examples of how HTML tags can be used to alter existing elements, which plays a key role in defining the visual layout of your web pages and content.

Horizontal Lines

Website categories where HTML5 Canvas Tag is being used

Website categories where HTML5 Canvas Tag is being used

Similarly, there are other tags that can be used within the <p> element or to further separate bodies of text on your web page. One of the most widely used is the <hr> tag, which helps to create an empty element that draws a visual, horizontal line between alternate sections of an online document. You may want to position a line between two bodies of text, for example, in order to refocus the reader or simply introduce new visual element. This is how you create such a break in HTML:

<p>Your First Paragraph</p>

<hr />

<p>Your Second Paragraph</p>


Here, the breaking between the hr characters and the forward slash highlight the construction of an empty element, while once again there is no closing tag required to complete the effect. This will create the following visual:

Your First Paragraph
________________________________________

Your Second Paragraph
Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile
78% of content developers agree that the structure is fitting for creating mobile apps, and 68% say it is suitable for designing any and all kinds of apps

Image Tags

Image tags also represent empty elements in HTML, which once again means that they do not feature a closing tag. As they only contain attributes that relate to the URL of the image that you are embedding onto the site, they are defined simply by the <img > tag at the beginning of the element. These can be placed anywhere on your website, although it is unusual to include them in existing elements such as paragraphs or headings. Here is how a typical HTML image tag will present itself:

<img src="url" alt="some_text" style="width:width;height:height;">

You should also provide alternate text for your image, which helps people to view it in the case of slow loading times or the use of screen reader. This way, if the browser cannot find an image, it will display the value of the alternate attribute to viewers. This once again uses the image tag, but includes a different set of attributes:

<img src=" wrongname.gif " alt =" HTML5 Icon" style=" width: 128px; height : 128px; " >

HTML Elements

html elements

In the previous chapter, we looked at how simple HTML tags are used to define on-page elements, while also exploring how they can be customised further by using empty elements containing image and line break tags. This helps us to understand the relationship that exists between tags and elements, and how they can be used to define different types of content on your website.

While all aspects of the HTML language are represented by a tag, for example, a defined element that includes content must have both a starting and a closing tag. So, headings and paragraphs are HTML elements because they use starting and closing tags to encapsulate and augment the relevant text. In contrast, empty elements either contain attributes or no content at all, allowing them to be used within existing elements without the need for a closing tag.

Defining HTML Elements

HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5

When using examples such as headings and paragraphs, the correct application of starting and close tags is crucial. It is the starting tag (such as <h1> or <p>) that defines the element in question, for example, while the closing tag ensures that this element is not continued across the remainder of the web page. If you fail to use the closing </ p> tag at the end of a desired paragraph, for example, the text will appear in a single block that is unsightly and extremely difficult to read.

All closing tags are identical to starting tags apart from the fact that the former feature a forward slash before the relevant characters. So in the instance of an <h1>heading, the closing tag will be </ h1> , while for paragraphs you will always use </ p> to define the break in text. This requires attention to detail while coding, and it is important to note when programming headings that the number you use (such as h1 or h2) is applied in both the starting and the closing tags.

Usage frequency of different HTML elements

XHTML element name
head
title
html
body
a
meta
img
table
td
tr
br
p
script
font
div
b
link
center
span
form
input
style
hr
strong
i
hl
li
noscript
map
area
ul
select
option
h3
h2
frame
frameset
param
embed
em
u
object
blockquote
no frames
tbody
iframe
small
h4
base
nord
 
0
10
20
30
40
50
60
70
80
90
100

Using Nested HTML Elements

At this stage, it is clear to see that HTML documents and web pages are formed by a tree of various elements, which serve as the building blocks for an array of assets. We have also looked at how these elements can be formed and used to structure online content, and we will continue this now by looking at nested HTML elements.

Just as empty elements and stand-alone tags (like <br / >can be incorporated into defined HTML elements, so-called nested elements can also be housed within content such as headings and paragraphs. These include examples such as bold and italic lettering and underlined text, while they can be applied to add personality to your content and draw the reader's eye to specific points of interest.

Bold, Italic and Underlined Text in HTML

Let’s say that you want to highlight a word within an existing paragraph element. You can achieve this by making it bold, using simple tags within the standard <p> element. Using HTML, you will program this as follows:
<p>I want <b>this</b> word to be bold. </p>
Here, the nested element has both a starting and closing tag, each of which follow a similar format to those associated with headings and paragraphs. They can be used seamlessly within existing elements, and in this instance it will produce the following results:

I want this word to be bold.
Now, let’s say that you would also like to change the typography of this word so that it is also italic. This can be achieved simply by adding another nested element, which should be coded like this: <p>I want <b><i>this</b></i> word to be bold.</ p>

As you can see, the starting and closing italic tags have simply been incorporated into the <p>element. This will now transform the content within the element so that it appears as follows:

HTML titles have always been and remain the most important HTML signal that search engines use to understand what a page is about. In fact, if your HTML titles are deemed bad or not descriptive, Google changes them
I want this word to be bold.

Of course, you may decide that you would prefer to highlight this word in a different way. You can therefore use an alternate nested element, such as underline (which is represented by the <u> and </u> tags. These tags can be applied in the same way within the <p> element, appearing as follows in HTML:

<p>I want <u>this</u> word to be underlined. </p>

In this instance, the text will appear as follows on your document or landing page:

New semantic elements that HTML5 introduced will make it much easier to read for budding developers. Instead of seeing line after line of <div> and <span> elements, more defined tags such as <header>, <footer> and <aside> will become the new standard
I want this word to be underlined.


This offers an insight into elements can be formed by tags, which in turn defines the structure of your web pages and the content that they feature. Not only this, but empty and nested elements can also be used to further define your content.

HTML Attributes

Global attributes are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements. Global attributes may be specified on all HTML elements, even those not specified in the standard

If tags are the building blocks that construct and define elements, then HTML attributes can be used to customise their characteristics (such as style, colour and language. All HTML elements have core attributes, which provide core information and are always specified within the stat tag. They tend to come in pairs, so will often appear in the following format: name=”value.“

In simple terms, the name represents the property that you want to set, while the value relates to the specific criteria that you want to incorporate.

There are a large number of attributes that can be applied to your HTML elements, but those that are most relevant to fledgling webmasters are:

The ‘Lang’ Attribute

The single most basic attribute, this defines the language of the document and its elements. It is declared using the ‘lang’ attribute, and while it is easily overlooked it has the benefit of making the content more accessible to screen readers and search engines. It will be usually presented at the beginning of the document in the following
format:

Several basic attributes types have been recognized, including:

required attributes, needed by a particular element type for that element type to function correctly

optional attributes, used to modify the default functionality of an element type

standard attributes, supported by a large number of element types

event attributes, used to cause element types to specify scripts to be run under specific circumstances


<html lang="en-US" >

Following the lang attribute, the first two letters specify the language (which is English in this instance). After the hyphen, the next two letter establish the dialect, although this will not be present for every language. It is important that you get this attribute right if you are to successfully reach your audience.

The ‘Align’ Attribute

We have already touched on the format of HTML attributes (name=”value), and the best embodiment of this occurs when you try to align the content within your elements. You may decide to center all paragraphs on a specific page, for example, with the alignment being the property that you wish to set. Subsequently, ’center’ is the value of the attribute, although you have the choice of aligning your text to the left or the right. For example:

<p align="center" >This text is center aligned</p>

Types of apps built with HTML5

Productivity
54%
Utility
38%
Consumer
35%
LOB
22%
Social networking
18%
Entertainment
17%
Lifestyle
12%
Travel
9%
Games
8%
Other
13%

This will align your <p> elements in the centre of the page, and create a uniform layout
to suit the specific nature of your website (see below):

This text is center aligned

This text is center aligned

This text is center aligned

The ‘Href’ Attribute

HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:
  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • Document editing
  • Timed media playback

If you are going to build a visible website, it is important that you incorporate both inbound and outbound links. Building a link portfolio that includes backlinks to internal landing pages is also a viable strategy, so you will need to learn how to code these in HTML.

HTML links are defined with the <a>tag, which includes the destination link along with the affiliated anchor text that will house the URL. It is the ‘href ’ attribute that specifies the site address, however, this is incorporated as part of the start tag. It is coded in HTML as follows:

<a href="https://www.google.com" >Google</a>

This clearly highlights the distinction between the starting and the closing tag, and will translate as follows on your landing page:

HTML5 isn’t controlled by one company. One of its best features lies in the fact that it is an open standard. Developers have the freedom to let their creativity flow and add as many functions and features as they possibly can

The ‘Color’ Attribute

This is another important attribute, as the use of colour can breathe life into your website while helping to create important contrasts and a strong design aesthetic. In HTML, a colour can be specified by using its name, although it is also possible to utilise an RGB or a HEX value to achieve this aim. The former option is the easiest to follow, however, while it can also be applied to headings, paragraphs and other elements on your page.

This is a style attribute, with your choice of color representing the value that you would like to set. When applying the color red to a main heading, for example, it will look like this:

<h1 style=”background-color:red”>Background-color set by using red</h1>

Once applied, this element will appear as follows on your website:

Background-color set by using red
Compared to other browsers, every Google Chrome update makes sure to include support for HTML5. Additionally, YouTube’s default player is now HTML5 and Google’s Flash ads are now being converted to HTML5

Once again, there is a clear distinction between the starting and closing tags that define the element, while this is one of the easiest attributes to apply in HTML. It also further highlights the name=”value format of HTML attributes, making the process of learning and applying these far easier throughout your website.

Test Yourself

With a basic understanding of HTML and its individual elements, the next step is to undertake some simple projects and apply your theoretical knowledge to resolve practical challenges.

Browser-based applications running HTML5 will have no problem using geolocation

In the exercise detailed below, we have featured a text except and asked to format various aspects using HTML. Use the guide and all you have learned so far to complete the challenge as you prepare to code your own website.
________________________________________

<h1>Main Header

<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>

<p>Thanks for visiting! </p>

<p>Learn more. </p>


Usage of HTML5 by developers
(by region)

North and Latin America
70%
South America
61%
ASPAC
60%
Australia
60%
Europe
59%
Africa
50%
________________________________________


Questions:

  1. Complete the header element with the correct closing tag.
  2. Make the header bold.
  3. Insert a horizontal line under the header.
  4. Use the color attribute and shade ‘Thanks for visiting’ in green
  5. Insert this hyperlink (https://www.w3schools.com/html/) into the anchor text “Learn
    more.”
  6. At the head of the page, use the name=”value format to left-align the paragraphs

Conclusion

While HTML was only created as recently as 1991 (with the first version of the coding language subsequently launched in 1995), it has quickly become a seminal tool in the design of functional and visually appealing websites. HTML’s level of influence is continuing to evolve too, with the latest iteration (HTML5) being adopted by a growing number of websites across the globe.

In this respect, learning the basic elements of HTML and how to apply them is the single most important step you will take in establishing a successful, visible and ultimately competitive website.