HTML - Tags

HTML Tags



HTML tags define how your web browser must format and display the content. HTML tags are open and closed.

Types of HTML Tags


1. Container Tag (Pair Tag) :
A container tag is the tags in Html which have both opening and a closing tag.

For Examples : 
<b> any text </b>
<heading> text heading </heading>
<body> content here </body> etc..

2.Empty Tag :
Empty Tag has no ending tags.

For Examples :
<br>
<img>
<input> etc..


All HTML Tags have Here:


Basic Tags Used in HTML

HTML Tags are described in the Html documents.

1. <!DOCTYPE>

DOCTYPE is defined as the document type.

2.<HTML>

Define an HTML document.

Example : 



3.<title>

The title defines a title for the document.

Example : 


4.<Head>

The HTML document is written by the head element.

Example : 


5.<Body>

The body tag contains the contents of the document.

Example :


6. <H1> to <H6>

Headings are defined in the HTML Document by the Heading Element. Headings can be created in HTML from H1 to H6 Level.

Example : 

 <!DOCTYPE HTML>
<html>
<head>
<title> Heading Example </title>
</head>
<body>
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
</body>
</html>
Output :

7.<P>

It is used to define a paragraph in an HTML Document.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> Paragraph  Example </title>
</head>
<body>
<p>This is example of paragraph </p>
<p> This is second example of paragraph </p>
</body>
</html>
Output :

8. <Hr>

The Horizontal Line is defined in the HTML Document.

Example :

<!DOCTYPE HTML>
<html>
<head>
<title> Horizontal Line Example </title>
</head>
<body>
<p> This is a example of Horizontal Line </p>
<hr>
<p> This is second example of Horizontal Line </p>
</body>
</html>
Output :

9. <Br>

The <Br> element is used to give Single Line Break.

Example :
<!DOCTYPE HTML>
<html>
<head>
<title> Single  Line Break Example </title>
</head>
<body>
<p> This is a <br>  example of <br>  Single  Line <br>   Break</p>
</body>
</html>
Output :


Image Tag

Image Tags are used to insert Image into HTML Document.

1. <img>

<img> tag defines an image in html document.

Example :
 <!DOCTYPE HTML>
<html>
<head>
<title> Image Tag Example </title>
</head>
<h1> How to insert image </h1>
<body>
<img src="Tutorialsug.jpg">
</body>
</html>
Output :

2. <map>


<.map> tag defines a client-side image-map.An image-map is an image with clickable areas.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> Map Tag Example </title>
</head>
<h1> The map and area element in html document. </h1>

<p> click on the tutorialsug and reach the website </p>
<body>
<img src="Tutorialsug.jpg" usemap="#imap">

<map name="imap" id="#imap">
<area shape ="rect" coords="394, 292, 4, 2" href="http://www.tutorialsug.com" target="blank">
<area shape ="circle" coords="191, 143, 128" href="http://www.tutorialsug.com" target="blank">
</map>
</body>
</html>
Output :

3. <area>

<area> tag defines an area inside an image-map.

Example :
 <!DOCTYPE HTML>
<html>
<head>
<title> Map Tag Example </title>
</head>
<h1> The map and area element in html document. </h1>

<p> click on the tutorialsug and reach the website </p>
<body>
<img src="Tutorialsug.jpg" usemap="#imap">

<map name="imap" id="#imap">
<area shape ="rect" coords="394, 292, 4, 2" href="http://www.tutorialsug.com" target=blank">
<area shape ="circle" coords="191, 143, 128" href="http://www.tutorialsug.com" target="blank">
</map>
</body>
</html>
Output :

4. <picture>

<picture> tag defines a container for multiple image resources.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> picture Tag Example </title>
</head>
<h1> The picture element </h1>
<body>
<picture> <source media="(min-width: 850px)" srcset="tutorialsug.jpg"> <source media="(min-width: 550px)" srcset="tutorialsug.jpg">
<img src="tutorialsug.jpg" alt="logo" style="width:auto;"> </picture>
</body>
</html>
Output :

Link Tags

Link tags are used to create Hyperlinks in HTML Documents and to add other external documents.

1. <a> 

<a> tag defines a hyperlink.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> a tag Example </title>
</head>
<body>
<h1> This a element </h1>
<a href="https://www.tutorialsug.com"> Visit tutorialsug.com!</a>
</body>
</html>
Output :

2. <link>


<link> tag the Link Element is used to connect an External Document to an HTML Document.

Example :

<!DOCTYPE html>
<html>
<head>
<title> HTML Link Tag </title>
<link rel ="stylesheet" href = "stylenew.css">
</head>
<style>
#contentinfo p {
          line-height: 20px;
          margin: 30px;
          padding-bottom: 20px;
          text-align: justify;
          width: 140px;
          color : blue;
}
</style>
<body>
<div id = "contentinfo">
   <p> Welcome to our website . We provide tutorials on various subects.</p>
</div>
</body>
</html>
Output :

3. <nav>

<nav> tag defines navigation links.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> Nav link Tag </title>
</head>
<body>
<h1> This nav element </h1>
<p>  nav element defines a set of navigation links: </p>
<nav>     <a href="https://www.tutorialsug.com/2020/04/html_27.html">HTML</a>      <a href="https://www.tutorialsug.com/2020/04/intoduction.html">SQL</a> </nav>
</body>
</html>
Output :

List Tags

Lists are created in HTML Documents via List Tags. You can create Number Lists, Bullet Lists, Order Lists, Unorder Lists, and Definition Lists.

1. <ul>

<ul> tag means unordered list, it defines an unordered list.

Example :

 <!DOCTYPE HTML>
<html>
<head>
<title> Unordered List Example </title>
</head>
<body>
<h1> This is example of Unordered List </h1>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
</body>
</html>
Output :

2. <ol>

<ol> tag means ordered list, it defines an ordered list.

Example :
 <!DOCTYPE HTML>
<html>
<head>
<title> Ordered List Example </title>
</head>
<body>
<h1> This is example of Ordered List </h1>
<ol>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>
</body>
</html>
Output :

3. <li>

<li> tag defines a list item.

Example :
 <!DOCTYPE HTML>
<html>
<head>
<title> List Example </title>
</head>
<body>
<h1> This is example of  List </h1>
<ol>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>
</body>
</html>
Output :

4. <dl>

<dl> tag define description list.

Example :

 <!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>The three elements are used to create a description list:</p>
<dl>
             <dt>Definition List</dt>
            <dd> dd tag defines a term/name in a description list. </dd>
</dl>
</body>
</html>
Output :

5. <dt>

<dt> tag defines a term/name in a description list.

Example :
 <!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>The three elements are used to create a description list:</p>
<dl>
             <dt>Defines a term in a description list.</dt>
            <dd> dd tag defines a term/name in a description list. </dd>
</dl>
</body>
</html>
Output :

6. <dd>

<dd> tag defines a description of a term/name in a content list.

Example :
 <!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>The three elements are used to create a description list:</p>
<dl>
             <dt>Defines a term in a description list.</dt>
            <dd> dd tag defines a term/name in a description list. </dd>
</dl>
</body>
</html>
Output :

Post a Comment

0 Comments