Exploring HTML Structure and Tags
An introduction to the basic building blocks that form the backbone of every webpage
Table of contents
- Let’s start with simple analogy:
- What is HTML?
- HTML tags and element:
- HTML Boiler Plate Code:
- Declares the document type and tells the browser to expect HTML5 syntax.
- The root element of the HTML page. The lang="en" attribute specifies that the content is in English.
- Contains meta-information about the page, such as the character set, viewport settings (for responsiveness), title, and links to external files like CSS.
- Ensures the document uses the UTF-8 character encoding, which supports most characters and symbols globally.
- This tag ensures the page is responsive and adapts to different screen sizes, especially on mobile devices.
- Sets the title of the page, which appears on the browser tab.
- <link rel="stylesheet" href="styles.css"> :
- <body> :
- Tags:
Using website with just one click is not a Magic 🔥, it’s all start with HTML . You visit various social media websites on a daily basis, you might have noticed that each one of them is different from other. The structure of every website is different like some are in the grid form, some of them looks like magazine, etc. This is all because of HTML. HTML defines the basic structure of website.
Structure refers to the organized arrangement of element, provides information about the layout of website and indicates the order of content on a webpage.
Let’s start with simple analogy:
There are various examples to understand, what exactly the HTML is? To understand thoroughly, let’s take a very common example i.e. car, I think everyone is fond of car and everyone has dream car too and because of this you will be able to feel or understand better. In car, HTML is like a chassis. A robust structure on which we can build our project.
Like a chasis, which is the layout of the car guides us that where the door will be hung and there is a fixed place for window and the specific space for the engine. In a similar way, HTML also define the structure of websites. It also shows, how different pieces of content, like headings, paragraphs, images, and links, are positioned and related to each other.
What is HTML?
Now first we will break down the HTML – like what it really means?
First one is “HyperText” – HyperText is a text which we have mostly seen in this way - [HyperText🔗]. HyperText will take you to another web page or different section of a page and it may contain pdf, multimedia, image, etc.
They are the links (often called hyperlinks) embedded with clickable text that directs you to different webpages. These links are created using HTML's <a> (anchor) tag, which is the basis of hypertext.
Now next is “Markup” – Markup means to give a “label”✍️ to something. In HTML, the use of Markup is to define the type of element/content on a webpage. <H1> tag is for heading, <p> tag is for paragraph, <a> tag is to generate links on a website. In short Markup will guide the browser, that how to display a particular content.
Last one is Language – which we simply use to communicate the information and here HTML is a coding language to make a website structure.
You might be wondering why I'm using the word "website structure" for HTML, because a basic structure alone won't make your website appealing. To make the website visually attractive, we use CSS.
HTML tags and element:
HTML Tags:
These tags are used to denote(markup) the beginning and the end of an element of a webpage. Usually, elements have opening and closing tags to define the area of that element. Opening tag contains the name of element like <p>tag – which represents the paragraph content, but Some of them only have opening tag for example <img> to insert image and <hr> is used to for horizontal rule.
<p> Paragraph text is here. </p>
HTML Element:
HTML element is the collective term we use for opening tag, content and closing tag.
HTML Attributes:
HTML attributes give the additional information about tags. Opening tag is use to define the attributes. Let’s take an example of <a> tag which is used to create hyperlinks.
<a href="http://google.com" target="_blank"></a>
Here “href” – hypertext reference is the link/destination where <a> tag will direct you. The <a>tag also tag some other additional attribute like target=”_blank” which means the hyperlink will be open in a new separate tab.
HTML Boiler Plate Code:
It is important part of all the HTML file. Generally, we use the same code in the starting of every HTML file. Boiler plate code – basic code for any webpage which include the declaration of tags, metadata, title about the page. Here we have shown the boiler plate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
<!DOCTYPE html>:Declares the document type and tells the browser to expect HTML5 syntax.
<html lang="en">:The root element of the HTML page. The
lang="en"attribute specifies that the content is in English.<head>:Contains meta-information about the page, such as the character set, viewport settings (for responsiveness), title, and links to external files like CSS.
<meta charset="UTF-8">:Ensures the document uses the UTF-8 character encoding, which supports most characters and symbols globally.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:This tag ensures the page is responsive and adapts to different screen sizes, especially on mobile devices.
<title>:Sets the title of the page, which appears on the browser tab.
<link rel="stylesheet" href="styles.css">:Links an external CSS file (for styling) to the document. You can remove this line if you don't use external styles.
<body>:Contains the content that is visible on the webpage, like headings, paragraphs, images, etc.
Tags:
Heading Tag (H1-H6):
Heading tag ranges from <H1> to <H6> and are generally used to display text, <h1> holds the highest importance, while <h6> holds the least importance.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph Tag (<p>):
Paragraph tag is used to define a paragraph. It tells the browser that the content inside the tags is to be displayed as a paragraph on a webpage. It is block level element by default.
<p>Lorem ipsum dolor sit amet.</p>
Image Tag (<img>):
Image tag is used to insert an image on webpage. The “src” attribute is must for this tag because it gives path of the image. We also generally use the “alt” attribute, which is the alternative text for the image, if it is not displayed properly or it is also helpful for visually impaired persons because it gives information about image. It is inline element by default.
<img src="./pngwing.com.png" alt="image" >
Anchor Tag (<a>):
We have already discussed this earlier in the article. It redirects us from the existing page to the another page or specific section of the same page, an email sender, etc. A common attribute which we generally give is “target” which tells browser whether to open this link in same tab or on another tab. If it’s value is “_blank ” than it will open in another tab. It is inline element by default.
<a href="http://google.com" target="_blank"></a>
Division Tag (<div>):
By using this tag, we can define a container element, which allow us to combine various element in a single container. It helps in organize the page content. It is a block level element by default and It adds a line break, before and after the content.
<div>
<h2>This is a Div Container</h2>
<p>The `<div>` tag is used to group HTML elements together for styling or layout purposes.</p>
</div>
Span Tag (<span>):
The <span> tag in HTML is an inline container, used to group small pieces of text or other inline elements for styling or scripting purposes. Unlike block-level elements, it doesn’t create a new line.
<body>
<p>This is a <span class="highlight">highlighted</span> word in the sentence.</p>
</body>
Ordered list (<ol>):
An ordered list is used when the order of the content is important, such as in a recipe or a set of "steps to follow," like we did in school’s practical lab. To create an ordered list, we use the <li> tag to define the different points in the list.
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
Unordered list (<ul>):
It is used when we don’t emphasize the order of events, it also use <li>tag to list the different option of list.
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Table Tag (<table>):
It uses to create a table. Here we use the different tags which will help us to create our desired table.
Tags are:
<tr> - generates one row of the table
<th> - it defines the table header
<td> - it defines the table data
<body>
<h2>Sample Table</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>shatru</td>
<td>30</td>
<td>Jaipur</td>
</tr>
<tr>
<td>chenu</td>
<td>25</td>
<td>Jodhpur</td>
</tr>
<tr>
<td>shyam</td>
<td>22</td>
<td>kota</td>
</tr>
</table>
</body>
Tell Us What You Think: Your Feedback Matters!
This article must have benefited you, even if just a little; at least you would have understood that the basic building block of a website is HTML and how it works.
If you liked it or not, please make sure to provide feedback. If you need any help from my side, feel free to let me know in the comment section.