Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
Opening Tag in HTML

Opening Tag in HTML

By Sahkal Poddar
4 mins read
Last updated: 24 Jun 2022
162 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

HTML tags are keywords that help the web browser format and display content. With the help of HTML tags, a browser can distinguish between simple content and HTML content. An HTML tag contains an Opening Tag, Content and Closing Tag`.

Syntax

But this is not the only way an HTML tag can be represented. Some HTML tags are unclosed. Example : <br>,<hr> etc. For more information on HTML tags, refer to HTML TAGS.

Attributes

An attribute in HTML Tag defines its characteristics. Attributes are placed inside the opening tag. An attribute in HTML Tag consists of two parts :

  • Name
  • Value

The Name is a property you want to set for the particular tag. For example, the division tag <div> can carry an attribute named align, the value of which will represent the alignment of the content the div tag contains.

The Value is the value assigned to the attribute. For example, the align attribute can have values such as right, left, center etc.

HTML code for the example discussed above can be represented as,

Output:

example of align attribute

An HTML tag attribute can be further divided into 4 core attributes such as :

  • Class
  • ID
  • Style
  • Title

Class attribute

The main purpose of a class attribute is to specify its class and associate the selected element with a style sheet. The value of the class attribute can also be a list of class names separated by space.

Example:

ID attribute

The ID attribute of the HTML Tag is used to uniquely identify elements in an HTML page.

There are two primary reasons that we consider while using the ID attribute.

  1. If we have two elements that have the same name in an HTML web page, we can use the ID attribute to distinguish between the tags.
  2. If a tag contains its unique ID, the tag can be used to target its content easily.

Example:

Style attribute

The style attribute in an HTML tag helps us to implement style to a respective HTML tag.

Example:

Output:

example of Style Attribute

Title Attribute

The Title attribute provides the title of the HTML tag when the cursor hovers over it. Title attribute syntax is similar to that of the ID attribute.

Example:

Output:

example of titled heading tag

How To Use Tag In HTML?

Each tag in HTML has its purpose.

For example:

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta-information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab)
  • The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

A basic HTML document must contain these basic tags.

An example of an HTML document can be represented as :

Input:

Output:

example of html tag

Accessibility Concerns

As we read more about HTML Tags, we will keep seeing some common themes. Every webpage follows HTML Semantics.

So, What is HTML Semantics?

Semantic in HTML means using the correct HTML element for the correct purpose. This means if we need a button, we will use <button> and not a <div> element.

Semantic

Non-Semantic

Semantic in HTML gives proper context to readers, which helps in reading the content of the page.

Let us keep the button example in mind :

  • Clickable
  • more focused
  • A Screenreader will identify the button as a button
  • A button has more suitable styling as the default

The button tag is more accessible to people relying on keyboard-only navigation as the button tag can be targeted with both mouse and keyboard keys. Also, the button tag can be accessed using the TAB button.

Examples of semantic elements: <table>, <article>, and <form> - Clearly defines its content.

Examples of **non-semantic** elements: and

`, which Tell nothing about their content.

<html lang="en">

While creating an HTML document, we should always keep in mind to declare its Lang inside the HTML tag. Declaring Lang will assist browsers and engines.

Browser Support

TagGoogle chromeFirefoxSafariEdge Browser
<a>YesYesYesYes
<abbr>YesYesYesYes
<address>YesYesYesYes
<area>YesYesYesYes
<article>6.04.05.09.0
<aside>6.04.05.09.0

Conclusion

  • Most HTML tags start with an opening bracket and end with a closing bracket, except a few such as <br>,<hr> etc.
  • HTML tags have special attributes which contain two fields Name and Value.
  • Attributes in HTML Tag can be divided based on the following:
  1. Class Attributes
  2. Id Attributes
  3. Style Attributes
  4. Title Attributes
  • Next, we have learned how to use proper HTML tags to meet a specific purpose, which helps the user to feel more connected to the webpage.