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 HTML Tags
- Formatting Tags
- Style Tags
- Image Tags
- Link Tags
- Section Tags
- List Tags
- Table Tags
- Form & Input Tags
- Frame Tags
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 :
Example :
3.<title>
The title defines a title for the document.
Example :
Example :
4.<Head>
The HTML document is written by the head element.
Example :
Example :
5.<Body>
The body tag contains the contents of the document.
Example :
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 :
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 :
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 :
Output :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>
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>
Image Tag
Image Tags are used to insert Image into HTML Document.
1. <img>
<img> tag defines an image in html document.
Example :
Example :
<!DOCTYPE HTML><html><head><title> Image Tag Example </title></head><h1> How to insert image </h1><body><img src="Tutorialsug.jpg"></body></html>
2. <map>
<.map> tag defines a client-side image-map.An image-map is an image with clickable areas.
Example :
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 :
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>
4. <picture>
<picture> tag defines a container for multiple image resources.
Example :
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 :
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>
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 :
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>
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 :
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>
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 :
Example :
Output :<!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>
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 :
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>
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 :
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>
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 :
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>
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 :
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>
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 :
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>
0 Comments