HTML Attributes

HTML attributes are used to provide additional information about HTML elements. Attribute has a name, followed by an equals sign(=) and a value placed inside the quotation marks("").

Syntax

<tag attribute="value">Your Text</tag>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com">Click here and go to the homepage.</a>
  </body>
</html>

Result


Click and go to the homepage


In our example we used the <a> tag with href attribute. Between the quotation marks we wrote the address of the page where we will go after clicking the link.

Example of the <div> tag with "id" attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text{
      font-family:sans-serif;
      font-size:20px;
      line-height:28px;
      color:#777777;   
      }
    </style>
  </head>
  <body>
    <h2>Example of div tag with "id" attribute</h2>
    <div id="text">Here is some text for the div tag with the "id" attribute.</div>
  </body>
</html>

Example of the <p> tag with "style" attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Example of the p tag with the "style" attribute</h2>
    <p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
  </body>
</html>

Example of the <ol> tag with the "start" attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the ol tag with the "start" attribute:</h1>
    <ol>
      <li>List Item</li>
      <li>List Item </li>
      <li>List Item </li>
    </ol>
    <ol start="30">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </body>
</html>

Multiple Attributes

You can add more than one attributes to the HTML element. Be sure to add space between them.

It doesn’t matter in what sequence attributes are placed.

Syntax

<tag attribute1="value" attribute2="value">Your text</tag>

Example of the <img> tag with the "src", "width", "height" and "alt" attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

The list of the mostly used HTML Attributes:

Attribute Description Example
alt Defines an alternate text when the original element is not displayed. alt="HTML Attributes"
height Defines the height of the element. height="250"
href Defines the URL for a link. href="https://www.w3docs.com/"
hreflang Defines the language of the linked document. hreflang="en"
id Defines a unique id for an HTML element. id="example"
lang Defines the language of the document (used in <html> tag). <html lang="en-US">
rel Defines the relationship between target and linked documents. rel="nofollow"
shape Defines the shape of the element. shape="circle"
span Groups inline-elements in a document. span="2"
src Defines the source of the element. src="image.jpg"
start Sets the start value of an ordered list (used in <ol> tag). <ol start="30">
style Sets CSS style of an HTML element (size, font, color, etc.). style="color:red;text-align:right"
target Defines where to open the link. target="_blank"
wrap Defines whether the text should be wrapped or not. wrap="hard"
width Defines the width of the element. width="120"

See also a list of HTML Global Attributes that can be used with any HTML element.




Do you find this helpful?

Related articles