HTML for Beginners: Building the Skeleton of a Webpage
Understanding HTML Tags and Elements
Introduction
Have you ever visited any websites in your whole life?
It could be any from applying for birth certificate to college to entrance to finding a job to matrimony sites to even applying for death certificate (dark).
If you have not then also its ok because congratulation if you are reading this blog you are already on a website, Hurray!!!
Are you noticing here something? Why INTRODUCTION is so bold and big from any other text? Why the like and comments button not falling off from their location (gravity)? And how all the images and link are embedded in a webpage?
Lets find out all answers…
Webpage : A Body
We can compare any webpage to a human body. As we know human body structure can be divided in three parts: the skeleton, the muscles, the brain.
In the same manner we can divide any web page structure in three parts: the skeleton (HTML), the muscles (CSS), the brain (JavaScript).
But we are here to understand particularly about the skeleton part that is HTML so lets begin our investigation.
HTML : The skeleton
HTML stands for “Hyper Text Markup Language“. It is used to make the skeleton part of a webpage means a website without any functionalities or design. There is two main tags in HTML head and body. In Head tag we write meta info and Body tag is used to write all we structure part.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML provides us different types of tags and elements that we can use to make basic structure of a website. Here we will see some tags and elements provided by HTML:
Tags & Elements of HTML
Heading (h1-h6)
For making an heading in HTML we use h1 tag. We can change the number like h2 or h3 according to emphasis or importance of the heading. Here is example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Tags Example</title>
</head>
<body>
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>
</body>
</html>
Paragraph (p)
We use p tag for using any paragraph in our webpage. Here is the example:
<body>
<p>This is an example of a paragraph in HTML. Paragraphs are used to denote blocks of text in a document.</p>
</body>
Image (img)
To add an image in the website, we use img tag. Here is the example:
<body>
<img src="image.jpg" alt="Description of image" width="500" height="600">
</body>
Link (href)
Do you know how we add the links in HTML? Here it is, we use something called the href tag to use any link in the webpage.
<body>
<!-- Internal link to a section within the same page -->
<a href="#section1">Go to Section 1</a>
<!-- External link to another website -->
<a href="https://www.example.com" target="_blank">Visit Example Website</a>
<!-- A section to link to internally within the same page -->
<div id="section1">
<h2>Section 1</h2>
<p>This is section one of the page.</p>
</div>
</body>
Container (div)
Sometimes we have to use multiple tags. For that situation we use div tag to containerize all the tags together. Lets see the example code.
<body>
<div>
<h2>This is a header inside a div in an article.</h2>
<p>Some more text inside the div.</p>
</div>
</body>
Few More Tags and Elements
Conclusion
In this article we studied about basics of HTML tags and web structure. We saw how a website is internally designed from heading <h1> to breaking lines <br>. We can use these tags and elements to create our basic web page structure. Further we will also study about designing and adding functionalities in our website.
Hope you enjoyed reading this, please hit the like to button for encouraging me and press the follow button to get updates on future articles.