1. What are HTML Tags?

HTML tags are the cardinal component of any web page. Talking about HTML5 tags, their importance is evident for any web page as a web document never completes without them. Importantly, a tag is a constituent and child of an HTML element. This tutorial will discuss the syntax of HTML tags and their correct use in a document. Further, a basic list of HTML tags is discussed which are important for writing a well-structured page focusing on HTML5 standards.

Moreover, the importance and types of HTML tags will be elaborated on in this chapter. Also, there is a way to define custom tags, but that is beyond the scope of this article.

Tutorial Contents:

  1. What are Tags?
  2. Tag Syntax
  3. Accurate Usage
  4. Basic and Important tags
  5. Significane of a Tag

2. Syntax of HTML Tags

  • Writing HTML markup with correct syantax is highly recommended to fulfill HTML standards.
  • Also, writing accurate case of HTML5 tags is strict rule in XHTML markup.
  • Therefore, syntax of an HTML tag and case is a must rule to follow the HTML5 and XHTML norms.
  • However, writing incorrect or case-insensitive tags may also produce some results on the screen.
  • But these results may be inappropriate or not required and hence discouraged.

A quick glance on HTML tag syntax is below to understand its right use.

HTML Tag Syntax

<tag-name> ----- Content is writen here ----- </tag-name>

The above example show the syantax of a simple HTML tag. Lets understand this syntax from a detailed example.

Example

<!DOCTYPE HTML>
<html>
	<head><!--Head Section content goes here ---></head>
	<body>
		<h2>HTML Heading Tag</h2>
		<p>This is a paragraph.</p>
	</body>
</html>

Try in CodeLab

2.1. Components of an HTML Tag

An HTML Tag comprises some components which act as its building blocks. The list below explains all the parts to constitute an HTML5 tag. HTML Tags - Syntax and Structure of an HTML5 Tag

  • There are three main segments in any HTML5 tag
    1. Starting or initial tag
    2. Content of the tag
    3. Ending or closing tag
  • Crucially, an HTML tag comprises angular brackets < > with tag name in between
  • An HTML5 element is mostly a pair of starting and ending tag
  • However, there may be exceptions for certain tags which have only a single initial tag

3. How To Correctly Use HTML Tags

Just like every other programming language, HTML markup also has some protocols to use flawlessly in a document. The following list serves as a set of rules for the correct use of the HTML5 tags.

  • Firstly, the starting and ending tags must have the same name.
  • The only difference is that the ending HTML tag must have a forward slash / before the tag.
  • Importantly, the Content of an HTML tag must go between the tags pair unless there is a singleton element.
  • Interestingly, we can incorporate nesting of HTML5 tags and it makes this markup language more beautiful.
  • Also, the same case of an initial and closing HTML5 tag is required for XHTML.
  • It is custom to write tags in lower case.
  • However, writing tags in uppercase would produce the same results.
  • But, W3c recommends and sometimes restricts writing the tags in lower case.
  • So, we should make practice or habit of writing tags in lowercase.

4. Basic List of HTML Tags

Although, there are numerous HTML tags that perform specifically. However, certain basic tags are important, useful, and act as a foundation for a document. Below is a list of some basic tags.

4.1. Important HTML5 Tags

  • <!Doctype>: This is the very first tag in a document and tell about its type.
  • <html> and </html>: The parent tag of all the document.
  • <head> and </head>: Contains important resources and information of an HTML document.
  • <title> and </title>: The title of any web page is written in this tag and it goes inside <head> element.
  • <meta>: Important information for search engines is written inside this tag.
  • <body> and </body>: This is the parent elment of all the visible content in a document.
  • <h1> ... <h6>: Heading tags play an important role to organize the content on a page.
  • <p> and </p>: The paragraph is also an important HTML tag to write content in different sections below headings.
  • <a> and </a>: This is an important HTML tag to link some other references in your document.
  • <img>:To add images into a web page, this image tag helps the developers.

Although there are many other HTML5 tags, the above list contains some useful and important tags to write your markup.

4.2. Types of HTML5 Tags

Primarily, there are two types of HTML5 tags. We can categorize a huge tag list into the following two types depending upon their structure:

  1. Firstly, an HTML tag that has a starting and an ending tag and always comes in pair
  2. Secondly, a singleton HTML tag or elements which has no ending pair

Further, the categorization of HTML5 tags based on their usage has three types.

  1. Semantic HTML
  2. Non-Semantic HTML
  3. Presentational and Deprecated HTML

5. Importance of and Uniqueness of an HTML5 Tag

  • Talking about usability, the tags also have importance because they tell the behavior of every single component to the browser.
  • As we explained in the HTML introduction, tags do not display on the browser, instead, they use their particular features and produce useful results.
  • The importance and significance can also be explained by the truth that an HTML <img> tag will always produce an image on the screen.
  • This tag will never substitute a <a> tag that has its specification and worth.
  • Moreover, the anchor tag links some other pages and resources and will never be used for any other HTML tag.

Reference:

For learning more about all the HTML tags and elements, visit this tutorial. It contains a reference of all the HTML tags.
Check The Below Tutorials Also
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us