HTML Attributes

In this tutorial, you'll learn how to use attributes to make HTML tags more meaningful.

HTML Attributes are a part of the HTML Tags & elements. An attribute is employed to define the properties of the HTML elements and is placed inside the opening tag of the element. All attributes contain two parts like name and value.

Attributes are specified as pairs. For example: attribute = "value"

Attribute Properties

  • Contains all HTML element attributes
  • HTML is always mentioned in the start or start-tag
  • An HTML tag can contain one or more attributes
  • The value of the HTML attribute is written using double ("") or single ('') quotation marks

General Purpose Attributes:

There are some attributes, such as id, class, title, style, href, lang, align, width, height, src, alt, etc. Which you can use in most HTML elements. The following section describes their uses.

The id Attribute:

The ID attribute is used to assign a unique name or identifier to any element in the document. This makes it easy to select the element using CSS or JavaScript. the following example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The id Attribute</title>
    <style>
        #container{background: red;}
        #TextInfo{color: blue;}
    </style>
  </head>
  <body>
    <div id="container">Welcome to HTML Tutorial</div>
    <p id="TextInfo">This is a paragraph.</p>
  </body>
</html>
Note : The ID of an element in a document must be unique. No two elements of the same document can be named in the same ID and each element can have one ID.

The class Attribute:

HTML class attributes are used to use the same style code in multiple HTML elements. You can apply the same class to multiple elements of a document. So the rules of any style that have written class will be applied to all the elements of that class.

The following example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The class Attribute</title>
    <style>
      .container{width:60%; margin:auto;}
      .box{border: 2px solid #ddd; padding:20px;}
      .center{text-align:center;}
      .TextInfo{color: blue; font-size:30px;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="TextInfo box center">Welcome to HTML Tutorial</div>
      <p class="box center">This is a paragraph.</p>
      </div>
  </body>
</html>

The title Attribute

The title attribute is used to provide consultative text about an element or its contents. When the user places the mouse cursor over the element, the value of the title attribute is displayed as a tooltip by web browsers. the following example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The Title Attribute</title>
  </head>
  <body>
    <h2 title="World Wide Web">WWW full form</h2>
    <img  title="This is Title Attribute" src="https://i.imgur.com/DR25PT3.jpg">
  </body>
</html>

The style Attribute

The style attribute allows you to specify CSS styling rules such as color, font, sizes, border, etc. that can be added to any HTML element using the style attribute. Here is an example.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The style Attribute</title>
  </head>
  <body>
    <h2 style="color: blue;">Style Attribute</h2>
    <p style="border: 1px solid blue;">This is a paragraph.</p>
    <img src="https://i.imgur.com/DR25PT3.jpg" style="width: 250px;" alt="Style Attribute">
  </body>
</html>

The href Attribute

A <a>, <area>, <base>, <link>, are used in HTML documents to indicate the URLs of these tags, that is, to associate them with HTML documents using the href attribute. The following example

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The href Attribute</title>
  </head>
  <body>
    <a href="https://coderwell.com">This is a link.</a>
  </body>
</html>

The lang Attribute

The lang attribute with the <html> tag is used to determine the language or language of the HTML document. For search engines and various web applications, the language of the web page has to be determined using lang attribute at the beginning of the HTML document.

<html lang=”en”>

The align Attributes

HTML align attribute can be used in content for horizontal alignment.
This aligned attribute has 3 main values ​​(left, right, and center). Using these values ​​you can align content to the left, right, or center of a paragraph in a browser window, as shown in the following example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The align Attribute</title>
  </head>
  <body>
        <p align="left">This text is left aligned</p>
	<p align="center">This text is aligned center</p>
	<p align="right">This text is right aligned</p>
  </body>
</html>

The width & height Attributes

The Width and height attributes are used to determine the width and height of an image in an HTML document. See an example of this below.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The width & height Attribute</title>
  </head>
  <body>
    <img src="https://i.imgur.com/DR25PT3.jpg" width="300" height="200">
  </body>
</html>

The src Attribute

The src attribute is used to connect the original file with the <img> and <script> tags in the HTML document. See an example of this below.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The src Attribute</title>
  </head>
  <body>
    <img src="https://i.imgur.com/DUkpobn.jpg">
    <script src="jsfilelink.js"></script>
  </body>
</html>

The alt Attribute

If for some reason the specified image does not appear on the web page, a text, as an alternative to the image, appears on the web page. The alt attribute is used to define this text. If the image or image does not exist, the Alt attribute displays a text in place of the image.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The alt Attribute</title>
  </head>
  <body>
    <img src="https://i.imgur.com/DUkpobn-1.jpg" alt="Alternative showing the text">
  </body>
</html>

You can read about more HTML attributes for different HTML elements in each chapter.

TOOLS

ABOUT US

CONTACT