HTML is the standard markup language for creating Web pages and html tags are like keywords which defines that how web browser will format & display the content. with the helps of tags, a web browser can distinguish between an HTML content and a simple page content
HTML is a platform independent language. Its is not a programming language like C,C++,JAVA and BASIC.
Basically it's a set of markup tags that tells the browser how to display the Web Page content. HTML stands for OR full form Hypertext Markup Language.
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "This is a Heading", "This is a paragraph", "Yhis is a link", etc.
- It is used for basic layout creating or designing a Web page.
- Without HTML, the WORLD WIDE WEB will not exist.
- It allows embedding test,image multimedia and links to others documents and the web page.
- It provide a means to create structured documents by using paragraph, character formatting, links and lists.
- It can embeded script such as CSS, javaScript, Which affect the behavior and design of the web page
HTML uses predefined tags that tell the browser how to display the content. There are two types of tags in HTML.
- Empty Tags
- Container Tags
Now let us see the definitions and examples of the most commonly used HTML container and empty tags.
Empty tags -->The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.
<tag_name> Some commonly used empty tags are:
- <br>: Inserts a line break in a webpage wherever needed.
- <hr>: Inserts a horizontal line wherever needed in the webpage.
- <img>: This tag is used to display the images on the webpage which were given in the src attribute of the tag.
- <input>: This is mainly used with forms to take the input from the user and we can also define the type of the input.
- <link>: When we store our CSS in an external file this can be used to link external files and documents to the webpage and it is mainly used to link CSS files.
- <meta>: Contains all metadata of the webpage. Metadata is the data about data and is described in the head tag.
- <source>: When an external media source is needed to be included in the webpage. source tag is used to insert any media source like audio, video etc… in our webpage.
Example :
this demonstration for Empty Tags :
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--The description written on title tag get appeared as browser tab name-->
<title>www.lookandlearnbd.com </title>
</head>
<!-- Whatever content in body tag appears on the webpage-->
&l;tbody>
<!--Headings-->
<h1> Look And Learn BD </h1>
<h2> Look And Learn BD </h2>
<h3> Look And Learn BD </h3>
<h4> Look And Learn BD </h4>
<h5> Look And Learn BD </h5>
<h6> Look And Learn BD </h6>
<p> This is a paragraph. </p>
<!--For horizontal line -->
<hr>
<!--For paragraphs -->
<p> lookandlearnbd is a Professional Technological Content Platform. </p>
<hr>
<p> This is a <br> line break </p>
<h4> Link </h4>
<a href="https://www.lookandlearnbd.com/"> Look And Learn BD </a>
<!--For ordered lists-->
<ol>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4 </li>
</ol>
</body>
</html>Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the browser), and closing tag. In the content part, they can also contain some other tags. These opening and closing tags are used in pairs which are start tag and end tag, which is often called ON and OFF tags. If you forget to close the container tag, the browser applies the effect of the opening tag until the end of the page. So be careful while working with container tags. The majority of tags present in HTML are container tags.
<tag_name> …</tag_name> Some commonly used container tags :
1. Essential Tags: Following tags are used to create the structure of the webpage -->
<html>….</html>
<head>…</head>
<title>…</title>
<body>….</body> 2. Headings: Following tags are used for headings:
<h1>….</h1> to <h6>…</h6>: It is used for including headings of different sizes ranging from 1 to 6. 3. Text formatters: Following tags are used for text formatting:
<p>….</p>: When paragraphs are needed to be included, this tag is used
<b>….</b>: Makes the contained text to bold.
<i>…</i>: Makes the contained text to italic. 4. HyperLinks: Following tag is used to define a hyperlink in the webpage :
<a href=”link.com”>…</a>: When we link some other webpages we add the hyper links to other webpages using this <a …>…</a>tag. 5. Button tag: Following tag is used to create a click button :
<button>…</button>: This is used in many ways but mainly used to manipulate dom by adding events and many more. 6. Division tag: Following tag is used to create a division :
<div>….</div>: This defines a section in a document. The webpage can be divided to different sections using the <div>….</div> tag. 7. Iframe tag: Following tag is used for inline framing :
<iframe src=”link.com> </iframe>: When some other document is to be embedded like some video or image into HTML we use this tag. 8. Navigation tag: Following tag is used to set a navigation link :
<nav>…</nav>: Defines a navigation bar that contains a set of menu or a menu of hyperlinks. 9. Script tag: Following tag is used to add JavaScript code to the webpage :
<script>…</script> : This contains the javascript code that adds interactivity to the webpage. 10. Lists: Following tags are used to write data in the form of ordered and unordered lists :
<ol>…</ol>: This tag is used to create ordered lists.
<ul>…</ul>: This tag is used to create unordered lists.
<li>…</li>: This tag is used to add list items. Thanks for Reading...
