Hello, readers welcome to the blog in this blog you will learn basic HTML tags, how to use them, the purpose of using them along with the code snippets that will help you get a proper explanation of these basic tags. As a result, you will be able to write your first HTML document. These tags are very crucial for any HTML document as they are the base of any HTML document and are also mandatory to write an HTML document.
But, before diving into the basic HTML tags let’s have a quick revision on what HTML is?
What is HTML ?
HTML stands for HyperText Markup Language. Now let’s break this definition to get a more clear understanding of HTML, “HyperText ” means the text that carries some link within it whereas “Markup Language” helps the text to look more dynamic and easily distinguishable.
HTML helps in the development of the web page skeleton (structure), it helps create a basic layout (structure) of how our web page will have different elements and where they will be placed on the screen. To achieve so we use different tags that HTML offers but some of them are most important to get desired results.
So after getting a revision on what HTML is we are good to go for the basic HTML tags.
Let’s have a look at these basics HTML tags and understand how they work as well as what they do in the document.
The basic HTML tags include:
- <html> </html>
- <head> </head>
- <title> </title>
- <body> </body>
- <h1> </h1> to <h6> </h6>
- <p> </p>
Let’s see them one by one.
Container html tag
This tag acts as a container for all (except for the <!DOCTYPE> declaration) the HTML elements, it binds all other tags like <head>, <body>, etc within itself. This tag appears at the top and bottom of the HTML document. It represents the root of an HTML document.
<!DOCTYPE> declaration is for informing the browser about the type of the document.
In HTML5 the declaration is simple : <!DOCTYPE html>
The head tag
The <head> is like a container for the metadata (data about data), this is the only tag whose content is not displayed in the browser but plays a vital role in the designing of the websites. It just contains the metadata about the HTML document. Head tag contains scripts and styles of the web page.
The <head> tag is placed in between the <html> and <body> tag
Following are some of the tags used inside <head> tag:
The style tag adds styling to the web page, it contains information regarding the styles (CSS) of a document. This tag takes responsibility for how a web page should render on the browser, you can provide all types of styling in this tag like colour, margin, padding, etc. This tag adds beauty to the web page, the look we want to see.
The title tag
The <title> tag is used to add title to the HTML document, <title> tag is placed inside the <head> tag. A document can have only one <title> element in the entire document.
Use of <title> element :
- Adds a title to the browser tab
- Displays the title of the web page on the search engine result pages.
- Gives the bookmark title after bookmarking the content or page.
The body tag
The <body> tag is the tag where the actual content is written that displays on the web browser. It defines the main content of the HTML document like paragraphs, texts, headings, video, links, images, tables, forms, etc.
The <body> tag is placed between the <head> and <html> tag.
<h1> to <h6> tag defines the level of Heading in a HTML document, where <h1> and <h2> tags are most common as they use to define Headings and Sub-headings of the document. HTML contains six levels of heading i.e. h1,h2,h3,h4,h5,h6. As a result, of using any of these tags the text written inside these tags appears bold and in different sizes according to the level used. In addition to this, it also helps the web page to come into the search results of the search engine.
<h1> is the largest heading tag whereas <h6> is the smallest one.
The <p> tag in the HTML document defines the paragraph, any content inside this tag displays as a paragraph on the web page. This tag is responsible to add content on a web page, the body, or the explanation that we see on a web page in usually the paragraph element.
It is a block-level element that means it takes an entire block of space in the webpage.
Let’s see an example of <p> tag:
The <br> adds a single line break into the document, it takes the space of a single line. It is a self-closing tag which means we do not need to put an end tag with <br> like this <br></br>. This tag not only creates spaces between the content of the web page but at the same time helps in separating one content or element from another that helping the viewer to easily distinguish different web pages’ content.
Let’ see the example below to understand how to use it as well as what it displays on a web page:
So we get familiar with the basic HTML tags, how to use them wisely. As a result, we can now start working with Html.
For more information regarding HTML feel free to visit: https://developer.mozilla.org/en-US/docs/Web/HTML