The Timeline of Web Technologies
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?
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
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
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:
You can put text or code here, like a
Google Analytics tracking code for
The main body of your page goes
here. Fill it with text and images!
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:
You can put text or code here, like a
Google Analytics tracking code for
<h1>My First Heading</h1>
<p>Welcome to mywebsite!</p>
<p>contact information could go here</p>
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:
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
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.
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
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:
<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:
Many thanks for your enquiry, we will contact you if we require anything else.
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.
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>
<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 Second Paragraph
Your Second Paragraph
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; " >
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
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
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:
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:
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:
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.
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
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):
The ‘Href’ Attribute
- 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:
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:
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.
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.
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.
<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
- Complete the header element with the correct closing tag.
- Make the header bold.
- Insert a horizontal line under the header.
- Use the color attribute and shade ‘Thanks for visiting’ in green
- Insert this hyperlink (https://www.w3schools.com/html/) into the anchor text “Learn
- At the head of the page, use the name=”value format to left-align the paragraphs
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.