Hey everyone, we are back with an interesting article where we will learn about the basic tags in HTML to build webpages. These basic tags are essential that tell the browser how to display the content over the webpages.
We all know that there is a specific structure of HTML tags and elements to make a website. We used Tags to specify the content, Tags are nothing but some instructions that are enclosed in angle braces (< >). HTML tags contain three main parts: an opening tag, content, and closing tag.
But some HTML tags are unclosed tags. When you are working with HTML tags always remember to include closing tags. We will discuss all these things. At the end of the article, you’ll have enough knowledge to put together a basic webpage.
Let’s get started.
✅ Quick Brief about HTML Tags
An HTML tag is nothing but a special word surrounded by angle brackets. For example, If we want to use a paragraph somewhere, we just need to use <p>CONTENT</p>. When you are working with HTML tags always remember to include closing tags. If you forget to close the tag, the browser applies the effect of the opening tag until the end of the page.
We have 5 essential tags that define the structure of a webpage.
- <html></html>
- <head></head>
- <title></title>
- <body></body>
- <footer></footer>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Title here</title> </head> <body> .... </body> <footer> .... </footer> </html> |
Now let’s look at those tags:
1. <html></html> – the root element
Every web page starts with the html tags, it is the root element of the structure. Everything would be added inside the html tags. To create a page you need to write opening <html> and closing </html> tags. And all the other tags in between these tags only get considered by the browser.
1 2 3 | <html>CONTENT HERE</html> |
2. <head></head> – the document head
The head tag contains the information related to the web page. It doesn’t show on the web page, but it contains a lot of information that can be used for other work. It contains the tags that can be put inside the head tag such as:
- <meta>
- <title>
- <script>
- <link>
- <style>
3. <title></title> – the page title
It contains the title of the page. The title is displayed on the Browser’s title bar (whatever you have written inside the tags), as well as in bookmarks, search engine results, and many other places.
1 2 3 | <title>YOUR PAGE TITLE</title> |
4. <body></body> – the page content
This tag is used to display all the information or data, i.e, text, images, hyperlinks videos, etc., on the webpage to the user. Every web page should have one body tag and all the content like text, images, hyperlinks videos, etc., are enclosed between this tag.
1 2 3 4 5 | <body> All content goes here </body> |
5. <footer></footer> – the bottom of page
We can also show some important information or links in the footer tag. Every website has the footer region where they mentioned the contact info or any other info.
For example:
1 2 3 | <footer>Copyright 2022. All right reserved</footer> |
✅ Other basic tags
Some other useful tags to make a proper website.
1. Heading Tags <h1> … <h6>
So, this is one of the most used tags on any webpage. It can be used in different ways like any section headings, subheadings, etc.
HTML supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most important headings, h2 is for less important subheadings, and so on. h6 would be the lowest font size among others.
1 2 3 4 5 6 7 8 | <h1> content </h1> <h2> content </h2> <h3> content </h3> <h4> content </h4> <h5> content </h5> <h6> content </h6> |
2. Paragraph tag <p></p>
This tag is used to display the paragraphs on the website. The browser display paragraph in the vertical with some gap, which looks nice to show the content text.
We can also use a few other tags inside the <p> tag. Like, if you want to start a new line then you can use the <br> tag (break line), it looks neater and well structured.
1 2 3 | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p> |
3. Anchor tag <a></a>
The anchor tag is the most useful tag of the website. This tag can let you create a link, which can be redirected to an internal or outbound link. The content can be either on your own site or on another site.
You have to provide the URL inside the href attribute. You can use this tag in multiple ways, for example – used as a button element, or used to refer to some other websites.
1 2 3 | <a href="http://www.example.com/">Visit this website</a> |
5. Image tag <img>
This image lets you insert the image on the web page. To insert an image, you first upload the image to your web server, then use a <img> tag to reference the uploaded image filename in the src attribute. Here’s an example:
1 2 3 | <img src="IMAGE_URL" alt="image" > |
The alt attribute is important to add to the image tag, it would be helpful if the image is not loaded due to any reason. So, the browser will display the alternative text.
6. Container <div></div>
It is used to add more content to the page. We can use this tag in many different ways, like the sidebar, footer, header, main content, etc.
By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This can depend on your page layout that how you use it as a small, large container.
Here’s an example that uses a div to contain the content for a sidebar on the page:
1 2 3 4 5 6 7 | <div id="sidebar"> <h2>Sidebar Heading</h2> <p>Sidebar paragraph</p> <p>More sidebar text</p> </div> |
7. Inline container <span></span>
The span element is similar to the div element, it also adds structure to the page. Only the difference is, that the span inline element and div is the block-level element.
- Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
- Inline elements, such as span, a, and img, are designed to hold smaller pieces of content – such as a few words or a sentence, within a larger block of content. Adding an inline element doesn’t cause a new line to be created.
- Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.
For example:
1 2 3 4 5 | <p>Hello everyone <span class="some_style">How are you!</span></p> <div>Hello everyone <span class="some_style">How are you!</span></div> |
8. <!DOCTYPE>
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It tells the browser what version of HTML the document is written so that the browser knows what to expect.
1 2 3 4 5 6 | <!DOCTYPE html> <html> ... </html> |
✅ Bringing it all together – example
Now that you’ve learned the basic main HTML tags, let’s put them all together in a single web page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <title>Portfolio Website</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Resume for company"> <meta name="keywords" content="skills,projects,org,contact"> <link rel="stylesheet" href="/style.css"> </head> <body> <h1>Portfolio</h1> <div id="mainContent"> <p>Hi, I have great experience in <a href="https://example.com/index.html">Web development</a>, I have worked on many projects</p> <p> I have responsible career opportunities</p> <img src="sample.jpg" alt="sample"> </div> <div id="sidebar"> <h2>Personal Projects</h2> <p>Having the responsibility to handle all the <span class="product">Frontend activities.</span></p> </div> </body> </html> |
So, as you saw we made a webpage by using the main basic tags of HTML. These basic tags are much sufficient to start making your first basic website template. Do lots of practice. Believe me, it is easy.
For more such content keep following and subscribing to this page. Please reach out to us in the comment section or drop us an email, and we will surely help you in clearing doubts.
Thanks😉 Happy Learning.
Also, read
- Learn SASS for CSS – A Complete Guide to CSS Preprocessor
- How to implement tooltips using CSS? Why you should use it?
- Explain For, While, Do-While Loops in JS and more
It is pretty useful
Thank you
fantastic post, very informative. I wonder why the other experts of this sector do not notice this. You should continue your writing. I am confident, you have a huge readers’ base already!
Its great as your other blog posts : D, thankyou for putting up.
Really enjoyed this blog.Much thanks again. Awesome.
I like this site very much so much excellent information.