The importance of HTML tags will be realized while building your pages. If you figure out how the tags work, you’ll have sufficient information to assemble a basic page.
HTML tags are unique words enclosed by angle brackets (< >) that characterize different kinds of content on a page. Our web browser utilizes these HTML tags to choose how to deliver or show the following content on the screen. Such as <p>, <h1>, <img>, and so on.
If the Web browser thinks of <p> tag (paragraph tag), then, at that point, it comprehends that the content coming next after it before shutting the tag is a section, so the program joins all the default styles with it and shows it on screen.
This guide will shed some light on some basic HTML tags list that would be useful if you have just started with the HTML.
10 Important HTML Tags List with Examples
Basic HTML Tags
Below is the list of 10 basic yet essential HTML tags you’ll have to be familiar with while building your web pages. Once you figure out how these 10 types of HTML tags work, you’ll have sufficient information to assemble an important page.
1. <html> … </html> – The root component
The starting point of all web pages is with the HTML component. It’s also named the root element since it’s at the root of the tree of elements that make up a website page.
The HTML component sits at the root of the tree of components in a page. To make the HTML element, you have to compose an opening <html> tag and then </html> tag. All the other things on your page then go between these two tags:
<html>
(all other page elements go here)
</html>
2. <head> … </head> – The record head
The head element consists of the data related to the webpage instead of the page content itself. The head element could be filled with various elements, for example, title a link, which you can use to add templates and favicons to your page meta, for determining things like character sets, page depictions, and catchphrases for web indexes script, for adding JavaScript code to the page.
Here is a run-of-the-mill head component:
<head>
<title>The Adventures of My Cat Lucky</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<meta name=”description” content=”The adventures of my favorite pet cat Lucky, with stories, pictures, and movies.”>
<meta name=”keywords” content=”cat,Lucky,pet,animal”>
<link rel=”stylesheet” type=”text/css” href=”/style.css”>
<link rel=”shortcut icon” href=”/favicon.ico”>
</head>
3. <title> … </title> – The page title
The title element consists of the title of the page. The title is shown in the web browser’s title bar (the bar that appears at the top of the window) and in bookmarks, search engine websites, and numerous different spots. The title ought to portray the page’s substance briefly and precisely. This is to give each page of your site its unique title.
Example below;
<title>The Adventures of My Cat Lucky</title>
4. <body> … </body> – The page’s substance
The body element shows up after the head element on the page. It should incorporate all the substance of your page, such as text, pictures, etc. All pages have one body element, except for frameset pages. It also consists of frame elements.
Below is the general format of the body element:
<body>
(all page content goes here)
</body>
5. <h1> … </h1> – A part heading
The headings section lets you separate your page content into the readable form of chunks. Similar to headings and subheadings, a heading works similarly in a book or a report. There is six support heading elements in HTML that are h1, h2, h3, h4, h5, and h6. h1 is considered the main headings, h2 is for less significant subheadings, and so on. Commonly you won’t have to utilize more than h1, h2, and h3, except if your page is extremely lengthy and complex.
Example of h1;
<h1>The Adventures of my cat Lucky</h1>
6. <p> … </p> – A section
The p element allows you to make sections of text. Most web browsers show sections with an upward gap between each passage, nicely separating the text. While you can make “paragraphs” of text just by utilizing <br> tags to embed blank lines between chunks of text, it’s wiser to utilize everything considered. In addition to being neater, it gives the web browser, search engine, and other non-humans a superior thought of how your page is organized.
Example of Paragraph;
<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!</p>
7. <a> … </a> – A link
A link is one of the main elements in a page, and the element allows you to connect to other content. The content can be either on your site or on another site. To link, you wrap <a> and </a> tags around the substance you need to use for the connection and supply the URL to link to in the <a> tag’s href characteristic.
This is the way to make a text that connects to www.example.com:
<a href=”http://www.example.com/”>Visit this great website!</a>
8. <img> – An image
The IMG element allows you to embed pictures into your site pages. To embed a picture, you initially transfer the picture to your web server, then, at that point, utilize a <img> tag to reference the transferred picture filename.
Below is an example:
<img src=”myphoto.jpg” alt=”My Photo”>
9. <div> … </div> – A square level holder for content
The div element is a general container you can use to add more format to your page content. For instance, you could group a few paragraphs or headings that fill a comparative need together inside a div element. Ordinarily, div elements are utilized for things like:
- Page headers and footers
- Sections of content and sidebars
- Featured boxes inside the text stream
- Area of the page with a particular reason, for example, advt. spots
Adding class and id credits to your div elements allow you to utilize CSS to style and position the divs. This is the reason for making CSS-based page formats.
Below is an example that utilizes a div to contain the substance for a sidebar on the page:
<div id=”sidebar”>
<h1>Sidebar Heading</h1>
<p>Sidebar text</p>
<p>More sidebar text</p>
</div>
10. <span> … </span> – An inline container for content
The span element is like a div that adds construction to your content utilized. The thing that matters is that div is a block-level element, while span is an inline element:
Block-level elements, for example, div, h1, and p are intended to hold somewhat enormous or independent blocks of content, like text passages. A block-level element generally begins from a new line.
Inline elements, like <span>, <a>, and <IMG>, are intended to hold smaller pieces of content – like a couple of words or a sentence – inside a large block of content. Adding an inline element doesn’t make another line be made. Block-level elements can consist of inline elements, yet inline elements can’t hold the block-level elements.
As with a div, you usually add a class and id attribute to a range so you can style it utilizing CSS.
The below example uses span elements to show item names inside a passage. These product names could then be featured utilizing CSS. A custom search website could likewise possibly utilize the data given by the span elements to recognize the items inside the page.
<p>Some of our products include <span class=“product”>SuperWidgets</span>, <span class=”product”><span class=“product”>MegaWidgets</span>, and <span class=“product”>WonderWidgets</span>.</p>
Accumulate all the HTML tags together
<html>
<head>
<title>The Adventures of My Cat Lucky</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”description” content=”The adventures of my favorite pet cat Lucky, with stories, pictures, and movies.”>
<meta name=”keywords” content=”cat,Lucky,pet,animal”>
<link rel=”stylesheet” type=”text/css” href=”/style.css”>
<link rel=”shortcut icon” href=”/favicon.ico”>
</head>
<body>
<h1>The Adventures of My Cat Lucky</h1>
<div id=”mainContent”>
<p>My cat Lucky has a lot of adventures. Yesterday she <a href=”mouse.html”>caught a mouse</a>, and this morning she caught two!</p>
<p>Here’s a picture of Lucky:</p>
<img src=”lucky.jpg” alt=”Lucky”>
</div>
<div id=”sidebar”>
<h2>Buy our stuff!</h2>
<p>Some of our products include <span class=”product”>SuperWidgets</span>, <span class=”product”>MegaWidgets</span>, and <span class=”product”>WonderWidgets</span>.</p>
</div>
</body>
</html>
Conclusion
all HTML tags are the essential formatting blocks of any website you see on the Internet. They are utilized to make the structure and pattern of the page. Every HTML tag has a particular reason and can be utilized in various ways. However, some tags are utilized to make the design of the site page, and some are utilized to make the page’s content.
If you are struggling with your HTML code, you can address the given list of some basic HTML codes for a startup. You can also consult specialists to get HTML knowledge with any intricacy.