What are HTML Tags? – 23+ HTML Tags Explained

HTML is undoubtedly one of the most important components of the Web / Internet. If You’re want to become a web developer, then the first thing you must learn is HTML. Yes, HTML is mandatory for every web developer (Frontend or Backend, or Full Stack). In this post, we will mainly focus on What are HTML Tags? But we will also learn many things related to HTML and Web Development.

History : 

Originally Developed by Sir Tim Berners-Lee in 1991, HTML became the standard markup language for creating or displaying Web pages. HTML defines the structure of a webpage. 

Definition:

HTML stands for HyperText Markup Language. HTML is a markup language that is used for developing websites and web applications. It is the standard markup language for creating or displaying Web pages. 

HTML consists of a series of elements and it also defines the structure of your content. HTML is like the basic or primary building block of the internet. HTML is the technology that lets you view content on a web browser.HTML is used alongside technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML is very easy to learn and understand.

What are HTML Tags?

HTML tags are syntax or keywords used to differentiate an HTML document from a simple text document. HTML tags define how the browsers will display the content. If you think of HTML as a programming language, then the tags would be its syntax. An HTML consists of three parts – opening tag, content, and closing tag. However, there are exceptions and they are known as Self-Closing Tags. 

Structure Of HTML Tags –

What are HTML Tags
  • start tag <tagname> – content – end tag </tagname>
  • Example: <h1> This is a demo heading </h1>

List of HTML Tags and Their Uses

This list includes some of the most popular and widely used tags in HTML. It doesn’t include Self-Closing Tags.

 1. <!–…– > : This is a comment in HTML.

Example: <!– This is a comment — >

2.<!DOCTYPE>: This tag lets you define the document type.

Example : 

<!DOCTYPE html>
<html>
<head>
<title> Document Title</title>
</head>

<body>
 Main Content 
</body>

</html>

3. <a>: a tag is used to define or create a link or hyperlink in HTML. The “a” element links one webpage with another webpage. The a tag also takes some attributes such as hreftarget, rel, etc. The a element acts as a placeholder for a hyperlink if it has no href attribute.

Example:

<a href="https://qualifiedgeek.com">A demo link</a>

4.<article>: As the name suggests the article tag or element is used to specify independent, self-contained content. 

Example:

<article>
<h1>A heading</h1>
<p>the article description</p>
</article>

5. <b>: Using the b tag you can easily make any text bold.

Example : 

<b> a bold a text </b>

6.<blockquote> : This tag lets you display a quoted section or content from other sources. 

Example :

<blockquote cite="https://www.wikipedia.org">
Any quote from wikipedia
</blockquote>

5.<audio>: audio tag allows us to embed or use audio or sound into our HTML document. The audio tag also contains one or more <source> tags with different audio sources. HTML support three audio format (MP3, WAV, and OGG.)

Example: 

<audio>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

6.<body>body tag is used to define the document’s body. The body is one of the most important tags/elements in HTML. The body contains the main content of the HTML document including headings, paragraphs, videos, images, tables, hyperlinks, etc.

Example :

<html>
<head>
  <title>Body tag demo </title>
</head>

<body>
  <h1>A heading</h1>
  <p> A paragraph.</p>
</body>
</html>

7.<button>: button tag is used to add a clickable button to the webpage.

Example: 

<button type="button">Click Here</button>

8.<div>: div is used to create a new section or division in an HTML document. div is like a container for HTML elements. One can easily style div with CSS.

Example : 

<div class="demo-div>
<h1>a demo heading</h1>
<p>main content</p>
<div>

9.<footer>: As the name suggests footer tag defines a footer for the current document.

Example : 

<footer>
<h3>This is the footer</h3>
</footer>

10. <h1> – <h6> : h1,h2,h3,h4,h5,h6 lets you add headings of different sizes in the webpage.

Example:

<h1>biggest heading in html</h1>
<h6>smallest heading in html <h6> 

11.<script> : It used to include or link external Javascript file or client-side script.

12.<style> : Just like script , style tag is used to include CSS files.

13.<li> : Li is used to add ordered lists and unordered lists to the webpage. 

Example : 

Ordered List :

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

14.<video>: Just like the audio tagthe video tag allows us to embed or add video in the document.  

Example :

<video>
  <source src="video.mp4" type="video/mp4">
</video>

15. <i> and <u> : i tag makes text  italic & u is used to add underline.

What Are Self-Closing Tags in HTML?

Generally, an element in HTML requires two tags to work properly but there are exceptions where tags don’t require any start or end tags such as <br/>, <hr />,<img />, etc., and these types of HTML Tags are known as Self-Closing. You can explicitly close them “<br/>” but most of them work without using the “/” or slash at the end. And many elements with Self-Closing tags have no content as most of them are empty elements.

List of Self-Closing tags in HTML

This list contains some popular and widely used Self-Closing tags in HTML. Self-closing tags are also known as void or empty elements.

1.<br />: The br tag is used To break a line in text. 

Example:

<p> This is a demo paragraph. <br/> And the break begins here </p>

2. <base/>: The base tag specifics the base URL, Target for all relative URLs in a document. The base tag comes with two attributes ( an href or a target attribute) and the tag must have at least one of those two attributes or both. This tag must be inside the head element.

Example:

<head>
  <base href="https://www.google.com/" target="_blank">
</head>

3.<hr /> : The hr tag inserts a horizontal line.

Example : 

<h2> Before the horizontal line</h2>
<hr>
<h2> After the horizontal line</h2>

4. <input />:  The input tag is used to insert an input field where the user can enter data. It has many types of attributes such as button, checkbox, password, text, radio, number, URL, etc.

Example : 

<input type="number" id="demoNumber" name="num">

5.<link />: The link tag links two documents with each other. link tag links the current document with an external resource.

Example:

<link rel="stylesheet" href="css/styles.css">

6.<meta />: meta is one of the most important Self-Closing tags in HTML.As the name suggests Meta tags define metadata (data about data) about an HTML document. We can define many things such as page description, keywords, author of the document, viewport settings, etc.

Example :

<meta name="description" content="meta tags usage in HTML">

7. <img /> : img tag allows us to insert or embed  an image in an HTML page.

Example :

<img src="image.jpg" alt="a demo image" width="500" height="500">

8.<embed />: embed tag lets you embed web pages, pictures, media players, etc. on your web page.

Example:

<embed type="video/webm" src="demo.mp4" >

What is an HTML Element ? – With Example

An HTML element is a part of any webpage. HTML elements are used o display content (text,audio,video,etc.) on the web page. As mentioned eariler, an HTML element consists of –   <opening tag > content </closing tag> or <h1>….</h1> is an HTML element , <p>…</p> is also an HTML element. 

Conclusion:

Now you know What are HTML Tags. If you’re starting your web development journey, HTML is a must. HTML is simple and easy which makes it very suitable for beginners. 

Leave a Comment