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.

The Timeline of Web Technologies:

1991 – HTML 1994 – HTML2 1996 – CSS1 + JavaScript 1997 – HTML4 1998 – CSS2 2000 – XHTML1 2002 – Tableless Web Design 2005 – AJAX 2009 – HTML5

Where is HTML used? Popular websites using HTML:

Wikipedia.org Google.com YouTube.com Facebook.com Yahoo.com Baidu.com Reddit.com

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.

Read more: View HTML & CSS [Cheat Sheet] 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:

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. Main body: This occupies the largest area on a web page. It contains content specific to the page being viewed. 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 example. The main body of your page goeshere. 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 example.

My First Heading

Welcome to mywebsite!

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.

Leading HTML Tags technologies Share on the web

HTML5 Canvas Tag – 0.27%
HTML5 Audio Tag – 0.29%
HTML5 Video Tag – 0.69% HTML5 SVG Tag – 3.1%
HTML5 Embed Tag – 6.54%
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

,

,

,

,

or

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:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

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

(h1 is shown bigger than h2 and so on.) (h1>h2>h3>h4>h5>h6)

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

. 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

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:

Your First Paragraph

Your Second Paragraph

Your Third Paragraph

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

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
tag, which can be inserted into existing

elements to break up text and potentially highlight important pieces of information. The single space between the character and the forward-slash is crucial, as otherwise, the tag is not recognizable in HTML format.

Here is an example:

Good morning
Many thanks for your inquiry, we will contact you if we require anything else.
Best Regards
Mr. J ones

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

Good morning,

Many thanks for your inquiry, 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 Similarly, there are other tags that can be used within the

element or to further separate bodies of text on your web page. One of the most widely used is the

---

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:

Your First Paragraph

---

Your Second Paragraph

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

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

or

) 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

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

element. Using HTML, you will program this as follows:

I want this word to be bold.

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:

I want this word to be bold.

(This in the above sentence is shown 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:

I want this word to be bold.</ p> (This is shown italic.) As you can see, the starting and closing italic tags have simply been incorporated into the

element. This will now transform the content within the element so that it appears as follows:
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 strikethrough (which is represented by the and tags. These tags can be applied in the same way within the

element, appearing as follows in HTML:

I want this word to be strikethrough.

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

I want this word to be strikethrough.

(This is shown strikethrough.)

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.

For example:

This text is center aligned

This will align your

elements in the center 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 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 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:

Google

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

Google

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:

Text color set by using red

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

Text color set by using red
(This text is shown red.)

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.

Read more: Search for HTML5 Canvas [Cheat Sheet] Try 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.

Main Header

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

Thanks for visiting!

Learn more.

Questions:

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 (w3schools.com/html) into the anchor text “Learn more.” At the head of the page, use the name=”value” format to left-align the paragraphs.

HTML language stats and facts 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. 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. 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 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. 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. 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.

By Artem minaev.