Basic HTML tags : A brief Introduction and How to use it.
source link: https://blog.knoldus.com/basic-html-tags-a-brief-introduction-and-how-to-use-it/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Reading Time: 5 minutes
Introduction
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>
- <br>
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:
- <title></title>
- <style></style>
- <link></link>
- <script></script>
Style 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.
Script tag
The Script tag contains the JavaScript code that helps to add interactivity to the web page. Interactivity means how your web page responds to certain activities like when a click event occurs or a change event occurs. You can provide all the logic in this tag to handle the user activity on your web page. This tag helps make the user experience better.
Link tag
Link tag establishes a relationship between the external resources and the current document, it links external resources like style sheets and scripts to the current working document. While using external CSS files or JavaScript files, the tag adds that external file to our document to help us achieve the separation concern wisely.
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.
Heading tags
<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.
Paragraph tag
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:
Break 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:
Conclusion
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK