Attributes

When we try out the example of attribute (i.e. style), we noticed a change in the color of all the elements to ‘blue’ inside the ‘div’ tag.

Attribute ‘name’ and ‘value’:

Attribute is defined inside the opening part of a ‘tag’. For example, in the below code, the attribute ‘style’ is defined inside the ‘div’ tag.


		  
			1 <div style="color:blue;">
 
			2 

			3 

			4 </div>

An attribute has two parts i.e. ‘name’ and ‘value’. For example, in the above code, name and value of the attribute are ‘style’ and ‘blue’ respectively.

Core attributes:

There are basically three core attributes which are used frequently in web design.

1. id: The ‘id’ is the unique name which can be given to any tag. This is very useful in distinguishing the element with other elements.


		  
				1 <p id="para1"> This is a paragraph with an id of 'para1' </p> 
  
				2 <p id="para2"> This is another paragraph with an id of 'para2' </p>

2. class: The attribute ‘class’ can be used with multiple tags. This is very useful in making groups in HTML design.


		  
				1 <p class="blue"> This is a paragraph with class 'blue' </p> 
  
				2 <span class="blue"> This is a span with class 'blue' </span>

3. Style: We already see the example of style attribute, which can be used to change the formatting of the text in HTML design. We can specify various styles which are discussed in the next chapter.


		  
				1 <p style="color:red;"> Style attribute to make the paragraph color red. </p> 
   
				2 <p style="font-weight:bold;"> Style attribute used to bold the paragraph </p>

Note: The above three attributes are used with ‘CSS (cascading style sheet)’ and JavaScript/jQuery, which are the very handy tools to enhance the look and functionalities of the web-page respectively. The CSS is discussed in Chapter 2, whereas JavaScript and jQuery are discussed in Chapter 3 and Chapter 4 respectively.

Also we can define multiple attributes for one tag as shown below,


		 
			1 <p class="my_class" id="para_with_class" style="color:green"> Multiple attributes </p>

Other useful attributes are listed in the table below:

Table 2: Other useful tags
Name	Value	Description
id	user defined names	<p id="id_of_para"> Hi </p>
class	user defined names	<p class="class_of_para"> Hi </p>
style	CSS Styles	<p style="color:red; font-weight:bold;"> Hello </p>
align	left, right, center	horizontal alignment
width	numeric value or % value	width of images and tables etc.
height	numeric value	height of images and tables etc.

Previous Next