Important HTML Attributes with Example

HTML elements build the contents of a webpage. Every HTML element has either its own attributes or HTML global attributes. HTML attributes define the characteristics of an HTML element. The attributes are placed inside the element’s opening tag. An HTML attribute has normally two parts. One part is name and another part is value. So, an HTML attribute comes in name/value pairs where:

  • Name is the property that you want to set and
  • Value is the value of the property that you want to assign.

For example, The HTML<p> element is used to define the paragraph of an article. It has an attribute named align which is used to indicate alignment of a paragraph. The align attribute has three values: left, center and right. So, the align attribute can be assigned to the <p> element like below…

 <p align="center">this is a paragraph of an article</p>

Most Important HTML Attributes

HTML has a lot of attributes those are applied to its element. Among them, this article will show top 10 important attributes those are used frequently to design a webpage.

  1. The id attribute: This attribute specifies a unique id of an HTML element. Every HTML element must have a unique id that means if you assign an id of an element, the id must be unique in the whole webpage. The id attribute is a global attribute. So, every HTML element can have an id attribute. The id attribute is specially used by JavaScript to select an HTML element. It is also used by CSS to select an HTML element for styling.

    Example:

    
    <style>
     #article{
       color:#00F;
     }
    </style>
    
    <p id="article">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In sed porttito libero, laoreet aliquam massa.
    </p>
     
  2. The class attribute: This attribute is used to apply similar characteristics on multiple HTML elements. It is mainly used by CSS to select multiple HTML elements for applying same style. An HTML element can contain multiple classes. The class attribute is also global attribute.

    Example:

    
    <style>
    .article{
      font-family: Georgia;
    }
    </style>
    <p class="article">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     In sed porttitor libero, laoreet aliquam massa.
    </p>
     
  3. The title attribute: This attribute is used to provide a suggested title for an HTML element. It provides extra information about an element when mouse is hovered on it. The title attribute creates a tooltip for the HTML elements. It is also a global attribute.

    Example:

    
    <h1 title="System Zone is an IT Solution Center"> System Zone </h1>
    
    
  4. The style attribute: This attribute is used to apply inline CSS rule of an HTML element. It is also a global HTML attribute.

    Example:

    
    <h1 title="System Zone is an IT Solution Center" style="color:#0F0"> System Zone </h1>
    
    
  5. The width and height attribute: These attributes are used to specify width and height of an HTML element in pixel. All elements are not support width and height attribute. The width and height supported HTML tags are <img />, <iframe> and <table>.

    Example:

    <iframe src="http://systemzone.net" width="700" height="400"></iframe>
  6. The src attribute: This attribute is used to specify the source URL of  an HTML element who creates the holding space for the remote contents. The elements who create a holding space are <img />, <script>, <iframe>, <video> and <audio>.

    Example:

    <img src="image.jpg" alt="featured image" />
  7. The alt attribute: This attribute provides an alternate text for an image when the image will not be displayed. This attribute also provides information to the search engine about an image.

    Example:

    <img src="logo.png" alt="System Zone Logo Image" />
  8. The href attribute: This attribute is used to indicate the destination of an anchor tag (<a> tag). This attribute also specifies the location of an external CSS file in the <link /> tag.

    Example:

      <link rel="stylesheet" type="text/css" href="style.css"/>
      <a href="http://systemzone.net"> System Zone </a>
    
  9. The action and method attributes: The action attribute is used to indicate the location of an HTML form process file and the method attribute is used to indicate the sending method of form data.

    Example:

    
    <form action="process.php" method="post">
    
    </form>
    
    
  10. The name and value attribute: The name and the value attributes are used by the child elements of a <form> element. The name attribute is necessary for the PHP program to retrieve form input value. The value attribute specifies the value of an <input /> tag and a <select> tag used inside an HTML form.

    Example:

    
    <form action="process.php" method="post">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" name="login" value="Login" />
    </form>
    
    

This article has explained the important HTML attributes those are frequently used to create a webpage. If you have any question about this explanation, feel free to contact with me from Contact us page. I’ll try my best to stay with you.

One Response
  1. Sahir

Leave a Reply to Sahir Cancel reply

Your email address will not be published. Required fields are marked *