Attributes provides extra information to the HTML elements or tags
They are mainly added at the opening/start tag of an element
The syntax of attributes is
<element name of attribute = “value”> content </element>
Types of Attributes
HTML has a wide range of attributes, below I will discuss a few commonly used HTML attributes others will be discussed later on other topics.
- id attribute
This type of attribute can be used on any HTML element it is also known as a global attribute because it can be used on any element.
The id attribute is used to uniquely identify that element from other elements on the same page or to another page.
The rule for naming the value of an id attribute is that it should start with a letter or an underscore (not a number or any other character).
Example
<!DOCTYPE html>
<html>
<head><title>Attributes</title></head>
<body>
<p>There is something special about foods every food has a special nutrient inside them</p>
<p id=”trial”>I like trying out new nutritious recipes every time I come across an interesting food </p>
</body>
</html>
2. Class Attribute
The class name in a class attribute is case sensitive.
The main function of using a class attribute is for classification of similar element, by doing this it uniquely identifies an element within a document.
The class attribute cannot be used in the following elements
<html>, <head>, <title>, <style>, <param>, <script>, <base>, <basefront>, <meta>
Example
<!DOCTYPE html>
<html>
<head><title>Attributes</title></head>
<body>
<h1 class=”Foods”>
<p>There is something special about foods every food has a special nutrient inside them</p>
<p>I like trying out new nutritious recipes every time I come across an interesting food </p>
<h2 class=”Beverages”>
<p> No one in this world hates a fizzy drink, the feeling of such drinks is so addicting </p>
</body>
</html>
3. Style attribute
The style attribute is mainly used to control the appearance of web pages. The style attribute can be used with the CSS which will be covered later on the course.
It specifies an inline style which means in a content or paragraph on a web page it can contain more than one element i.e <b>, <em>, <i> e.t.c
Style attribute can be used to change the appearance of : Background color, Color, Background images, Padding, Text decorations.
Example
<!DOCTYPE html>
<html>
<head><title>Attributes</title></head>
<body>
<h1 style=”background-color:blue”> Foods </h1>
<p>There is something special about foods every food has a special nutrient inside them</p>
<p>I like trying out new nutritious recipes every time I come across an interesting food </p>
<h2 class=”Beverages”>
<p> No one in this world hates a fizzy drink, the feeling of such drinks is so addicting </p>
</body>
</html>
4. Title attribute
This type of an attribute provide additional information to the content of the web page. The additional information is mainly displayed as a tooltip.
Example
<!DOCTYPE html>
<html>
<head><title>Attributes</title></head>
<body>
<h1 class=”Foods”>
<p title=”I’m a tooltip”>There is something special about foods every food has a special nutrient inside them</p>
<p>I like trying out new nutritious recipes every time I come across an interesting food </p>
<h2 class=”Beverages”>
<p> No one in this world hates a fizzy drink, the feeling of such drinks is so addicting </p>
</body>
</html>
Exercise
- What is a HTML attribute?
- Explain the following terms: Global attribute and inline styling.
- State and explain the FOUR main types of attribute.
- Outline the elements that can not use a class attribute.
- Write the general syntax of an attribute.
Study with Jamila 