HTML Basics - Your Comprehensive Guide

HTML or HyperText Markup is a markup language that helps you define the structure of your content. It combines Hypertext and Markup language and is used primarily to design web pages using a markup language. 

While HTML Hypertext defines the link between web pages, a markup language defines the text document within the tag, which helps with the structure of web pages. HTML basic structure allows the creation and structure of paragraphs, sections, and links using HTML elements (the building blocks of a web page) such as tags and attributes (explained in later sections). 

This guide will explore the basics of HTML, including its history, what it does, the anatomy of HTML elements, and more. 

Brief History of HTML 

HTML was first created by Sir Tim Berners-Lee in late 1991 but was not released officially. It was later published as HTML 2.0 in 1995 and HTML 4.01 in late 1999, a major version of HTML.

Also known as the father of HTML, Tim proposed the first available description of HTML in the form of "HTML Tags." HTML is now used by more than 90% of all websites.

HTML has evolved over time with various versions, a constantly evolving markup language. Here is a quick/timeline of the same-

• HTML 1.0- It was released in 1993 to help share information that can be readable and accessible via web browsers.
• HTML 2.0- Released in 1995 and contains all the features of HTML 1.0 along with some additional ones 
• HTML 3.0- The version included improved features of HTML, thus offering more powerful characteristics for designing web pages.
• HTML 4.01- One of the most widely used and successful versions of HTML before HTML 5.0, which is currently used worldwide

What Does HTML Do?

HTML's basic structure has a range of different use cases. Some of these are-

• Web development 

Developers primarily use HTML code to design how a browser displays web page elements. For instance, hyperlinks, media files, and text.

• Web documentation 

Like Microsoft Word, HTML makes it easy to organize and format documents.

• Internet navigation 

Using HTML, users can easily navigate and insert links between related pages and websites, as HTML makes it easier to embed hyperlinks. 

Also, it is important to note that since the structure of an HTML document cannot create dynamic functionality, HTML is not considered a programming language. Instead, it is now considered an official web standard.

Understanding The Anatomy of HTML Elements 

In this section, we will explore the basics of HTML and the anatomy of its element in little more detail. 

The average website includes different HTML pages. For instance- an about page, a home page, and a contact page would have separate HTML files. HTML documents are files that end either with a .html or .htm extension. 

A web browser reads the HTML file and renders its content to make it easier for internet users to view it. All HTML pages have various HTML elements consisting of basic HTML tags and attributes. These HTML elements are considered the building blocks of a web page. 

For instance, a tag explains to the web browser the beginning and end of the element, whereas an attribute is used to describe the characteristics of an element.

Consider the following line of content to understand this better-

His dog is quite hungry.

If we wish this line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags as shown below-

<p>His dog is quite hungry</p>

The main parts of HTML elements are discussed in more details below-

• The Opening Tag

The opening tag consists of the element's name wrapped in opening and closing angle brackets. This states where the element starts to take effect. For example, use the start tag <p> to create a paragraph.

• The Closing Tag 

This is one of the other basic HTML tags and is quite similar to the opening tag, with only a difference that includes a forward slash before the element name. This states where the element ends. It is important to remember that failing to add a closing tag in HTML elements is one of the most common errors that can lead to strange results.

• The Content 

As the name suggests, this is the element's content, which in most cases, is just text.

The Element 

All the above three- the opening tag, the closing tag, and the content- together comprise the HTML element.

HTML Attribute 

Apart from these, HTML elements can also have attributes that mainly contain extra information about the element you do not want to appear in the actual content. Attributes generally have an attribute name and an attribute value. 

The importance of the attribute name and the attribute value is that it allows you to give your element a non-unique identifier that you can use to target it (and any other elements with the same attribute value) with style information and other similar things.

Typically, an attribute should always contain the following- 

• An equal sign should follow the attribute name.
• There should be a space between the attribute and the element name (or the previous attribute if the element already has one/many attributes).
• The attribute value should be wrapped by opening and closing quotation marks.

Nesting Elements 

Nesting refers to the process of putting elements inside other elements. In the above example, if we want to state that his dog is quite hungry, we could wrap the word "quite" in an <strong> element, which means that the word 'quite' needs to be emphasized more.

<p> His dog is < strong > quite </strong> hungry.</p>

It is important here to make sure that your elements are properly nested. Like, in the above example, since we opened the <p> element first, followed by the <strong> element, we, therefore must close the <strong> element first, followed by the <p> element. The below sequence is incorrect:

<p> His dog is <strong>quite hungry.</p></strong>

You need to ensure that the elements of simple website HTML code are opened and closed so that they are inside or outside one another. 

In case of an overlap, as shown in the above example, your web browser will keep trying to make the best possible guess at what you are trying to convey, which can lead to unexpected results.

Void Elements 

A void element in HTML is a unique group of elements that only have start tags and do not have any content within them. They also do not have ending tags and can only have attributes without any content. 

For example, <input type="text"></input> is invalid HTML. 

In HTML, the void elements are as follows:

• <base>
• <br>
• <area>
• <col>
• <hr>
• <img>
• <meta>
• <embed>
• <wbr>
• <input>
• <link>
• <param>
• <source>
• <track>

To understand this better, take the <img> element in an HTML page:

<img src="images/firefox-icon.png" alt="My test image" />

This contains two attributes. However, there is no closing </img> tag and no inner content. This is mainly because an image element does not wrap the content to affect it. Instead, its purpose is to embed an image in the HTML page where it appears.

Other HTML Elements 

HTML elements in simple website HTML code typically appear in lowercase and include a start tag, an end tag, and some content. 

Here we will discuss some of the common HTML elements you will use to mark up the text.-

1. Image (<img>)

The HTML image element is used to embed an image into the text or document. It usually requires a source attribute to render properly. An alt attribute is also needed if the image has loading troubles or the reader struggles with visual impairment.

E.g., <img src="images/firefox-icon.png" alt="My test image" />

1. Headings (<h1>-<h6>)

Heading elements in HTML represent various levels of section headings. Here <h1> is the highest section level, whereas <h6> is the least prominent or lowest one. While HTML contains 6 heading levels, <h1> - <h6>, you will commonly only use 3 to 4 only.

E.g.,        < h1>Heading 1</h1>

                <h2>Heading 2</h2>

                <h3>Heading 3</h3>

                <h4>Heading 4</h4>

1. Links

Links are an important part of the web. To be able to add a link, we need to use a simple element — <a> — "a" here is the acronym for "anchor." You can follow the below steps to make text within your paragraph into a link-

Select some text. E.g., "Dominos Highlights."

Now wrap the text in an <a> element, as below:

• <a>Dominos Highlights</a>
• Copy to Clipboard
• Give the <a> element an href attribute, as below:
• <a href=">Dominos Highlights</a>
• Copy to Clipboard
• Now fill in the value of this attribute with the web address that you want the link to:

<a href="https://www.dominis.org/en-US/about/highlights/">Dominos Highlights</a>

• Copy to Clipboard

Note- You might get some unexpected results if you do not add the HTTPS:// or http:// part, called the protocol, at the beginning of the web address. Once the link is done, click it to ensure it takes you to the right place.

1. Paragraph  (<p>)

The HTML paragraph element represents a paragraph. When placing <p></p> tags around text, you will ensure to make that text start on a new line. You will use <p> elements frequently when marking up regular text content:

E.g., <p>This is a paragraph.</p>

1. Headings (<h1>-<h6>)

The HTML heading elements represent different levels of section headings. Here <h1> is the highest section level and the most prominent, whereas <h6> is the lowest and least prominent one. While HTML contains 6 heading levels, <h1> - <h6>, you will commonly only use 3 to 4 only.

E.g.,        < h1>Heading 1</h1>

                <h2>Heading 2</h2>

                <h3>Heading 3</h3>

                <h4>Heading 4</h4>

                <h5>Heading 5</h5

                <h6>Heading 6<h6>

1. Lists

Since most of the web's content is in the form of lists, basic HTML page has special elements for these. Marking up lists in HTML always consists of at least two elements. Among the most common types of ID lists are-

• Unordered lists- As the name suggests, these are the lists where the order of the items does not matter. These are usually wrapped in an <ul> element.
• Ordered lists- Unlike unordered lists, ordered lists are the ones where the order of the items does matter. E.g., a food recipe. These are wrapped in an <ol> element.

Also, it is important to note that each item inside the lists is put inside an <li> (list item) element.

For instance, if you wish to turn the below paragraph fragment into a list-

<p> At McDonald's, we offer a range of items such as burgers, fries, and wraps as a part of the new menu…

This is how you do it-

• </p>
• Copy to Clipboard

We could change the markup to this

<p>At Mcdonald's, we offer a range of items</p>

<ul>

  <li>burgers</li>

  <li>fries</li>

  <li>wraps</li>

</ul>

<p>as a part of the new menu…</p>

Rules of HTML 

There are five important rules for coding with HTML tags.

1. HTML Tags should always be surrounded by angle brackets as in <HAIR>.
2. Most HTML tags come in pairs and surround the material they affect. This means that the first tag turns the action on, whereas the second turns it off.
3. In the basic structure of HTML, the second tag, or the "off switch" always begins with a forward slash. 
4. Since tags are always embedded, when you start a tag within another tag, you must first close that inner tag before closing the outer tag.
5. Many basic HTML tags have optional attributes that modify the tag's behavior using different values. For instance, the <P> (paragraph) tag's ALIGN attribute allows you to change the default (left) paragraph alignment. Likewise, <P ALIGN=CENTER> helps you center the next paragraph on the page.

Conclusion

The significance of HTML basic structure for the web is immense as the HTML code ensures the proper formatting of text and images so that your Internet browser may display them to users as they are intended to look. Without the basics of HTML, a browser would be clueless about how to display text as elements or load images and other elements.

Overall, simple HTML code-based websites represent several opportunities for businesses that develop online content and web applications. Several brand-new features in simple HTML programs, such as geolocation, offline browsing, semantic, and gamified experience, help in multiple business aspects. If you wish to learn more about HTML, Hero Vired-a premium LearnTech company, offers various programs in partnership with leading institutions to help you master the basics of HTML.