Hello, world!

Attributes HTML

In this section of the HTML Tutorial you will learn how to handle HTML attributes, in brief the HTML Attributes modidifes and changes the attributes of the HTML Elements.


Definition:

HTML attributes are responsible for modifying web elements. HTML elements can contain attributes. These HTML Attributes give further information regarding an HTML element. They are constantly stated in the start tag.
HTML Attributes generally appear as name/value pairs such as: name="value", wherein the name is the property you want to set and the value is what you want to be the value of the property and always  enclosed in single or double quotes.

The Core Attributes

The table below lists the four core attributes that can acquire by most of the HTML elements:

Attribute: id
Description: This attribute gives a document-wide unique identifier for an element within an HTML page.

Attribute: class
Description: This attribute gives a way of identifying the class of elements.

Attribute: title
Description: This attribute gives title concerning the element.

Attribute: style
Description: This attribute indicates an inline style within the element

The Title Attribute
Title Attribute gives further information  associated to the element it belongs to.
Though it is not required, it is usually displayed to the user as a tooltip.

Syntax:

<element title="text">

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title Attribute</title>
</head>
<body>
<h3 title="Title Attribute">How to make Titled Heading Tag</h3>
</body>
</html></html>
 
In the above example, the <h3> element has a title attribute which has the value "Title Attribute".

The id Attribute

If you already identified the unique element of your Web site, you can use style sheets to operate the element with the particular id.

There are two main reasons that might encourage you to apply an id attribute on an element. First is once an element obtains an id attribute as a unique identifier it is always accessible to distinguish merely that element and its content. Second is once you include two elements of similar name inside a Web page or style sheet, you can apply the id attribute to classify among elements that contain similar name.

Syntax:

<element id="id">
 

Example:

<p id="html">Example of id attribute</p>
<p id="css"> This example of id attribute is to make a distinction between two paragraph elements</p>
 

Output id Attribute:



The Class Attribute

The class attribute specifies one or more subtypes for an element.
It is commonly applied to associate an element in a style sheet, and identify the class of element.

Syntax:

<element class="classname">

Example:

<!DOCTYPE html>
<html>
<body>
<h1 class="intro">How to use Class Attribute</h1>
<p>Story</p>
<p class="important">Note: This is an important story.</p>
</body>
</html>

Output Class Attribute:


The Style Attribute
You can identify an inline style within the element through the application of style attribute.

Syntax:

<element style="style_definitions">

Example:

<!DOCTYPE html>
<html>
<head>
<title>How to use style Attribute</title>
</head>
<body>
<p style="font-family:Tahoma; color:#00FF00;">Style Attribute</p>
</body>
</html>
 

Output Style Attribute:


The Dir Attribute

Applying the dir attribute tells the browser the direction in which the displayed text should flow.

Attribute Values:

ltr - Default. This value corresponds to a left to right text direction.
rtl - This value corresponds to a rightto left text direction.
auto - When the text direction is unknown, the browser will consider the text direction depended on the content.
 

Syntax:

<element dir="ltr|rtl|auto">

Example:

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Dir Attribute</title>
</head>
<body>
The dir attribute tells the browser the direction in which the displayed text should flow.
</body>
</html>

Output Attribute Values:



The Lang Attribute

The lang attribute is applied to set the language of an element in HTML document.
The xml:lang attribute is the XHTML substitu:te for the lang attribute.
Values of the lang attribute are ISO-639 language codes.

Syntax:

<element lang="language_code">

Example: language code is “en” for English
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Lang Attribute</title>
</head>
<body>
The lang attribute allows you to sets the language of an element in HTML document.
</body>
</html>
 
The above example uses language code “en” for English.

Generic Attributes


Below lists some attributes that can be apply with several HTML tags.

Attribute:title
Options:User Defined
Function:This will pop-up the title of the elements.

Attribute:class
Options:User Defined
Function:This will identify an element for use with Cascading Style Sheets.

Attribute:width
Options:Numeric Value
Function:This will indicate the width of tables, images, or table cells.

Attribute:height
Options:Numeric Value
Function:This will indicate the height of tables, images, or table cells.

Attribute:id
Options:User Defined
Function:This will name an element for use with Cascading Style Sheets.

Attribute:background
Options:URL
Function:This will set a background image behind an element

Attribute:bgcolor
Options:numeric, hexidecimal, RGB values
Function:This will set a background color behind an element

Attribute:valign
Options:top, middle, bottom
Function:This will set the alignment of the  tags vertically within an HTML element.

Attribute:align
Options:right, left, center
Function:This will set the alignment of the tags horizontally

The href Attribute
Use the href attribute to indicate the URL for any kind of link or image map.
It applies the <a> tag to specify HTML links

Syntax:

<a href="URL">
 

Example:

<!DOCTYPE html>
<html>
<body>
<a href="http://www.facebook.com">Facebook link</a>
</body>
</html>
 

Output href Attribute:


The Size Attribute

You indicate the initial width in characters for an input element through the application of  the HTML size attribute.
It supports search, text, url, email, tel and password input types.
Applying the maxlength attribute will allow you to acquire the maximum number of characters.
Syntax:
<input size="number">

Example:

<!DOCTYPE html>
<html>
<body>
<img src="http://www.ilmuwebsite.com/wp-content/uploads/2014/05/html.jpg" width="142" height="142">
</body>
</html>
 

Output Size Attribute:


The Alt Attribute

The HTML alt attribute provides short description for an image if a user cannot view it or if the user uses a screen reader.
It gives an alternative information for an image once a user was unable to see it for several reasons.

Syntax:

<img alt="text">

Example:
<!DOCTYPE html>
<html>
<body>
 
<img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="facebook.com" width="142" height="142">
 
</body>
</html>

Output Alt Attribute: