Sponsored Ads
Html attributes provide additional information about html elements. Most of the html element can have attributes. An attribute is used to define the characteristics of an HTML element.
Sponsored Ads
The Attribute is always used in the opening tag after the tag text and before the closing > sign.
The attribute has two parts and is specified as name value pair like name=”value”.
- The name is the property you want to set.
- The value is the value of the property to be set and is always put within quotations.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.
Attributes are optional for most elements but for some elements it is compulsory like the <a> tag and <img> tag.
Example
The href Attribute
The href attributes is used with the <a> tag to specify the link address.
<a href="https://www.tutorialmanthra.com">This is a link</a>
The src Attribute
The src attributes is used with the <img> tag to specify the location of the images file.
<img src="imgfile.jpg">
A tag can have multiple attribute separated with spaces. Again an attribute can have multiple values separated with spaces.
Example
<img src=" imgfile.jpg" width="400" height="400">
<img src=" imgfile.jpg" class=”class1 class2”>
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes or vice versa:
<p title='This is a "Tooltip" displayed on hover’>
<p title=”This is a ‘Tooltip’ displayed on hover”>
Core Attributes
There are 4 core attributes that can be used on majority of html elements (although not all)
- Id
- Class
- Title
- Style
The Id Attribute
The id attribute is used to uniquely identify any element in an html file. You can use this id in your css to style it or javascript on it. It is also possible to link to that part of the file using the href attribute.
<p id = "htmltags">This para explains what is HTML</p>
<p id = "htmlelements">This para explains what is Cascading Style Sheet</p>
You can learn about css and javascript it separate tutorials.
The Class Attribute
You can add a class to the element so that later you can add styles to the element using css. You will learn more about class while learning css. An element can have multiple classes, you just need to separate it with spaces.
Sponsored Ads
<p class = "htmltags">This para explains what is HTML</p>
<p class = " htmltags ">This para explains what is Cascading Style Sheet</p>
The difference between id and class is that you id is unique and each id in a page should be unique. But you can use class names as much as you want in a page.
The Title attribute
Title attribute is used to give a suggested title for an element. The behaviour of the title depends on the element that carries it but generally the title is displayed as a tooltip while the curser is hovered on the element.
<p title=”This is a tooltip”>Title attribute explained</p>
The Style attribute
The style attribute is used to give styles to the element by adding css codes directly in the element. You can learn more about css while learning css.
<p style = "font-family:arial; color:#FF0000;">Para Text</p>
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
- dir
- lang
- xml:lang
The dir Attribute
The dir attribute is used to tell the browser in which direction the text should flow. It can take two values the ltr (The default) and the rtl (Right to Left).
<p dir = "rtl"> Example text to show how right to left text is displayed<p>
Hear the content inside <p> tag will be displayed from right to left.
dir tag can also be used within html tag so that the entire document text is affected.
<html dir = "rtl">
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes.
<html lang = "en">
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Sponsored Ads
We will study more about Attributes in the coming chapters…
Sponsored Ads