Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
71 views

HTML Attributes Note

HTML elements can contain attributes that define additional characteristics like width and height. Attributes are specified as name-value pairs within start tags. Common attributes include id for uniquely identifying elements, class for applying styles, and href and src for linking and embedding media. Attributes provide metadata and customize element behavior and appearance.

Uploaded by

1536 rupali Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
71 views

HTML Attributes Note

HTML elements can contain attributes that define additional characteristics like width and height. Attributes are specified as name-value pairs within start tags. Common attributes include id for uniquely identifying elements, class for applying styles, and href and src for linking and embedding media. Attributes provide metadata and customize element behavior and appearance.

Uploaded by

1536 rupali Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Attributes

HTML Elements may contain attributes that are used to set its various properties. Attributes
define additional characteristics or properties of the element such as width and height of an
image. Attributes are always specified in the start tag (or opening tag) and usually consists
of name/value pairs like name="value". Attribute values should always be enclosed in
quotation marks. Both single and double quotes can be used to quote attribute values.
However, double quotes are most common. Both the following statements are correct.
<a​ href="https://www.javatpoint.com"​>​A link to HTML.​</a>​
<a​ href='https://www.javatpoint.com'​>​A link to HTML.​</a>​

​In HTML5, use of quotes can be omitted around attribute values like in the example below:
<a​ href=https://www.javatpoint.com​>​A link to HTML.​</a>​

Also, some attributes are required for certain elements. For instance, an <img> tag must
contain a src and alt attributes. Some attributes are defined globally and can be used on any
element, while others are defined for specific elements only.
Syntax​:
<element​ attribute_name="value"​>​content​</element>​
For Example:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
In the above example src inside the <img> tag is an attribute and image path provided is its
value. Similarly, href inside the <a> tag is an attribute and the link provided is its value, and
so on.
Attribute values are generally case-insensitive, except certain attribute values, like
the id and class attributes. However, World Wide Web Consortium (W3C) recommends
lowercase for attributes values in their specification.
Boolean attributes
There are several attributes in HTML5 that do not consist of name/value pairs but consists of
just name. Such attributes are called ​Boolean attributes​. Examples of some commonly used
Boolean attributes are checked, disabled, readonly, required, etc.
Example:
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>
General Purpose Attributes

There are some attributes, such as id, title, class, style, etc. that can be used on the majority of
HTML elements. Given below are few General Purpose Attributes.

id Attribute
The ​id​ attribute is used to give a unique name or identifier to an element within a document.
This makes it easier to select the element using CSS or JavaScript.
Example
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>
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.

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, as shown in the following example:
Example
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>
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.

style Attribute
The ​style​ attribute allows specifying CSS styling rules such as colour, font, border, etc.
directly within the element.
Example
<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>

Another Example Code


<!DOCTYPE html​>​
<html>​
<head>​
</head>​
<body>​
​<h1>​ This is Style attribute​</h1>​
​<p​ style="height: 50px; color: blue"​>​It will add style property in element​</p>​
​<p​ style="color: red"​>​It will change the color of content​</p>​
</body>​
</html>​
Output:

title attribute
The title attribute is used as text tooltip in most of the browsers. The value of
the title attribute (i.e. title text) is displayed as a tooltip by the web browsers when the user
place mouse cursor over the element. It can be used with any text or link to show the
description about that link or text. Few Examples:

<abbr title="World Wide Web Consortium">W3C</abbr>


<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>

Another Example Code


<!DOCTYPE html​>​
<html>​
​<head>​
​</head>​
<body>​
​<h1​ title="This is heading tag"​>​Example of title attribute​</h1>​
​<p​ title="This is paragraph tag"​>​Move the cursor over the heading and paragraph, and you
will see a description as a tooltip​</p>​
</body>​
</html>​

Output:
href attribute
The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address
which is specified in that link. The href attribute provides the hyperlink, and if it is blank,
then it will remain in same page​. ​For e.g.
With link address:
<a​ href="https://www.javatpoint.com/html-anchor"​>​This is a link​</a>​
Without link address:
<a​ href=""​>​This is a link​</a>​

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. For example:
<img​ src="whitepeacock.jpg" height="400" width="600"​>​

Output:

​Standard Attributes
The attributes listed below are supported by almost all the HTML 5 tags.

Attribute Options Function

accesskey User Defined Specifies a keyboard shortcut to access an element.

align right, left, center Horizontally aligns tags

background URL Places an background image behind an element

numeric, hexidecimal, Places a background color behind an element


bgcolor
RGB values

Classifies an element for use with Cascading Style


class User Defined
Sheets.

contenteditable true, false Specifies if the user can edit the element's content or not.

contextmenu Menu id Specifies the context menu for an element.

Custom attributes. Authors of a HTML document can


data-XXXX User Defined
define their own attributes. Must start with "data-".
Specifies whether or not a user is allowed to drag an
draggable true,false, auto
element.

height Numeric Value Specifies the height of tables, images, or table cells.

hidden hidden Specifies whether element should be visible or not.

id User Defined Names an element for use with Cascading Style Sheets.

item List of elements Used to group elements.

itemprop List of items Used to group items.

Specifies if the element must have it's spelling or


spellcheck true, false
grammar checked.

style CSS Style sheet Specifies an inline style for an element.

subject User define id Specifies the element's corresponding item.

tabindex Tab number Specifies the tab order of an element.

title User Defined "Pop-up" title for your elements.

valign top, middle, bottom Vertically aligns tags within an HTML element.

width Numeric Value Specifies the width of tables, images, or table cells.

Custom Attributes
A new feature being introduced in HTML 5 is the addition of custom data attributes.
A custom data attribute starts with ​data-​ and would be named based on your requirement.
Here is a simple example −
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>
The above code will be perfectly valid HTML5 with two custom attributes
called ​data-subject​ and ​data-level.​ We would be able to get the values of these attributes
using JavaScript APIs or CSS in similar way as we get for standard attributes.

Some important points:

o HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C
that it should be written in Lowercase only.
o Multiple attributes can be added in one HTML element, separated with space.

Reference links:
https://www.tutorialrepublic.com/html-tutorial/html-attributes.php
https://www.javatpoint.com/html-attributes
https://www.tutorialspoint.com/html5/html5_attributes.htm

You might also like