HTML Attributes

Attributes in HTML

Quick Links


HTML Attributes provide additional information about an element or a tag,while also modifying them.Each element or tag can have attributes, which defines the behaviour of that element.

▪ Attributes should always be applied with start tag.
▪ The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.

Note : You can add multiple attributes in one HTML element, but need to give space between two attributes.


Example :

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute  Example</title>
</head>
<body>
<p align = “center”>This is center aligned</p>
<p align = “right”>This is right aligned</p>
<p align = “left”>This is left aligned</p>
</body>
</html>

Core Attributes :

Id :
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

Example :

<p id = “html”>This para explains what is HTML</p>
<p id = “css”>This para explains what is Cascading Style Sheet</p>

Title :
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute.

Example :

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = “Hello HTML!”>Titled Heading Tag Example</h3>
</body>
</html>

Class :
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

Example :

   class = “className1 className2 className3”

                  


Style :
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

Example :

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = “font-family:arial; color:#FF0000;”>Some text…</p>
</body>
</html>

The src Attribute :

The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.

Example :

                     <img src=”whitepeacock.jpg” height=”400″ width=”600″> 

Generic Attributes :

Here’s a some other attributes that are readily usable with many of the HTML tags.

align :Horizontally aligns tags.
valign :Vertically aligns tags within an HTML element.
bgcolor :Places a background color behind an element.
background :Places a background image behind an element.
id :Names an element for use with Cascading Style Sheets.
class :Classifies an element for use with Cascading Style Sheets.
width :Specifies the width of tables, images, or table cells.
height :Specifies the height of tables, images, or table cells.
title :”Pop-up” title of the elements.


Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *