</Some General Purpose Attributes >

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

Attributes to Identify 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 element adn apply style on it . 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 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 seprated 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 style of previous applied classes

e.g :-In class="tdb-school c-tdb-gray" c-tdb-gray have more priority then tdb-school and if you apply color style through both class 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>

Try it Yourself

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 a element which have title attribute than you will see a tooltip by the web browsers when the user place mouse cursor over the element.

Hover me

The Style Attribute

The style attribute allows you to apply Inline css to the element 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 provide the path of the image.
and alt is used to define alternate text that will show when 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 is 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>

Try it Yourself

Attributes.

Attribute	Options	Functions	Elements
align	center, right, left	Change Horizontal alignment	<P> tag , <font> tag
bgcolor	numeric, hexidecimal, RGB values color	Set Background color	<body> tag
id	User Define	Unique Names of an element for use with Cascading Style Sheets.(id must be unique)	Most of the elements
class	User Define	Names of an element for use with Cascading Style Sheets.(Class can be same over multiple elements )	Most of the elements
title	User Define	This attribute is used to provide advisory text about an element or its content	Most of the elements
Style	All css properties	use to apply inline css	Most of the elements
width	Numeric value(px)	set the width of tables, images, or table cells.	<table>, <images>, or <table cells>
Height	Numeric value(px)	set the Height of tables, images, or table cells.	<table>, <images>, or <table cells>
Event	onclick , 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>

HTML Attributes

</HTML ATTRIBUTES>

What is an ATTRIBUTES ?

</Some General Purpose Attributes >

Attributes to Identify element

The id Attribute

Example

The Class Attribute

Example

Some Other Attribute

The Title Attribute

The Style Attribute

The scr and alt Attribute

The Width and Height image attributes

Attributes.

</HTML> Quiz Question>