HTML Attributes
So far you have learned the basics of HTML tags and elements. In this lesson I'll tell you about how you can move a step further by adding attributes in your HTML elements.
What is HTML attribute?
Basically HTML provides us with the ability to add extra pieces of information in the HTML elements with the help of "name" and "value" pairs. These "name" and "value" pairs are known as HTML attributes and are defined something like name="value". Just keep in mind that we always define the HTML attributes in the opening tag of HTML elements.
The attributes add meaning to the HTML element and really helps us in customizing the overall layout of web page according to our needs. Different HTML elements can have different types of attributes but some of the most commonly used HTML attributes are "id", "class" and "style" etc.
Now let's talk a little bit more about what i mean by "name" and "value" pairs.
Attribute name:- Attribute name is simply the characteristic of HTML element you need to define. For example, in <img /> tag we have a "src" attribute. Its purpose is to set the path of image file.
Attribute value:- Attribute value is the value of that particular characteristic of HTML element. For example, in case of "src" attribute of <img /> tag you need to provide the exact location of image to be used. Remember that you should always set the value inside quotation marks.
The name and value of attributes are not case-sensitive but according to W3C (World Wide Web Consortium) recommendation it is preferred to use lowercase letters. So, throughout this course we will follow their recommendation.
id attribute
In web page development we frequently face a situation where we have to uniquely identify a specific HTML element from a bunch of similar elements. In HTML we have an "id" attribute that is just there to help us out by uniquely identifying an HTML element. Remember that an HTML element can only have one value for "id" attribute and it should be unique throughout the whole web page.
Example
<h1 id="first">This is the first heading</h1>
<h1 id="second">This is the second heading</h1>class attribute
In real world web development scenario we try to maintain a consistent style throughout the whole website. This can be achieved in multiple ways but to minimize the amount of code we use the "class" attribute.
The basic purpose of "class" attribute is to select a group of elements and then collectively apply some functionality on them to achieve a desired objective. The functionality can be styling of these elements or trigger a function whenever an element from the group is clicked etc. The options are limitless. Remember that an element can have as many classes as you like but separate them with spaces.
Example
<p class="red">This is my first paragraph</p>
<p class="red">This is my second paragraph</p>
<p class="blue">This is my third paragraph</p>
<p>This is my forth paragraph</p>style attribute
Basically HTML is designed in such a way that we are only able to describe the content of web page. So, we definitely need some other way to add style to this content. This is possible with the help of CSS which stands for Cascading Style Sheet.
This course is specifically designed for HTML so we will not go into the details of CSS but just keep in mind that in HTML we have a "style" attribute that is just there to help us in adding CSS code to our HTML elements. By adding CSS to these elements we can really enhance the overall look and feel of the web pages.
Let's have a look into the below example to see how we can easily add CSS code inside the HTML elements.
title attribute
There are a lot of situations when we need to provide some extra information related to the HTML element. It can be achieved with the help of "title" attribute which is available for most elements.
In most web browsers the "title" attribute shows information in a tooltip whenever a person moves the mouse cursor over the element. This is very helpful when you want to provide some guide or hints to the users. It can be used on images, links, headings, paragraphs etc.
