INTRODUCTION
A webpage, in its simplest form, is built with HTML. Among the easiest concepts to learn in computer science, HTML serves as the foundation of every webpage. While it may seem basic, every complex webpage ultimately breaks down into HTML.
In this article, we will explore HTML in detail: what it is, why it’s important, and how it forms the backbone of the web. Let’s dive in and uncover the simplicity and power of HTML.
WHAT IS HTML???
HTML stands for HyperText Markup Language. 'HyperText' refers to a system where documents contain links to other documents, while 'Markup Language' denotes a special method of writing that structures and defines the content of a webpage.
Let’s explore the term 'markup language' in more depth. To illustrate, I’ll open the Wikipedia page for 'Virat Kohli'.
Now , Right-click on the browser → select Inspect → click on the mouse pointer icon and then click anywhere on the website. Result:
What you are seeing in the above picture is what “HTML” is, here you can see couple of things,
All content in a markup language is enclosed within angle brackets (
< >). The opening tag, marked by< >, indicates the start of an element, while the closing tag, marked by</ >, denotes its end.The content inside these tags is processed or modified according to the specific tag used.
For example:
In the inital line, Virat kohlis name appears in bold letters, if you inspect this you will see:1.,1,
<b>Virat Kohli </b>
In this example, 'b' is called a 'tag.' The 'b' tag stands for 'bold,' and the combination of the opening tag <b>, the content ('Virat Kohli'), and the closing tag </b> is referred to as an 'element.' The purpose of the 'b' tag is to display the enclosed text in bold, which is why you see 'Virat Kohli' in bold letters on the website.
Example 2:
You can also see few blue coloured texts here if you inspect this :
<a href="/wiki/Cricket" title="Cricket"> international cricketer</a>
In this example, 'a' is the tag, and it stands for 'anchor.' The 'anchor' tag is used to create links that navigate to other webpages. As we discussed in the introduction, 'HyperText' refers to documents or webpages that contain links to other documents or webpages.
Additionally, the 'href' is an attribute of the anchor tag. The 'href' attribute specifies the URL of the page we are navigating to. There is also the 'title' attribute, which provides a tooltip or description of the linked page when you hover over the link.
NOTE:
There are many such tags, like <h1> for a large-sized heading and <p> for a paragraph. You can always refer to the MDN documentation to learn more, but a great way to explore is by inspecting the HTML of any webpage. For example, you can open your favorite cricketer’s Wikipedia page, inspect the elements, and experiment with the code to better understand how these tags work.
STRUCTURE OF HTML
Now that we have a basic understanding of HTML and its importance, let's explore how to write HTML and understand its structure.
To get started, create a new file and give it a name of your choice, followed by the .html extension. This indicates that it is an HTML file. For example, I'll name it index.html.
Note: It's a good practice to use a code editor like VS Code, as it offers helpful features such as syntax highlighting, code suggestions, and error checking.
The above diagram denotes a basic structure of html ,
The first line,
<!DOCTYPE html>, specifies that the document is an HTML5 document.The
<html>tag denotes the start of the HTML document.The
<head>tag contains all the metadata for the document. For example, the<title>tag within the<head>sets the title of the webpage, which appears on the browser tab.The
<body>tag contains the actual content of the webpage. This is where you define all the visible elements of the webpage.
Conclusion
HTML is the cornerstone of web development, offering a straightforward yet powerful way to structure and present content on the web. From creating bold text with the <b> tag to linking pages using the <a> tag, every element of HTML contributes to building the vast and interconnected world of websites we interact with daily.
By understanding the basics of HTML, you gain the foundation to explore more advanced web development concepts. Remember, the best way to learn HTML is by experimenting—inspect webpages, try modifying elements, and practice creating your own HTML files. This journey will lead you to unlock the full potential of web design and development.