In this article, you will learn about HTML attributes. They are not so important anymore since all the styling is done using CSS, but still, some of the attributes are very useful in manipulating HTML tags through DOM (document object model) using CSS or JavaScript.
Before you start, learn the basic structure of HTML document by reading previous articles.
HTML Attribute Types
Each HTML elements have attributes that provide some more information about the element. These attributes are of two types
- Local Attribute
- Global Attributes
Local Attributes are element specific and only applies to a set of elements. The global attributes are those attributes which applies to any HTML element.
- ->The attributes are defined in the opening tag of an HTML element.
For example,
<p title="introduction"> Sports are important to maintain physical health</p> <p>it is a form of exercise, but with fun.</p>
- ->Attributes are name/value pair, which is name = “value”.
In the above example,
title = "introduction"
Common Global Attributes
There are many global attributes from HTML 4 and HTML 5. We will discuss the most frequently used global attributes. The list of common global attribute is given below.
- title
- lang
- id
- class
- style
title attribute
This define the title of the HTML attribute. If the title of the HTML element is defined then hovering your mouse over the element will reveal the title.
Consider the following example,
<!DOCTYPE html>
<html>
<head>
<title>Example - title attribute</title>
</head>
<body>
<h1>Red Cross</h1>
<p title="paragraph1">It helps injured soldiers in battle field. </p>
</body>
</html>Output-title attribute
The output of HTML title attribute is given in the following figure.
lang attribute
This attribute specify the language of the text content inside an HTML element.
For example
<!DOCTYPE html>
<html>
<head>
<title>Example - lang attribute</title>
</head>
<body>
<h1>English Language</h1>
<p lang="en" >English is the most popular language in the world.</p>
</body>
</html>It does not seems to be useful, because do not change anything.
Output-lang attribute
The output of the above program, the lang attribute is given in following figure.
id attribute
The id attribute is used with JavaScript and CSS codes. The CSS (Cascading Style sheet) gives style to an HTML element. It changes the element’s appearances with simple css commands. The JavaScript is make changes to HTML elements dynamically.
The id attribute is used to identify the specific element for which you want to write script or change css styling from a group of similar elements.
In the following example,
We will change the text and color of an HTML element with id attribute and JavaScript or CSS.
<!DOCTYPE html>
<html>
<head>
<title>Example – id attribute </title>
<!-- CSS Code -->
<style>
#head{
color: red;
}
</style>
<!-- End of CSS xode -->
</head>
<body>
<h1 id ="head"> Before Script Heading</h1>
<p>This is a paragraph. </p>
<!-- JavaScript Code -->
<script type="text/JavaScript">
message = "After Script Heading Value";
var el = document.getElementById("head")
el.textContent = message;
</script>
<!-- End of JavaScript code -->
</body>
</html>Output – Id Attribute
The output of the program – ID attribute is given in the following diagram.
class attribute
In the previous example, we saw an example to changing the style of header using id attribute. The id attribute is used when we want to change something about a unique HTML element.
In other cases, when you want the changes for a group of elements, you can use the class attribute. The class attribute covers more than one element that share common features.
For example,
You may want to apply some setting common to all sections or divisions in an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Example – class attribute </title>
<!-- CSS Code -->
<style type="text/css">
.section1 {
background-color: cyan;
color: blue;
}
.section2 {
background-color: black;
color: white;
}
</style>
<!-- End of CSS -->
</head>
<body>
<div class='section1'>
<h1>Heading 1</h1>
<p> This is a paragraph in section 1. </p>
</div>
<div class='section2'>
<h1>Heading 2</h1>
<p> This is a paragraph in section 2. </p>
</div>
</body>
</html>Output-class attribute
The output of the class attribute program is given below.
style attribute
HTML allows inline styling of elements, that is, you can change the color, border, size and other styles for an HTML element with a single attribute called style. The style attribute uses same kind of syntax as CSS.
In the following example we will change the color of an HTML element and display the output in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Example – style attribute</title>
</head>
<body>
<h1 style="color: magenta; font-size: 42px ;"> Title of the Page</h1>
<p> The style of the heading is changed using the 'style' attribute. </p>
</body>
</html>Output- style attribute
The output of the program with style attribute is given below. The color and font attribute is changed using the style attribute.
References
- Duckett, Jon. 2011. HTML & CSS: Design and Build Web Sites. Wiley .
- W3Schools. n.d. HTML Tutorial. Accessed Feb 2, 2018. https://www.w3schools.com/html/default.asp.
