HTML Attributes - What Are HTML Attributes? with Examples

Introduction to HTML Attributes | Syntax of HTML Attributes | Example of HTML Attributes | HTML Core Attributes

Do you know what HTML Attributes are? You must learn HTML attributes to add additional information to HTML tags or elements.

In this HTML Attributes tutorial, you can learn about HTML Attributes. What are HTML Attributes? You can learn about its type and how to use HTML Attributes on a web page.

HTML is a "Hypertext Markup Language." And it contains tags/elements.

Which tells the web browser how to display the content.

Note: Attributes are an important topic of HTML. Before you know HTML Attributes, you need to understand what HTML Tags and HTML Elements are.

HTML Attributes

{tocify} $title={Table of Contents}

Introduction to HTML Attributes?

HTML tags/elements are used to create a web page or HTML document. For example, the <head> tag is used for the head section. 

And if additional information is to be added to the  <head> tag, then by using HTML Attributes, you can add additional information to the header section.

See the example of the HTML attribute below:

<h1 title="This is heading tag">Example of title attribute by akashtimes.com </h1>{codeBox}

By adding this on the header section to the HTML editor, viewing it in the web browser, and keeping your mouse cursor on the heading (Example of title attribute), you will see the description “This is heading tag.”

What are HTML Attributes?

HTML Attributes define additional information about HTML tags/elements. Such as, HTML attributes are used to give additional information like title, height, weight, etc.

Attributes are always specified in the open tag and are usually accompanied by a name/value such as Name= “value. And it is mandatory to be closed with an end quotation mark (”).

Some of the features of HTML Attributes are:

1. HTML attributes provide additional information to tags/elements or are a modifier of an HTML element.

2. Each element or tag can have attributes that determine the element's behavior.

3. HTML attributes are always applied from the beginning tag and are closed with a quotation mark (”).

4. Attributes should always be associated with their name and value.

5. You can use HTML attributes in a single HTML element. But after giving an attribute, give a space. That is, there is a need to give space between two attributes.

6. Remember, name and value in HTML attributes are case sensitive, so they should be written in Lowercase.

Syntax of HTML Attributes:

<element attribute_name= "value"> content </element>{codeBox}

Example of HTML Attributes

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 title="This is the heading tag"> HTML Attribute Example </h1>

<p style="height: 40px; color: red">This is a red colored HTML element.</p>

<p style="color: blue">This will change the color of the content to blue</p>

</body>
</html>{codeBox}

Please copy and paste the code into your HTML text editor, save the file as at.html and open it in the browser.

The output will look something like this in the browser:

Example of HTML Attributes

Attributes example Explanation:

There are four sets of HTML tags that are required to create the basic structure for every HTML file:

<html> tags

<head> tags

<title>   tags

<body>  tags    

Then we used the HTML title attributes in the <h1> tag inside the <body> tag :

<h1 title="This is the heading tag"> HTML Attribute Example </h1>{codeBox}

2 paragraph <p> tags are used after title attributes. Both are style attributes but keep their value separately:

<p style="height: 40px; color: red">This is a red colored HTML element.</p>{codeBox}

In the previous paragraph tag, we have used style attributes. This property is used to apply a CSS property to any HTML element.

And we have set the value of this style attributes to 40px height and red color.

<p style="color: blue">This will change the color of the content to blue</p>{codeBox}

This second one uses the <p> tag and its style attributes which turns the color of the paragraph blue.

Note: Here, we have given an example of only 3 HTML Attributes.

Similarly, many HTML attributes exist with different values.

HTML Core Attributes

Most HTML element tags used in the body of an HTML document can have the following HTML code attributes:

  • Title.
  • ID (Id).
  • Style.
  • Class.

#1. Title Attributes

HTML Title attribute is used to give more information about any HTML elements/tags.

For example, if you add a title attribute to a <p> (paragraph) tag. So as soon as you mouse over that paragraph element,

So the title value will be visible.

Syntax of Title Attribute:

<elementtitle = "text">{codeBox}

#2. Id Attributes

HTML Id Attributes is a unique identifiers.

It is used to refer to a web page.

ID attributes # sign is used to add CSS elements. And in HTML, id="."

Syntax of ID Attribute:

<tag id=".">....</tag>{codeBox}

#3. Style Attributes

The HTML Style Attribute can be used to set how an HTML document is to be rendered in a web browser.

The style attribute can be added to any HTML document in 3 ways.

  • Inline style.
  • External Style.
  • Embedded style.

In HTML, the Style attribute is used inside the HTML start tag.

You can call it inline style.

The style attribute can be more than one.

Syntax of Style attribute:

<tag style="..."></tag>{codeBox}

#4. Class Attributes

HTML class attributes are also used to give more information to HTML elements.

It is used more in CSS to give style or formatting.

In this, more than one class value has to be separated by giving space.

Syntax of Class Attribute:

<tag class="..."></tag>{codeBox}

Conclusion:

Friends, according to my expertise, I have written complete information to help you on “HTML Attributes.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

Post a Comment

If you have any problem please feel free to contact us by - AKASH TIMES

Previous Next

نموذج الاتصال