Blog

Home - HTML - HTML Tags

HTML Tags

html tags

HTML Tags

HTML Doctypes

HTML doctype is a declaration that tells the web browser which version of HTML the web page is written in. The doctype declaration is the first line of an HTML document and begins with <!DOCTYPE> followed by the type of document. Here are some examples of HTML doctype declarations

  1. HTML5
				
					<!DOCTYPE html>

This is the doctype declaration for HTML5, which is the latest version of HTML.

  1. HTML 4.01 Strict
				
					<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This is the doctype declaration for HTML 4.01 strict, which is an older version of HTML. This doctype specifies that the document must follow strict HTML 4.01 rules.

  1. HTML 4.01 Transitional
				
					<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This is the doctype declaration for HTML 4.01 transitional, which is also an older version of HTML. This doctype allows for more flexibility in coding and permits the use of non-standard tags.

  1. XHTML 1.0 Strict
				
					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This is the doctype declaration for XHTML 1.0 strict, which is a reformulation of HTML as an XML application. This doctype specifies that the document must follow strict XHTML 1.0 rules.

  1. XHTML 1.0 Transitional
				
					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is the doctype declaration for XHTML 1.0 transitional, which allows for more flexibility in coding and permits the use of non-standard tags.

It is important to include the correct doctype declaration at the beginning of an HTML document to ensure that the web page is rendered correctly in different web browsers.

HTML anchor Tag

The HTML <a> tag is used to create hyperlinks, which allow users to navigate between web pages.

Here is an example of how to use the <a> tag:

				
					<a href="https://www.example.com" target="_blank" rel="noopener">Click here to visit Example.com</a>

In this example, the <a> tag is used to create a hyperlink to the website “https://www.example.com“. The text “Click here to visit Example.com” is the visible link text that the user can click on.

The “href” attribute is used to specify the destination URL that the user will be taken to when they click on the link. In this case, the destination URL is “https://www.example.com“.

HTML abbr Tag

The HTML <abbr> tag is used to define an abbreviation or acronym. It can be used to provide an explanation of the abbreviation or acronym when a user hovers their mouse over the text.

Here is an example of how to use the <abbr> tag:

				
					<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>

Output

The WHO is a specialized agency of the United Nations.

In this example, the <abbr> tag is used to define the abbreviation “WHO” for the World Health Organization. The “title” attribute is used to provide the full text of the abbreviation, which will be displayed as a tooltip when the user hovers their mouse over the abbreviation.

The resulting text will look like this: “The WHO is a specialized agency of the United Nations.”

When a user hovers their mouse over the “WHO” text, they will see a tooltip with the full text “World Health Organization”.

HTML acronym Tag

The HTML <acronym> tag was used in older versions of HTML to define an acronym, similar to the <abbr> tag. However, it is now deprecated in favor of using the <abbr> tag.

Here is an example of how to use the <acronym> tag:

				
					<p>The <acronym title="Hypertext Markup Language">HTML</acronym> is used to create web pages.</p>
Output

The HTML is used to create web pages.

In this example, the <acronym> tag is used to define the acronym “HTML” for Hypertext Markup Language. The “title” attribute is used to provide the full text of the acronym, which will be displayed as a tooltip when the user hovers their mouse over the acronym.

The resulting text will look like this: “The HTML is used to create web pages.”

HTML address Tag

The HTML <address> tag is used to provide contact information for the author or owner of a web page. This tag can contain the physical address, email address, phone number, or any other relevant contact information.

Here is an example of how to use the <address> tag:

				
					<address>
    Ravi kumar<br>
    123 Main Street<br>
    Anytown, USA<br>
    Phone: (555) 555-1234<br>
    Email: ravi.doe@example.com
</address>
Output
Ravi kumar
123 Main Street
Anytown, USA
Phone: (555) 555-1234
Email: ravi.doe@example.com

In this example, the <address> tag is used to provide contact information for John Doe. The tag contains multiple lines of information, separated by the <br> tag to create line breaks.

The <address> tag is a semantic tag that is used to indicate that the enclosed content provides contact information for the author or owner of the web page. However, it is important to note that the <address> tag should not be used for general contact information, such as a website’s customer support email or phone number. Instead, these types of contact information should be included in the website’s footer or contact page.

HTML applet Tag

The <applet> tag is an HTML element used to embed Java applets in a web page. However, the <applet> tag is now deprecated and no longer supported in modern web browsers. Instead, modern web development uses alternative technologies such as HTML5, CSS, and JavaScript.

Here’s an example of how the <applet> tag was used in the past:

				
					<applet code="MyApplet.class" width="300" height="300">
    Your browser does not support Java applets.
