HTML TAG
HTML (Hypertext Markup Language) tags are the fundamental building blocks of web pages. They are used to structure and format content on the web, defining the elements that make up a webpage’s structure and appearance. HTML tags are enclosed in angle brackets < > and typically come in pairs – an opening tag and a closing tag – though some tags are self-closing.
Here’s a basic breakdown of how HTML tags work:
Here’s a basic breakdown of how HTML tags work:
Closing Tag: This is similar to the opening tag but includes a forward slash (/) before the tag name. It marks the end of the element. For example, </p> is the closing tag for a paragraph.
Content: This is the actual content of the HTML element, such as text, images, links, etc. It’s placed between the opening and closing tags.
Attributes: HTML tags can also contain attributes, which provide additional information about the element. Attributes are placed within the opening tag and typically come in name-value pairs. For example, in <img src=”image.jpg” alt=”Image”>, src and alt are attributes.
HTML tags are used to create various elements on a webpage, such as:
Text Formatting: Tags like <b> (bold), <i> (italic), <u> (underline), <strong> (strong emphasis), <em> (emphasized text), etc., are used to format text.
Headings and Paragraphs: Tags like <h1> to <h6> for headings of different levels and <p> for paragraphs.
Links and Images: Tags like <a> for hyperlinks and <img> for images.
Lists: Tags like <ul> (unordered list), <ol> (ordered list), <li> (list item) for creating lists.
Tables: Tags like <table>, <tr> (table row), <td> (table data), <th> (table heading) for creating tables.
Forms: Tags like <form>, <input>, <textarea>, <button> for creating forms to collect user input.
Semantic Elements: HTML5 introduced semantic elements like <header>, <footer>, <nav>, <article>, <section>, etc., which provide meaning to the content and improve accessibility and SEO.
Here’s an example of a simple HTML structure:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit….</p>
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
In this example, you can see various HTML tags used to structure the webpage, including <html>, <head>, <body>, <header>, <nav>, <section>, <footer>, <h1>, <h2>, <p>, <ul>, <li>, and <a>. Each tag serves a specific purpose in defining the layout and content of the webpage.
1. HTML <!–…–> Tag
<!–This is a comment. Comments are not displayed in the browser–>
<p>This is a paragraph.</p>
2. HTML <!DOCTYPE> Declaration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>
3. HTML <a> Tag
<a href=”https://www.yashoraj.com”>Visit Yashoraj.com !</a>
4.HTML <abbr> Tag
The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.
5. Not Supported in HTML5.
The <acronym> tag was used in HTML 4 to define an acronym.
An acronym or abbreviation should be marked up with the <abbr> tag:
The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.
6. HTML <address> Tag
<address>
Written by <a href=”mailto:yashoraj.com@gmail.com”>Mritunjay Sharma</a>.<br>
Visit us at:<br>
yashoraj.com<br>
Kankarbagh<br>
PATNA, Bihar
</address>
7. HTML <applet> Tag
Not Supported in HTML5.
The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).
Plug-ins
Plug-ins are a computer programs that extend the standard functionality of the browser.
Plug-ins have been used for many different purposes:
Run Java applets
Run ActiveX controls
Display Flash movies
Display maps
Scan for viruses
Verify a bank id
8. HTML <area> Tag
<img src=”yashoraj.jpg” alt=”Yashoraj Infosys” usemap=”#software” width=”400″ height=”379″>
<map name=”software”>
<area shape=”rect” coords=”11,22,470,360″ alt=”Computer Parts” href=”computer_parts.html”>
<area shape=”rect” coords=”210,142,322,280″ alt=”Phone” href=”phone.html”>
</map>
9.HTML <article> Tag
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!</p>
</article>
10. HTML <aside> Tag
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
11. HTML <audio> Tag
Play a sound file:
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
12. HTML <b> Tag
Example
Make some text bold (without marking it as important):
<p>This is normal text – <b>and this is bold text</b>.</p>
13. HTML <base> Tag
Example
Specify a default URL and a default target for all links on a page:
<head>
<base href=”https://www.yashoraj.com/” target=”_blank”>
</head>
<body>
<img src=”images/yashoraj.jpg” width=”24″ height=”39″ alt=”Yashoraj”>
<a href=”tags/tag_base.html”>HTML base Tag</a>
</body>
14. HTML <basefont> Tag
Not Supported in HTML5.
The <basefont> tag was used in HTML 4 to specify a default text-color, font-size or font-family for all the text in an HTML document.
What to Use Instead?
Example
Specify a default text-color for a page (with CSS):
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15. HTML <bdi> Tag
Example
Isolate the usernames from the surrounding text-direction settings:
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
</ul>
16. HTML <bdo> Tag
Example
Specify the text direction:
<bdo dir=”rtl”>
This text will go right-to-left.
</bdo>
17. HTML <big> Tag
Not Supported in HTML5.
The <big> tag was used in HTML 4 to define bigger text.
What to Use Instead?
Example
Specify different font-sizes for HTML elements (with CSS):
<html>
<head>
<style>
p.ex1 {
font-size: 30px;
}
p.ex2 {
font-size: 50px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class=”ex1″>This is a bigger paragraph.</p>
<p class=”ex2″>This is a much bigger paragraph.</p>
</body>
</html>
18. HTML <blockquote> Tag
Example
A section that is quoted from another source:
<blockquote cite=”http://www.yashoraj.com/”>
Yashoraj Infosys , a software & website development company in Patna Bihar, since 2014.
</blockquote>
19. HTML <body> Tag
Example
A simple HTML document:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
20. HTML <br> Tag
Example
Insert single line breaks in a text:
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
21. HTML <button> Tag
Example
A clickable button is marked up as follows:
<button type=”button”>Click Me!</button>
22.HTML <canvas> Tag
Example
Draw a red rectangle on the fly, and show it inside the <canvas> element:
<canvas id=”myCanvas”>
Your browser does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById(“myCanvas”);
let ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 80, 80);
</script>
23. HTML <caption> Tag
Example
A table with a caption:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
24. HTML <center> Tag
Not Supported in HTML5.
The <center> tag was used in HTML4 to center-align text.
What to Use Instead?
Example
Center-align text (with CSS):
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>
25. HTML <cite> Tag
Example
Define the title of a work with the <cite> tag:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
26. HTML <code> Tag
Example
Define some text as computer code in a document:
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>
27. HTML <col> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table>
<colgroup>
<col span=”2″ style=”background-color:red”>
<col style=”background-color:yellow”>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
28. HTML <colgroup> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table>
<colgroup>
<col span=”2″ style=”background-color:red”>
<col style=”background-color:yellow”>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
29. HTML <data> Tag
Example
The following example displays product names but also associates each name with a product number:
<ul>
<li><data value=”21053″>Cherry Tomato</data></li>
<li><data value=”21054″>Beef Tomato</data></li>
<li><data value=”21055″>Snack Tomato</data></li>
</ul>
30. HTML <datalist> Tag
Example
A datalist with pre-defined options (connected to an <input> element):
<label for=”browser”>Choose your browser from the list:</label>
<input list=”browsers” name=”browser” id=”browser”>
<datalist id=”browsers”>
<option value=”Edge”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
31. HTML <dd> Tag
Example
A description list, with terms and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
32. HTML <del> Tag
Example
A text with a deleted part, and a new, inserted part:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
33. HTML <details> Tag
Example
Specify details that the user can open and close on demand:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
34. HTML <dfn> Tag
Example
Mark up a term with <dfn>:
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
35. HTML <dialog> Tag
Example
Using the <dialog> element:
<dialog open>This is an open dialog window</dialog>
36. HTML <dir> Tag
Not Supported in HTML5.
The <dir> tag was used in HTML 4 to list directory titles.
What to Use Instead?
Example
Use <ul> to create a directory list:
<ul>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</ul>
37. HTML <div> Tag
Example
A <div> section in a document that is styled with CSS:
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class=”myDiv”>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
38.HTML <dl> Tag
Example
A description list, with terms and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
39. HTML <dt> Tag
Example
A description list, with terms and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
40.HTML <em> Tag
Example
Mark up emphasized text in a document:
<p>You <em>have</em> to hurry up!</p>
<p>We <em>cannot</em> live like this.</p>
41. HTML <embed> Tag
Example
An embedded image:
<embed type=”image/jpg” src=”pic_trulli.jpg” width=”300″ height=”200″>
42. HTML <fieldset> Tag
Example
Group related elements in a form:
<form action=”/yashoraj_page.php”>
<fieldset>
<legend>Personalia:</legend>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”birthday”>Birthday:</label>
<input type=”date” id=”birthday” name=”birthday”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
43. HTML <figcaption> Tag
Example
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:
<figure>
<img src=”pic_sdfgh.jpg” alt=”Trulli” style=”width:100%”>
<figcaption>Fig.1 – rtyu, dfghj, India.</figcaption>
</figure>
44.HTML <figure> Tag
Example
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:
<figure>
<img src=”pic_trulli.jpg” alt=”Trulli” style=”width:100%”>
<figcaption>Fig.1 – Trulli, Puglia, Italy.</figcaption>
</figure>
45.HTML <font> Tag
Not Supported in HTML5.
The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
What to Use Instead?
Example
Set the color of text (with CSS):
<p style=”color:red”>This is a paragraph.</p>
<p style=”color:blue”>This is another paragraph.</p>
46. HTML <footer> Tag
Example
A footer section in a document:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href=”mailto:yashoraj.com@gmail.com”>yashoraj.com@gmail.com</a></p>
</footer>
47. HTML <form> Tag
Example
An HTML form with two input fields and one submit button:
<form action=”/action_page.php” method=”get”>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<input type=”submit” value=”Submit”>
</form>
48. HTML <frame> Tag
Not Supported in HTML5.
The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.
What to Use Instead?
Example
Use the <iframe> tag to embed another document within the current HTML document:
<iframe src=”https://www.w3schools.com”></iframe>
49. HTML <frameset> Tag
Not Supported in HTML5.
The <frameset> tag was used in HTML 4 to define a frameset.
What to Use Instead?
Example
Use the <iframe> tag to embed another document within the current HTML document:
<iframe src=”https://www.w3schools.com”></iframe>
50. HTML <h1> to <h6> Tags
Example
The six different HTML headings:
<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>
51. HTML <head> Tag
Example
A simple HTML document, with a <title> tag inside the head section:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
52. HTML <header> Tag
Example
A header for an <article>:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet….</p>
</article>
53. HTML <hgroup> Tag
Example
Use the hgroup element to mark that the heading and the paragraph are related:
<hgroup>
<h2>Norway</h2>
<p>The land with the midnight sun.</p>
</hgroup>
54. HTML <hr> Tag
Example
Use the <hr> tag to define thematic changes in the content:
<h1>The Main Languages of the Web</h1>
<hr>
55. HTML <html> Tag
Example
A simple HTML document:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
56. HTML <i> Tag
Example
Mark up text that is set off from the normal prose in a document:
<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>
<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>
57. HTML <iframe> Tag
Example
An inline frame is marked up as follows:
<iframe src=”https://www.yashoraj.com” title=”Yashoraj Infosys web development company in Patna Bihar”></iframe>
58. <img>
59. <input>
60. <ins>
61. <kbd>
62. <label>
63. <legend>
64. <li>
65. <link>
66. <main>
67. <map>
68. <mark>
69. <menu>
70. <meta>
71. <meter>
72. <nav>
73. <noframes>
74. <noscript>
75. <object>
76. <ol>
77. <optgroup>
78. <option>
79. <output>
80. <p>
81. <param>
82. <picture>
83. <pre>
84. <progress>
85. <q>
86. <rp>
87. <rt>
88. <ruby>
89. <s>
90. <samp>
91. <script>
92. <search>
93. <section>
94. <select>
95. <small>
96. <source>
97. <span>
98. <strike>
99. <strong>
100. <style>
101. <sub>
102. <summary>
103. <sup>
104. <svg>
105. <table>
106. <tbody>
107. <td>
108. <template>
109. <textarea>
110. <tfoot>
111. <th>
112. <thead>
113. <time>
114. <title>
115. <tr>
116. <track>
117. <tt>
118. <u>
119. <ul>
120. <var>
121. <video>
122. <wbr>
Courtesy : w3schools.com
Yashoraj Infosys best website design and development company in patna bihar, top software company in patna bihar, best web design company in patna, best website design company in patna, top software company in patna, top 10 it companies in bihar, best website design company in patna
Our Web Applications
Hospital Management System | Pharmacy Management System | Tour and Travel portal with admin panel | Ecommerce portal (single vendor) + admin panel | Ecommerce portal (multiple vendor) + admin panel | News portal with admin panel | CRM software pro version | HR management system | Online exam web portal + admin panel | Online classes and tutorial web portal + admin panel | Online job portal + admin panel | School management system pro version | Matrimonial web portal + admin panel | Point of sales system (POS) | POS system for restaurants | Gym Management and Fitness Management, Courier and Logistics Management System | Advocate Management System | Real Estate management system | Advance Support Ticket System | Project Management software (ultimate version)
#ResponsiveWebDesign #YashorajInfosys #WebDevelopment #DigitalPresence #MobileFriendly #SEO #UserExperience #OnlineSuccess #websitedevelopmentcompanyinpatna #bestwebsitedesigncompanyinpatna #topsoftwarecompanyinpatnabihar, #bestwebdesigncompanyinpatna, #bestwebsitedesigncompanyinpatna, #topsoftwarecompanyinpatna, #top10itcompaniesinbihar, #bestwebsitedesigncompanyinpatna #DigitalMarketing #YashorajInfosys #OnlinePresence #SocialMedia #ContentMarketing #SEO #PPC #DataDrivenMarketing #Innovation #SEO #YashorajInfosys #SmallBusiness #OnlineVisibility #DigitalMarketing #KeywordResearch #ContentCreation #LocalSEO #SearchEngineOptimization #MobileAppDevelopment #YashorajInfosys #NativeApps #HybridApps #iOS #Android #ReactNative #Flutter #AppDevelopment #DigitalTransformation #EcommercePlatform #YashorajInfosys #Shopify #WooCommerce #Magento #BigCommerce #WixEcommerce #OnlineStore #DigitalCommerce #BusinessGrowth #UXDesign #UIDesign #YashorajInfosys #WebsiteDesign #UserExperience #UserInterface #DigitalExperience #WebDesign #BusinessSuccess #ContentMarketing #YashorajInfosys #DigitalMarketing #BrandAwareness #CustomerEngagement #LeadGeneration #BusinessGrowth #ContentStrategy #SEO #Cybersecurity #YashorajInfosys #SmallBusiness #DataProtection #NetworkSecurity #CyberAwareness #CyberThreats #BusinessSecurity #CyberSafety
#SocialMediaMarketing #YashorajInfosys #SmallBusiness #BrandAwareness #CustomerEngagement #TargetedAdvertising #DigitalMarketing #BusinessSuccess
#CloudComputing #YashorajInfosys #DigitalTransformation #Scalability #Flexibility #CostSavings #Security #BusinessContinuity
#SEO #YashorajInfosys #OnlinePresence #Visibility #Credibility #UserExperience #BusinessSuccess
#Ecommerce #YashorajInfosys #OnlineShopping #GlobalReach #DataInsights #BusinessSuccess
