Statistics show that most internet users have wondered about the technology used to create such responsive and functional interfaces. Hyper Text Markup Language (HTML) is essentially the foundation of all websites across the internet. The process of writing and maintaining this markup language is called web development.

HTML is a Markup language used by developers to structure the contents of a webpage or website. HTML Elements and Tags are used to define the layout of a web page. 

Other technologies can be used in working with HTML and web development, such as CSS (Cascading Style Sheets) which is used to beautify or design the webpage and JavaScript used to add functionality to a web page. We can think of HTML as the backbone of webpages and without it, there would be no way to create any web page on the internet.

In this article, we will explain the basics of HTML and how it is used in web development to create functional web pages.

Viewing the HTML Source Code of a Webpage

A source code is simply all the content of an HTML document that makes the web page look exactly the way it does. Take a minute from reading this article and go to your favourite website or any website that comes to your mind. Right-click on any part of the webpage and select the option “View Source Code”.

This pops up a window displaying a bunch of weird combinations of characters right? This combination of characters is the HTML code that makes it possible for that webpage to be displayed in the web browser and look exactly the way they do. Our aim in this article is for you to understand how HTML and the web work together.

Creating HTML Documents

An HTML document can be created with a text editor. An HTML text editor is a tool used to write and edit HTML code and content in an HTML document. 

Various HTML editors offer developers convenience and organization in editing HTML documents. An HTML document is created by appending the “.html” extension to the file name while saving the document. 

For example, if we want to create an HTML document with the file name ”Hello”, we append the extension like this ”Hello.html”.

HTML Web Components

The importance of HTML cannot be over-emphasized because webpages are made by creating HTML elements in an HTML document. The nature of HTML’s structured content makes the source code easier for other web developers to understand and make changes in the source code.

An HTML element is created by specifying the opening or start tag, the content and the closing or end tag. This is an example of a few HTML elements:

<h1> My first Heading </h1>

<p> My First Paragraph </p>

In the example, <title>, <h1> and <p> are the opening HTML tags. </title> , </h1> and </p> are the closing tags.

The text in between the opening and closing tags is the content of the HTML element.

HTML Tags

There are various HTML tags used to define how the web browser displays the contents of the HTML document. Examples of HTML tags are the paragraph tag <p>, the heading tag <h1> and the image tag <img>. 

HTML tags are usually paired with the start tag expressed inside angle brackets like this: <tagname> and the end tag is denoted by a forward slash “/” before the tag name like this: </tagname>

The HTML tag determines how the content will be represented in the web browser. In the example above, the <h1> tag tells the web browser to display a heading with the text “My First Heading” and the <p> tag tells it to display a paragraph with the text “My First Paragraph”.

There are six levels of headings in HTML starting from <h1> to <h6> with <h1>, the largest heading and decreasing in size till <h6>, the smallest heading. It is important to always remember to add a closing tag at the end of the content.

There are two list tags namely:

• Ordered List with the start tag as <ol>, the list items enclosed in start and end list item tags <li>List Item</li> then the end tag as </ol>. For example:

<ol>

<li> List Item 1</li>

<li>List Item 2</li>

</ol>                                    

This displays a numbered list in the browser with the list items as:

1. List Item 1
2. List Item 2

• Unordered List starting with <ul> tag, the list items enclosed in the start and end list item tags <li> List Item </li> then the end tag as </ul>. For example:

<ul>

               <li> List Item 1</li>

               <li> List Item 2</li>

</ul>

This displays a bulleted list in the web browser with the list items as:

• List Item 1
• List Item 2

However, you have to note that some tags do not require a closing tag. They are called self-closing or empty tags, examples are the image tag <img>, the link tag <a> and the input tag <input>.

The <img> tag is used to display images on a webpage by specifying the source and alt attributes.

The link tag <a> is used to navigate between web pages and/or other content on the same page by specifying the href attribute.

There are other empty tags used for formatting in HTML. For example:

The break tag <br> is used for inserting line breaks and the horizontal rule tag <hr> is used to insert a horizontal break.

HTML Elements

HTML elements are parts of the HTML document that use HTML tags to tell the web browser exactly how to display the contents of the webpage. 

