If you want to become a webmaster and learn how to create a website, you may find the prospect of getting to grips with HTML quite daunting.

This is something that 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 personalized to introduce color, links, and variable typography to your website.

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 customizable elements within an existing page. If you intend to allow blog posts comments or the publication of user-generated content on your website, you can use HTML code fragments to enable this. These elements will enable users to emphasize 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 utilize HTML to optimize 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. 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

Before you can build out an 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:

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 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:

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

Here, the various sizes of the variable headings are 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

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.

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

Line break tags

The first examples represent the most basic HTML tags, but there are others that utilize 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 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 <be> and the forward-slash is crucial, as otherwise, the tag is not recognizable in HTML format.

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

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

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 a new visual element. This is how you create such a break in HTML:

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:

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:

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:

HTML elements

Previously, we looked at how simple HTML tags are used to define on-page elements, while also exploring how they can be customized 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 the 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.

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 strikethrough 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:

Here, the nested element has both a starting and closing tag, each of which follows 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:

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 strikethrough (which is represented by the <s> and </s> tags. These tags can be applied in the same way within the <p> element, appearing as follows in HTML:

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

This offers an insight into elements that 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

If tags are the building blocks that construct and define elements, then HTML attributes can be used to customize their characteristics (such as style, color 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 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:

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.

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

The ‘href’ attribute

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:

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 color can breathe life into your website while helping to create important contrasts and a strong design aesthetic. In HTML, a color can be specified by using its name, although it is also possible to utilize 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 the main heading, for example, it will look like this:

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.

Test it 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.  

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.

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

HTML language stats and facts

1. 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.
2. 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.
3. 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.  
4. 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.
5. 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
6. 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.
7. 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.
8. Usage of HTML5 by developers (by region):
   • North and Latin America – 70%
   • South America – 61%
   • ASPAC – 60%
   • Australia – 60%
   • Europe – 59%
   • Africa – 50%

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.