A Beginner Guide to HTML elements: Understanding the Building Blocks of a Webpage
Sourabh Bhatt
In this short article, I will help you know the bare minimum thing to understand HTML elements.
As we all know, HTML (Hyper Text Markup Language) is the language of the internet. Without it, one can't even imagine a single website being built. And as a developer, it is mandatory to master HTML.
HTML is quite easy to learn and play around.
All the magic of HTML lies in CSS and JS. I will talk more about CSS and JS in my upcoming blogs, but in this blog, let's start with the HTML elements🤞🏻:)
What is the meaning of HTML elements?
It becomes very necessary for a beginner to learn HTML and its elements in the era of software engineering. And if you don't know what exactly an HTML element is, then don't worry, read more in this article to understand the perspective.
Basically an HTML element is everything that we use in our HTML.
From the first opening line of the "<html>" tag to the last closing line of the "</html>" tag, everything inclusive of both tags are known as HTML elements.
So, I hope now you can understand. Everything in the HTML that starts with an opening tag and ends with a closing tag, is called an HTML element.
How many HTML elements are there?
Well in HTML there are many tags and elements. And there is no developer who exists in the world who has knowledge of all HTML elements. This is not even practical to do. Also, this is not even mandatory to learn.
In case one might need a new tag or elements, they can just simply search or MDN docs or on google:)
Mandatory HTML elements
In order to get started in HTML, there are a few HTML elements that we have to understand. These are very easy but mandatory to use.
All HTML elements follows a simple rule. If it started then it have an end:) But but but , there are exceptions also:))
<h1>Heading1</h2>: This is the heading tag in HTML. This is the tag that is highly used by hashnode
This is the first heading tag with that consists of 6 levels of heading. One can use them according to their preference on their website.
%[https://codepen.io/sourabh-bhatt/pen/WNKjQER]
<p>Paragraph</p>: This single "<p>" tag, helps websites to write paragraphs in the best possible way.
%[https://codepen.io/sourabh-bhatt/pen/MWBmaOr]
<a href="Hyper Link Here"></a>: With "a" tag in HTML, we can add hyperlinks and can jump from any one page to another page.
%[https://codepen.io/sourabh-bhatt/pen/rNrmOJv]
<img src="" alt=""></img>: The image tag "img", helps to give the source URL of any image file to the website. It can be relative or absolute URL. It is used for both.
%[https://codepen.io/sourabh-bhatt/pen/rNrmOJv]
<li>: Lists itself have many types. Ordered, unordered, descriptive, etc. It just provides better readability to the website.
%[https://codepen.io/sourabh-bhatt/pen/rNrmOqr]
Well, this is just an introductory article to make you understand that one can't write about every tag available in HTML.
If you wanna learn about more articles then do refer:
That's all for today. Thanks for reading; bye 👋🏻
Subscribe to my newsletter
Read articles from Sourabh Bhatt directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Sourabh Bhatt
Sourabh Bhatt
Hey Everyone, I'm a 2nd-year student in the department of Mathematics at Maharaja Agrasen College, University of Delhi. I am working as a Data Science Intern at iNeuron.ai, where I am building things by learning them. I'm a learner btw:)