An HTML element is usually represented by an opening tag and closing HTML tags with the content placed in between them. From the example above, this line of code:

 “<h1> My first heading</h1>” is an HTML element.

HTML and Web Development

Let’s see more on HTML and web development.

A Typical HTML Document.

This is the typical skeleton of an HTML document in HTML and web design:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8”>

<title>Page Title</title>

</head>

<body>

HTML Elements

</body>

</html>

HTML Structure 

A standard HTML document is made of a collection of specific HTML elements that let the web browser know exactly how to display the content to the user.

It starts with a <!DOCTYPE html> declaration that lets the browser know the HTML document is written in HTML5 which is the latest version of HTML currently.

The <html> element contains all the content of the HTML document that can be in the two HTML elements that act as sections nested in it. These two sections are the <head> element and the <body> element. <html> denotes the start of the HTML document and </html> denotes the end of the document.

Any content of the <head> element is not visible to the user. It contains Meta information which are properties of the HTML document that are logged to the web browser for accessibility of the webpage. It is used by search engines to index the content of a web page because it provides additional information about the webpage to users and web services.

The <title> element specifies the title of the web page; it is shown at the top of the browser window. It starts with the start tag <title> and ends with tag </title>

The <meta> element specifies features of the document for the web browser. It is also an example of a self-closing tag. “<meta charset=”UTF-8”> denotes that the document uses UTF-8 character set.

By now you may have noticed HTML elements being placed inside other HTML elements, this is called “Nesting” and is indicated by indentation to make the code a lot easier for developers to work with HTML and the web. We will talk more about nesting later in this article.

The <body> element contains all the visible content of the webpage. All the HTML elements that make up the web page are enclosed in the body element. As shown in the skeletal code above.

Nesting Elements 

Nesting refers to the act of enclosing HTML elements inside other HTML elements. Nesting is usually represented by indentation so the developer can know nested elements easily by just the visual representation.

While nesting elements, you must note the parent element (the element that contains the nested element) and the nested element. For example, in the skeletal code above, <html> is a parent element and <body> is a nested element because it is inside the HTML element. The closing tag of a nested element should always be written before the end tag of the parent element to avoid errors.

HTML Attributes

HTML elements can also have attributes, for example in the following HTML element:

<p id = “block”> This is a paragraph. </p>

Id=”block” is an attribute of the paragraph tag.

Attributes are not visible on the web page but are created to target elements either for adding styling with CSS or functionality with JavaScript. 

There should be a space between the element name and the attribute and if there are multiple attributes, they should be separated by spaces too.

Key Points

• HTML is the backbone of every website. Understanding HTML in Web Technology is important for structuring and defining how content would appear in the web browser.
• HTML Elements are used to specify content on the HTML document and can be nested within other elements.
• Empty or self-closing tags in HTML cannot have any HTML element nested in them.
• Tags in HTML are not case-sensitive, although it is a good convention to write HTML code in lowercase.
• There would be no website or web page on the internet without the use of HTML.

FAQ

1. What is HTML in Web Technology?

Answer: HTML which stands for Hyper Text Markup Language is a markup language that is used to structure content on web pages by creating and editing HTML elements in an HTML document.

2. How does HTML work with the web?

Answer: HTML documents are created by specifying HTML elements which tell the web browser how to display the content of the elements. HTML tags are used to define the layout of a particular web page.

3. How do I start HTML and web design?

Answer: You can start learning HTML and Web design by practicing the basics of HTML as taught in the article and searching for more resources. It may seem overwhelming at first after looking at a few but you can learn by taking it one day at a time while practicing.

4. What is HTML and how is it used in Web Development?

Answer: HTML is the standard markup language used in the development of web pages and is the foundation of all websites that exist. HTML gives the web browser-specific information on how to display the HTML element content to the user.

QUIZ

• What does HTML stand for?

1. Hypertext Markup Language
2. High Terminal Machine Language
3. High Terminal Markup Language
4. Hyper Terminal Markup Language

Answer: A

• Which of these is the largest heading in HTML tags?

1. h3
2. h5
3. h6
4. h1

Answer: D

• Nesting is the act of enclosing HTML elements inside other HTML elements.

True or False

Answer: True

• There are ______ levels of headings in HTML.

Answer: six