HTML Attributes


In the previous section we learn HTML tags. Now in this Section we learn about HTML Attributes. Attributes are the properties of HTML Tags such as ID, Class, Align and many more


HTML Attributes

Sr.No Attribute Name Description
1 <id> Defines the id of tag
2 <name> Defines the name of tag
3 <class> Defines the CSS Class of tag
4 <style> Defines the CSS of tag
5 <title> Defines the Title of tag
6 <lang> Defines the Language of tag
7 <align> Defines the Horizontal Alignment of tag
8 <valign> Defines the Vertical Alignment of tag
9 <height> Defines the Height of tag
10 <width> Defines the Width of tag
11 <background> Defines the Background Color of tag
12 <href> Defines the url of tag
13 <src> Defines the Image Path of tag


A Sample Attributes Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="PTagID" name="PTagName" class="MyClass" style="margin:10px" title="This is Title" Height="100px" width="100px" /p>
</body>
</html>

Points to Remmember

  • All HTML Tags have Attributes
  • Attributes provide additional information about the HTML Tag


Href Attribute

The anchor Tag <a> makes the Hyperlink and href attribute tells about the url

<a href="https://www.tutorialschools.com">Visit Tutorial Schools </a>

src Attribute

The image Tag <img> places the image inside the HTML Page and src attribute tells about the path of the image

<img src="img.jpg">

Width and Height Attribute

The image Tag <img> Tag also contain height and width attributes and below example gives the height and width of image

<img src="img.jpg" width="500" height="500">

Alt Attribute

The image Tag <img> Tag also contain alt attributes and below example shows the alt text of the image.Alt text will be visible when image is not displayed due to some reason

<img src="img.jpg" alt="Image Text">

style Attribute

The style attributes can be added to all elements in the HTML.This attributes is used for the giving styles to the HTML Element such as font,size and many more

<p style="color:blue;">This is a blue paragraph./p>

title Attribute

The title attributes can be added to all elements in the HTML.This attributes is used for the giving extra information of the HTML Element

<p title="This is a paragraph">This is a paragraph./p>

lang Attribute

The lang attributes is must to add in HTMl Page.This attributes tells about the language of the HTML page. It helps search engine and browser for understanding about the language of the page

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>

Tip

  • Always use lowercase attributes
  • Both single and double quotes can be used to quote attribute values.double quotes are most common. In some situations where the attribute value contains double quotes then it is necessary to wrap the value in single quotes


HTML5 Attribute

In HTML5 some attributes does not consist of name/value pair but they have only name only. These attributes are called Boolean attributes such as checked, disabled, readonly, required

<div id="example" class="example-font">
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>
</div>