FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@coder 675

What is the use of HTML Attributes?


2021-10-12 12:34 · 15 min read

What are ATTRIBUTES?

Attributes define additional characteristics or properties of the element such as image width and height.
HTML attributes are some special words used inside the opening tag of an HTML element to control the element's behavior. HTML attributes can modify HTML elements, so you can say HTML attributes are the modifier of HTML elements. HTML attributes usually consists of name/value pairs name="value"
some attributes must be required for certain elements. For example, a <img> tag must contain src and alt attributes.

<img src="../img/html5.png" width="30" height="30" alt="HTML 5 Icon">
  • The HTML attribute is added to an HTML start tag.
  • HTML attributes generally appear as name-value pairs, separated by = eg. attribute-name ="value"
  • Most every HTML element can have attributes

 

</Some General Purpose Attributes >

Usually, HTML elements can take any of several most common standard attributes

 

Attributes to Identify the element

The id Attribute

The id attribute is used to give a unique name or identifier to an element within a document, So we can easily identify elements and apply a style to them. This makes it easier to select the element using CSS or JavaScript.
 

Example

Here is a simple example of a id attribute.

<element id="unique-name">element content</element>

Note: The id of an element must be unique within a single document. No two elements in the same document can be named with the same id, and each element can have only one id.ID have the high priority then class. mean style appied on id can overwrite class style.

 

The Class Attribute

Like the id attribute, the class attribute is also used to identify elements. But unlike id, the class attribute does not have to be unique in the document. This means you can apply the same class to multiple elements in a document and you can also add multiple to the same element separated by space class="tdb-school c-tdb-gray".
 

Example

Here is a simple example of a class attribute.

<!-- example of a class -->
<element class="tdb-school">element content</element>
<!-- apply same class on mutiple elemests-->
<element2 class="tdb-school">element content</element2>
<!-- apply multiple class on same element-->
<element2 class="tdb-school c-tdb-gray">element content</element2>

 

Do you know? 

Since a class can be applied to multiple elements, therefore any style rules that are written to that class will be applied to all the elements having that class, and the class applied in the last have high priority and can overwrite the style of previously applied classes

e.g:-In class="tdb-school c-tdb-gray" c-tdb-gray have more priority than tdb-school and if you apply color style through both classes then c-tdb-gray will be applied.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#uniqueName {
color: white;
background-color: rgb(0, 102, 255);
padding: 10px 35px;
border: none;
border-radius: 5px;
text-align: center;
}
.tdb-school{
color: white;
background-color: rgb(0, 255, 196);
padding: 10px 35px;
border: none;
border-radius: 5px;
text-align: center;
}
.c-tdb-gray{color: gray;}
</style>
</head>
<body>
<!-- simple example of a id attribute.-->
<div id="uniqueName">id example</div>

<!-- simple example of a class attribute-->
<h1 class="tdb-school">element 1</h1>

<!-- simple example of a same class attribute-->
<h1 class="tdb-school">element 2</h1>

<!-- simple example of a multiple class attribute-->
<h1 class="tdb-school c-tdb-gray">element 3</h1>
</body>
</html>

 

Some Other Attribute

The Title Attribute

The title attribute gives a suggested title for the element. This attribute is used to provide advisory text about an element or its content.

<element title="Title of this element.">element content</element>

Do you know?

 When you hover over an element that has a title attribute then you will see a tooltip by the web browsers when the user places a mouse cursor over the element.

 

The Style Attribute

The style attribute allows you to apply inline CSS to elements such as color, font, padding, margin, etc.
Let's check out an example to see how it works:

<p style="background-color:black;padding: 10px;color:white;margin:40px;">This is a paragraph.</p>
<div style="background-color:blue;">Some content</div>

Do you know ? Inline style have the highest priority and style applied in inline style tag will overwrite all style . And intresting thing is you can overwrite every previour define style by using !important
Click here to learn more about style.

The scr and alt Attribute

The <img> tag is used to insert/embed an image in an HTML web page and the src attribute provides the path of the image.
and alt is used to define the alternate text that will show when the image is not found.

<img src="image.jpg" alt="This text display when image is not found.">

Do you know ? Alt attribute is an HTML attribute applied to image tags to provide a text alternative for search engines. Applying images to alt tags such as product photos can positively impact on SEO.

The Width and Height image attributes

The width and height attribute specifies the width and height of the image.
The width and height are is specified in pixels by default:

<img src="img.jpg" width="100" height="200">

Note :- Use only one (width/height)attribute at a time to maintain ratio of image width/height.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TDB School </title>
<style>
.title_example{
color:#7D9029;
padding:2px 5px;
border:2px solid;
border-radius:5px;
cursor:pointer;
}
</style>
</head>

<body>
<!--simple example of a id title attribute.-->
<span title="Title of this element." class="title_example">Hover me for few second </span>
<!-- simple example of a style attribute-->

<p style="color: blue;font-size:15px;">This is a paragraph.</p>

<div style="background-color:black;padding: 10px;color:white;margin:40px;">Some content</div>

<!-- simple example of a same src and alt attribute in this example alt don't show because image source is correct-->
<img src="html5.png" alt="This text display when image is not found.">
<!-- simple example of a same src and alt attribute in this example alt show because image source is incorrect or image is missing-->

<img src="html-5.png" alt="This text display when image is not found.">
<br>
<!-- simple example of a width and height attribute-->

<img src="html5.png" width="100" height="200">
<!-- info :-Use only one (width/height)attribute at a time to maintain ratio of image width/height.>

</body>
</html>

 

Attributes.

AttributeOptionsFunctionsElements
aligncenter, right, leftChange Horizontal alignment<P> tag , <font> tag
bgcolornumeric, hexidecimal, RGB values colorSet Background color<body> tag
idUser DefineUnique Names of an element for use with Cascading Style Sheets.(id must be unique)Most of the elements
classUser DefineNames of an element for use with Cascading Style Sheets.(Class can be same over multiple elements )Most of the elements
titleUser DefineThis attribute is used to provide advisory text about an element or its contentMost of the elements
StyleAll CSS propertiesuse to apply inline CSSMost of the elements
widthNumeric value(px)set the width of tables, images, or table cells.<table>, <images>, or <table cells>
HeightNumeric value(px)set the Height of tables, images, or table cells.<table>, <images>, or <table cells>
Eventonclick , ondblclick , onmousedown , onmousemove etc.
You will learn more about Events in our HTML Event chapter.
set the Height of tables, images, or table cells.<table>, <images>, or <table cells>


 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer