In this "HTML Tutorial - Attributes", we will cover the syntax, scope, guideline and global attributes. Attributes are defined in all the HTML tags. With attributes, you can configure the contents of tags accordingly. Attributes are used for advanced configuration. Attributes are given additional commands by the interpreter, which tells them how to show the content of an element.
For example, if you don't want a default page background, you can change it accordingly. Similarly, if you don't want a default text color, you can also change it accordingly.
Syntax HTML Attributes
The general syntax for defining attributes in HTML is given below.
<tagName attributName = "value">
some content here
</tagName>
As you can see in the syntax above, the attributes are always defined in the start tag. These are written in pairs of name and value.
It is very easy to use attributes. All you need to know which attribute to use. Let's try to understand the use of attributes with an example.
<html>
<head>
<title> myPage </title>
</head>
<body bgcolor = "blue">
<h1 style = "color: black"> heading </h1>
<p style = "color: red">
This is a paragraph about learning html attributes.
</p>
</body>
</html>
In the above example, attributes have been used in 3 places. The background color of the page is defined by using bgcolor attribute in the first <body> tag. When you do not define a background color, by default background color is white.
But as I told you that you can configure the elements according to your attributes, so you can keep the background color that you want to keep on your page. Like I gave blue in the example.
The second attribute is used in the heading tag. This is the style attribute. With this attribute, you can apply CSS (Cascading Style Sheet) to tags. Advanced configuration is done through CSS, which will be forwarded to you. Here the color of heading has been changed by the style attribute.
The third attribute is used in the paragraph tag, which is changing the color of the paragraph, just like the heading tag.
The above example produces the below-given output.
The scope of HTML Attributes
The scope of attributes is according to their tags. The effect of the attribute that you apply with the tag remains limited to the same tag.
For example, you have defined text color green while using the style attribute in the body tag. The body tag is for the entire page so this attribute will show the entire text of the page in green.
But it will only happen until a body tag defines the small tag text in the second color. If a subtag defines the same attribute then its value in the condition will override the value of the attribute defined in the parent tag.
For example, to color green define a paragraph tag, this color will override the color of the body tag and your paragraph will show in green text. The scope of attributes in HTML is being explained by the following example.
<html>
<head>
<title> myPage </title>
</head>
<body style = "color: red">
Learn html Attribute <br>
Lean html on mybloghelp.com<br>
Learn html in HTML Tutorial - Attributes
<p style = "color: green">This is scope of HTML Attribute</p>
<p style = "color: green">This is scope of HTML Attribute</p>
</body>
</html>
In the above example, you can see that the text color of the paragraph is defined separately. It overrides the body's text color. Running this script will show the output given below.
There are some guidelines for using HTML attributes. By following which you can make better use of attributes. These are being given below.
1. Always define attributes in lower case.
2. Always define the attributes of values in the quotation mark.
HTML Global Attributes
In HTML, global attributes are attributes that are commonly used with all HTML tags. Their list is being given below.
1. id
The id attribute is used to define the unique id of a tag. Different styles can be applied to that tag from the value defined in this attribute.
<tagName id = "idName"> other content </tagName>
2. class
Class attribute is also similar to id attribute. The id of a tag is unique and can not be define for the second tag. But many elements can define the same class. This is used to apply the same styles to multiple tags.
<tagName2 class = "className2"> other content </tagName2>
3. style
Style attribute is used to apply CSS rules to an element. The CSS that is applied by this attribute is called inline CSS.
<tagName style = "attribute: value;"> content </tagName>
4. title
With the title attribute, you can specify the name of an element or give more information about it.
<tagName title = "name"> content </tagName>
5. accesskey
With this attribute, you can define a shortcut key to create a focus on a tag.
<tagName accesskey = "shortcutkeyName"> content </tagName>
6. dir
This attribute defines the direction of the content defined in the tag inside the tag. This attribute can be defined by rtl, ltr and auto three values.
<tagName dir = "value"> content </tagName>
7.lang
This attribute is used to define the language of content inserted inside the tag.
<tagName lang = "EN"> content </tagName>
There are more new global attributes defined in HTML5, which you can learn by reading related tutorials.
Hopefully, this "What is Attribute in HTML?” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips.
Previous:- Setup Environment for HTML. Next:- How to use Heading in HTML?
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.