HTML5 Attributes

In this tutorial you will learn what are the HTML attributes and How to use them.

Attributes:

Attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value".

HTML Title Attribute:

The title attribute can (optionally) be used on any HTML element to provide extra information about the element's contents.

Example:   Try It

<h1>Sri Ramanuja e-Patashala </h1>
<p title = "About Sri Ramanuja e-Patashala">Sri Ramanuja Media Design will
 bring your company’s Web presence to the next level.
 We offer a comprehensive range of services . </p>

Note:Attribute values should always be enclosed within quotation marks. While "double quotes" are the most common, single-style quotes (also called primes) are also allowed. In some rare situations, like when the attribute value itself includes quotation marks, it is necessary to use primes. For example: name='Basic “srirep’s” tutorial'

HTML Style Attribute:

The title attribute can be used on any HTML element to provide extra information about the element's styles such as color, font, size, and more..

Example:   Try It

<h1 style="color:red;">Sri Ramanuja e-Patashala </h1>
<p title = "About Sri Ramanuja e-Patashala">Sri Ramanuja Media Design will
 bring your company’s Web presence to the next level. We offer a
 comprehensive range of services . </p>

Multiple Attributes:

You can add more than one attribute to a given element.Here's an example of adding two attributes to the Heading Element.

Example:   Try It

<h1 style="color:red;background-color:yellow;">Sri Ramanuja e-Patashala </h1>
<p title = "About Sri Ramanuja e-Patashala">Sri Ramanuja Media Design will
 bring your company’s Web presence to the next level. We offer a
 comprehensive range of services . </p>

Commonly used style attributes:

style="color:red"
style="color:rgb(25,25,150);"
style="color:red; background-color:yellow"
style="background-image:url(car.jpg)"
style="font-size:20px"
style="font-family:georgia,garamond,serif,verdana;"
style="text-align:center"
style="width:50px"
style="height:10px"
style="margin:10px"
style="padding:10px"
style="border:3px solid red";

Note: Attribute values are generally case-insensitive, except certain attribute values, like the id and class attributes. However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

Class and ID Attributes:

Class and ID attributes are used for referring HTML elements for applying styles and scripts.
The class attribute can be used on one or more tags and is used by CSS for styling. IDs however are intended to refer to a single element, meaning the same ID should never be used twice. IDs are generally used with JavaScript and internal document links.

Assign a class to an element:

In HTML you assign a class to an element like this.

Applying CSS for "heading-red" class: Try It

The class selector begins with a .period character followed by the class name to match.

<style>
.heading-red{
color:red;
}
</style>

A class can be assigned to any number of elements. And an element can be assigned any number of classes.

For example, we have two elements, both with the class highlight:

.text-green
{ 
color: green;
} 

Assign an ID to an element:

An id is like a class, but more exclusive. It can be assigned only once in an HTML document. And an element, though it can have many classes, can have only one id.

In HTML you assign an ID to an element like this.

Applying CSS for "heading-red" ID: Try It

The ID selector begins with a #hash character followed by the id name to match.

<style>
#id{
color:red;
}
</style>

Practice exercise:

1.Write an html code to display the web page as follows. View

Sri Hari Book Store

Mission

"sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web."

Products

10 Million Books across 20+ Languages, Audio Books, Gadgets & Accessories, Toys, Electronics, Mobiles & Tablets Accessories, Health Care Devices and Many More Stores.

Highlights

sriharibookstore.com has been awarded the most promising Start-Up company 2013.

The Most Prompt Customer Service & Support 2013-2014.

India's largest Book Warehouse - India Book of Records 2013 -2014.

2.Write an html code to display the web page as follows. View

Sri Ramanuja e-Patashala

New Media and Web Design

Sri Ramanuja Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services .

Meeting Your Business Needs

Our expert designers are creative and eager to work with you.Take advantage of the power of Web!

Graphic design

When it comes to Graphic Design there are so many directions you can go. We’ve created our fair share of business logos and brand guidelines,
but one of our favorite styles continues to be bringing history to life with modern illustrations.

        Learning is not  
             the product of teaching. 
               Learning is the product of 
                          the activity of learners.