There are several languages used to make a website, but I have seen that the making of every website starts by using HTML. This makes me curious about the importance of HTML.
The reason for using the HTML to make a website is that it is a markup language that contains the content of the web page in tags. These tags are only understood by the browser to render it. Moreover, HTML generates the structure of a website by making the blocks such as header, footer, and columns.
It is impossible to make a webpage without using HTML, and we will discuss some of the factors which tells you why we use HTML for every webpage.
What Is HTML?
HTML is known as Hypertext Markup Language, which is used to make web pages. HTML is a representation of content on websites. It uses markups which are known as tags. Whenever you have to write a text in HTML, you have to write that inside the markups or tags.
Suppose you want to write headings, then you need to use tags of headings so that browser can understand it is heading. For example, <h1>This is a heading<h1>. <h1> is a markup here or you can say a tag.
Moreover, HTML uses hypertext which is known as links in normal language. These links when clicked, take you to the other pages of the website, another section of the same webpage or another website on the internet. For example, if you click any of the nav menu tabs that will take you to another page.
HTML Is The Language Of Browsers
You have seen that when you type a website address or a URL in Chrome, the whole website opens in front of you in the form of images, text, headings and videos, etc.
That website is written in HTML, which uses markups and is interpreted by browsers. Browsers can only understand the HTML to render the page. In other words, browsers convert the HTML tags into human-readable form.
For example, If you would like to see the HTML for a web page rendered by the browser. You can right-click on that webpage and click on view source.
HTML Is The Base Of All The Languages
We have seen that many languages come after the invention of HTML, such as JavaScript, Python and Ruby, etc. All of these languages are incomplete without the use of HTML. In other words, these languages depends on HTML.
If you would like to learn JavaScript or Python language, you have to use HTML because HTML creates a base or structure of a website or an app. For instance, if you don’t have the structure, you will apply other languages’ functionality.
I want to give you one more example. Suppose you are making an app where you have to tell the user that it is a button or an image, and that can be only possible by using HTML. So making a base of any website comes first and style or functionality comes after that.
HTML Is The Skelton Of A Webpage
HTML makes a skeleton of a website by assigning the blocks or sections. HTML makes the blocks so that you can represent the content in various ways to the website’s visitors.
<head>
To create a Skeleton, first of all, HTML declares a web page’s information in the head section that will have title or meta tags. You can link your external CSS file here.
All the information inside the <head> element will be invisible to the website visitors.
The code for that the head section:-
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <!-- This will link the CSS file with html document --> <title>HTML page</title> </head>
<body>
After that, to create the document’s body, it uses <body> element, which contains all the other sections such as header, main or footer of the website.
The <body> element represents main element of the website.
The HTML code for this is:-
<body> <main> </main> </body>
<main>
The <main> element contains the website’s main content, which is visible to the visitors. element contains other child elements which define the sections such as header, footer and sections.
The HTML code for this is:-
<main>
<header>
</header>
<section>
</section>
<footer>
</footer>
</main> <header>
The <header> element in HTML contains the navigational information on the form of nav bar where a user can navigate to the other pages of the website. It also contains the logo of the website.
The HTML code for this is:-
<header>
<a href="">LOGO</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header> <section>
The <section> element represents a specific block or a section of the webpage. you can make sections such as welcome section, a product information section with the help of columns and a contact form section.
For example I have made a contact form section. The HTML code for this is:-
<section id="contactus-form">
<h2>Contact Us</h2>
<form action="">
<div>
<input type="text" placeholder="name">
</div>
<div>
<input type="email" placeholder="email">
</div>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</form>
</section> <footer>
The <footer> element represents the last block of a webpage which contains the other links of the website.
The HTML code for this is:-
<footer> <div><p>@copywrite 2021 easycodingtips.com</p></div> <div><a herf="">Policy</a> <div><a href="">Contact Us</a> </footer>
The webpage with some basic structural elements which we have used before will look like this:-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<!-- This will link the CSS file with html document -->
<title>HTML page</title>
</head>
<body>
<main>
<header>
<a href="">LOGO</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Contact Us</h2>
<form action="">
<div>
<input type="text" placeholder="name">
</div>
<div>
<input type="email" placeholder="email">
</div>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</form>
</section>
<footer>
<div><p>@copywrite 2021 easycodingtips.com</p></div>
<div><a herf="">Policy</a>
<div><a href="">Contact Us</a>
</footer>
</main>
</body>
</html> HTML Connects The Webpages
Bofore the invention of HTML it was very hard to navigate for the web users. The interaction of webpages was impossible without HTML.
HTML brings the concept of navigation with with the help of hyperlinks. The hyperlinks are represented by <a> tag of HTML and these are known as anchor tags. These anchor tags uses href attribute which contains the url or address of the other website where visitor will navigate once clicked on that anchor tag.
These hyperlinks also make it possible to create pages inside the website so that we can add more information in one website. Once you create the pages you can link each other with the hyperlink concept.
