ATTRIBUTES IN HTML

❮ Prev Next ❯

In this section, you will learn about attributes in HTML, commonly used attributes, and its use

Generally, you use HTML elements in its simplest form like <p>A paragraph</p>.

But you can add something extra within the HTML elements. With the use of attributes in the elements, you can control the element's looks, its behaviour, size of content, the position of the content and can add other useful information with the element.

HTML attribute

HTML attribute is special words that give additional information to the HTML element. attributes have two components name and value.

Example

<p>A plane element.</p>
<!-- title attribute used below -->
<p title="paragraph">A paragraph with title attribute.</p>

Output:

HTML attribute is specified in starting tag only. You can add more than one attribute to an element by giving space between them.

Example

<!-- more that 1 attribute -->
<img src="cat.jpg" alt="cat image">

The attribute has 2 properties:

name: - name is the first part of the attribute which specifies the name of the attribute.
value: - value is the second part of the attribute and it contains the value of the attribute.

Syntax

<element name="value">Content of the element</element>

Example

<h2>There are two attributes added in following paragraph</h2>
<p style="color:red" title="a paragraph">This paragraph is Red.</p>

▶ Run the code

Core Attributes In HTML

There are some core attributes in HTML which can be used with most of the HTML element. These attributes are:

style attribute
class attribute
id attribute
title attribute

1. HTML style attribute

The style attribute in HTML is used to define inline style in our element. You can specify CSS rules directly within the element using the style attribute.

To use the style attribute and add inline CSS to the elements use style as name and CSS properties as value for the attribute.

<body style="background: steelblue;">
  <h2 style="font-size: 40px;">Styling Body, heading and paragraph using style attribute.</h2>
  <p style="color:yellow" title="a paragraph">This paragraph is Red.</p>
</body>

▶ Run the code

Output:

2. HTML class attribute

The class attribute can be used and is used in almost all HTML elements.

When a class is defined in any HTML element then that element contains all the property mentioned for that class.

Basically, a class attribute is used to put an element in some defined style category.

<style>
  .box {
    color: white;
    background: skyblue;
    font-family: sans-serif;
    padding: 10px;
  }
</style>

<p class="box">Setting 'box' class to the element.</p>

▶ Run the code

Output:

An HTML element can have more than 1 classes. Multiple classes in HTML are separated by space.

<style>
  .box {
    color: white;
    background: skyblue;
  }

  .bar {
    font-family: sans-serif;
    padding: 10px;
  }
</style>

<p class="box bar">Setting 'box' and 'bar' class to the element.</p>

Output:

3. HTML id attribute

The id attribute is used to uniquely identify any HTML element. An HTML document can't have more than 1 same id, each and every id should be unique.

The id attribute is used by CSS to style the element and used by javascript to perform certain tasks of a specific element.

<style>
  #id1 {
    color: brown;
    font-family: sans-serif;
    background-color: bisque;
  }
</style>

<p id="id1">Setting 'id1' id to the element.</p>

▶ Run the code

Output:

Note: Both class and id look the same when used for CSS but you can use a specific class as many times you want on your web page but it can be used only once.

4. HTML title attribute

The title attribute can be used on almost any element in the document. It is used to provide additional information on the content of the element.

When you take the mouse pointer over the element with some title it shows the title of the element as a tooltip.

<p title="This is title">Hover mouse over me.</p>

▶ Run the code

Other useful HTML attributes

Apart from core attributes, there are other useful attributes that used with other HTML elements.

href Attribute

In anchor element (<a>) href attribute is used to specify the address to the hyperlink.

<a href="https://www.tutorialstonight.com">Home Page</a>

▶ Run the code

src Attribute

src attribute is used to define file location. It accepts the URL of the resource. It is used with <img> , <iframe>, <audio>, <video>, etc.

<img src="assets/flowers.jpg">
<script src="test.js"></script>

▶ Run the code

alt Attribute

The alt attribute is added as an alternate text in a <img> tag. It holds a description of the image.

The text provided in the alt attribute is shown when the image is not loaded due to the unavailability of an image or some error. It is not mandatory to use alt attributes but is incredibly useful for accessibility. Screen readers read this to their users.

<p>image below does not exist so alt text is printed.</p>
<img src="image.jpg" alt="this is an image">

▶ Run the code

Points to remember:

HTML attribute gives additional information to the element which can be used later.
HTML attributes are only defined in starting tag.
An element can have more than one attribute.
All HTML element has 4 core attribute: title, style, id, and class.
The href attribute in <a> tag specifies the URL of the page link goes to.
The alt attribute in the <img> tag specifies alternate text to the image.

HTML Element

❮ Prev Next ❯