</applet>

Output

Your browser does not support Java applets.

In this example, the code attribute specifies the name of the Java applet class file that should be loaded. The width and height attributes define the dimensions of the applet. If the browser does not support Java applets, the text “Your browser does not support Java applets.” will be displayed instead.

Again, please note that the <applet> tag is deprecated and should not be used in modern web development.

HTML area Tag

The HTML <area> tag is used to define an area inside an image map that is clickable and navigates to a specific URL when clicked. Here is an example:

				
					<!DOCTYPE html>
<html>
  <head>
    <title>Image Map Example</title>
  </head>
  <body>
    <h1>Image Map Example</h1>
    <img decoding="async" src="map.png" alt="Map" usemap="#map">
    <map name="map">
      <area shape="rect" coords="0,0,100,100" href="https://www.example.com/page1">
      <area shape="circle" coords="150,150,50" href="https://www.example.com/page2">
      <area shape="poly" coords="250,250,300,300,250,350" href="https://www.example.com/page3">
    </map>
  </body>
</html>
Output  
Image Map Example
Map  

HTML5 article Tag

The <article> tag in HTML5 is used to define a self-contained piece of content that could potentially be distributed or reused independently of the rest of the page. It’s often used to mark up blog posts, news articles, forum posts, and other types of content that can stand alone.

Here’s an example of how you might use the <article> tag to mark up a blog post:

				
					<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <article>
      <header>
        <h2>My First Blog Post</h2>
        <p>Posted on January 1, 2023</p>
      </header>
      <p>Here's the content of my first blog post...</p>
      <p>And here's some more content...</p>
      <footer>
        <p>Tags: <a href="#">tag1</a>, <a href="#">tag2</a>, <a href="#">tag3</a></p>
      </footer>
    </article>
  </body>
</html>
Output My Blog
My Blog
My First Blog Post

Posted on January 1, 2023

Here’s the content of my first blog post…

And here’s some more content…

In this example, the <article> tag is used to contain the content of the blog post. The <header> and <footer> tags are used to define the header and footer of the article, respectively. Within the article, we have several paragraphs of content, and we also include some tags at the end of the article in the footer.

Note that the <article> tag should only be used for content that is self-contained and could be distributed or reused independently of the rest of the page. If the content is not self-contained, you should use a different tag, such as <div> or <section>.

HTML5 asideTag

The <aside> tag in HTML5 is used to mark up content that is tangentially related to the main content of the page. It’s often used for things like sidebars, callouts, or supplementary information.

Here’s an example of how you might use the <aside> tag:

				
					<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <header>
      <h1>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>
    <main>
      <article>
        <header>
          <h2>My Article</h2>
          <p>Posted on January 1, 2023</p>
        </header>
        <p>Here's the content of my article...</p>
        <p>And here's some more content...</p>
        <footer>
          <p>Tags: <a href="#">tag1</a>, <a href="#">tag2</a>, <a href="#">tag3</a></p>
        </footer>
      </article>
      <aside>
        <h2>Related Links</h2>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </aside>
    </main>
    <footer>
      <p>&copy; 2023 My Website</p>
    </footer>
  </body>
</html>
Output My Website
My Website
My Article

Posted on January 1, 2023

Here’s the content of my article…

And here’s some more content…

© 2023 My Website

HTML5 Audio Tag with Example

				
					<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

In this example, the <audio> tag contains a nested <source> tag that specifies the location of the audio file (in this case, “audiofile.mp3”) and its file type (in this case, “audio/mpeg”). The controls attribute is used to show the default audio controls (play, pause, volume, etc.). If the user’s browser doesn’t support the <audio> tag, the text “Your browser does not support the audio element.” will be displayed instead.

Note that you can also include multiple <source> tags within the <audio> tag, each with a different file type, to ensure that the audio can be played in different browsers. For example:

				
					<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
Output

In this example, the browser will try to play the MP3 file first, and if that doesn’t work, it will try the OGG file. If neither file type is supported, the fallback text will be displayed.

A to Z list of HTML tags with examples:

Tags Description Example
< a > creates a hyperlink to another web page, file, or location Try it
< abbr > defines an abbreviation or acronym Try it
< address > defines contact information for the author or
owner of a document		 Try it
< area > defines a clickable area within an image map Try it
< article > defines an independent, self-contained content unit Try it
< aside > defines content aside from the main content of the document Try it
< audio > defines sound or audio content Try it
< b > defines text as bold Try it
< base > specifies the base URL and target for all
relative URLs in a document		 Try it
< bdi > isolates a span of text that might
be formatted in a different direction
from other text outside it		 Try it
Tags: , ,

Leave a Reply