Skip to main content

HTML Tags

Introduction​

HTML tags are the building blocks of an HTML document, defining the structure and content of a web page. In this tutorial, you will learn about the syntax of HTML tags, how they form elements, and how to use them with attributes to create a well-structured web page.

HTML Tag Syntax​

An HTML tag is a keyword enclosed in angle brackets, < and >. Most HTML elements consist of an opening tag, a closing tag, and content between them. The closing tag has a forward slash, /, before the keyword. For example:

HTML
<p>This is a paragraph.</p>

Some HTML elements, called void elements or self-closing elements, do not have a closing tag or content. Instead, they are represented by a single tag with a forward slash before the closing angle bracket. For example:

HTML
<img src="image.jpg" alt="An example image" />

Common HTML Tags​

Here are some commonly used HTML tags and their purposes:

  1. <h1> to <h6>: These tags represent headings, with <h1> being the largest and <h6> being the smallest. They are used to define the structure and hierarchy of the content.
HTML
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
  1. <p>: The paragraph tag is used to define a block of text, creating a new line before and after the content.
HTML
<p>This is a paragraph of text.</p>
  1. <a>: The anchor tag is used to create hyperlinks, allowing users to navigate between pages or to external resources.
HTML
<a href="https://www.example.com">Visit Example.com</a>
  1. <img>: The image tag is used to display images on a web page. It requires a src attribute to specify the image source and an alt attribute to provide a description for accessibility.
HTML
<img src="image.jpg" alt="An example image" />
  1. <ul> and <ol>: These tags are used to create unordered (bulleted) and ordered (numbered) lists, respectively. They contain <li> tags to define list items.
HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Using Attributes with HTML Tags​

Attributes are used to provide additional information or functionality to HTML elements. They are included in the opening tag and consist of a name-value pair separated by an equal sign. For example:

HTML
<a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a>

In this example, the href attribute specifies the destination URL, and the target attribute tells the browser to open the link in a new tab or window.

Conclusion​

HTML tags are the fundamental building blocks of a web page, defining the structure and content of the document. Understanding the syntax of HTML tags and how to use them with attributes is crucial for creating well-structured and functional web pages.

In this tutorial, you learned about the syntax of HTML tags, how they form elements, and how to use them with attributes.