How to learn HTML,Attributes of HTML
HTML attributes list with examples
So far, you have already seen the use of tags. however, iɴ most of the examples already given in this book, tags are used in their simplest forms. All tags also have attributes associated with them. Attributes contain some extra bit of information that can be used to customize the behavior of the tag according to the needs of the programmer.
An attribute is a characteristic of the element concerned that can be customized by the developer according to application needs. It is typically present inside the opening tag of the HTML element. moreover, an attribute consists of two parts namely, name and value.
The name of the element is used to refer to the property or characteristic that you wish to set. For example, the <p> element has an attribute align, which is used to change the alignment of text that is present in this element. Therefore, align is the name of the element, and any changes required on part of this characteristic must be done upon reference to this name.
The value of the characteristic is the property value that you wish to set and want the system to use for this element. As a rule, value is always enclosed within quotation marks. Considering the example of the characteristic name ‘align’, it can hold the values left, right, and center.
It is important to mention here that values are not sensitive to case and center or center will be understood by the system as the value “center”. With that said, the standard or convention followed for specifying values recommends the use of lower case values. The sample code to demonstrate how this works is given below for your reference.
<!doctype html>
<html>
<head>
<title>Attribute demo</title>
</head>
<body>
<p align = “center”>center aligned!</p> <p align = “left”>Left aligned!</p> <p align = “right”>Right aligned!</p>
</body>
</html>
The webpage corresponding to this code shall look like this
Core Attributes
Some attributes are used by a majority of the HTML elements and are thus referred to as core elements. These attributes include class, title, id, and style. The element ‘id’ is used for the unique identification of any HTML element inside an HTML page. This attribute is typically used in scenarios where the webpage has multiple elements of the same name. here is an example that shows how the id attribute can be used to identify between two different paragraph elements.
<p id = “CSS”>css</p>
<p id = “Html”> html</p>
The suggested title for an element can be given using the title attribute. This attribute can be declared in the same manner as the id attribute is done. The manner in which this attribute shall behave largely depends on the concerned element. In most cases, the title is displayed when the cursor’s tooltip hovers over the element or while it is loading. The sample code to demonstrate how these attribute works are given below.
When the cursor is hovered over ‘Example’, the given title is displayed alongside the cursor. One of the major requirements when creating a webpage is to associate webpages to style sheets. The class attribute is used for performing this operation. A detailed discussion on style sheets is given in one of the later chapters. HTML allows the association of a webpage to multiple style sheets. Each of these style sheets can be specified using a comma-separated list. An example of how this attribute can be used is given below for your reference. Class =”classname1 classname2 classname3" In order to specify CSS rules for the contents of an element, the style attribute may be used.
<!doctype html>
<html>
<head>
<title>demo Style Attribute</title>
</head>
<body>
<p style = “font-family:arial; color:#ff0000;”>Sample</p>
</body>
</html>
The webpage corresponding to this code will look like this
The webpage for the given code shall look like this. do not bother much about the details of CSS and the rules associated with the same. We shall look deeper into them once we discuss cascading Style Sheets in detail.
Internationalization Attributes
most XHTML elements support three internationalization attributes, which include dir, lang, and XML: lang. The direction of text flow can be specified using the dir attribute. This attribute can hold only two values, which are ltr and rtr. The former indicates that the text will flow from the left to right direction. On the other hand, the latter indicates that the text flows from right to left as in the case of languages like Arabic and Hebrew. The sample code to demonstrate the working of this attribute is given below for your reference.
<!doctype html>
<html dir = “rtl”>
<head>
<title>display directions</title>
</head>
<body>Left to Right</body>
</html>
The webpage corresponding to this code is shown below.
The position of the attribute determines its scope of control. For instance, if the tag is used within the HTML tag, then the text flow direction is accordingly set for the whole document. On the other hand, if the tag is used within a specific element of the document, then the direction is set for that element. Webpages can be created in different languages. Therefore, in order to tell the browser as to, which language the current webpage is using, the ‘lang’
an attribute is used. It is important to mention here that this attribute was kept and not removed ᴊust to maintain backward compatibility as it has already been replaced with XML: lang in XHTML documents. The sample code to demonstrate the working of this attribute has been provided below.
<!doctype html>
<html lang = “en”>
<head>
<title>Attribute lang demo</title>
</head>
<body>English</body>
</html>
The webpage corresponding to this page will look like this
As mentioned previously, the ‘lang’ attribute has been replaced with XML:lang, which is presently the standard attribute for mentioning webpage language
generic Attributes
Apart from the attributes explained above, there are some other attributes as well that can be used wit many if the HTML tags. These attributes are as follows -
Align
This attribute can take three values namely left, right and center, and is typically used to align the contents of an HTML element.
Valign
This attribute is used for vertical alignment of tags in an HTML element. It can take the values — bottom, middle, and top.
ʙgcolor
The background color for an element can be changed using the bgcolor tag. It can take numeric, hexadecimal and RGB values of colors.
ʙackground
HTML also allows you to place an image behind the element using the background tag. This tag takes the URL corresponding to the image as value.
Id
This attribute is used to define an Id that can further be used with CSS.
Class
This attribute is used to classify an element that can further be used with CSS.
Width
The width of images, tables, and cells of the table can be specified using the width attribute. It accepts numeric values.
height
The height of images, tables, and cells of the table can be specified using the width attribute. It accepts numeric values.
Title
This attribute allows the developer to set the pop-title of elements.
Originally published at https://www.techansw.site.