HTML Attributes

  • Html Tags can also contain attributes.
  • These attributes contain additional information about the html elements.
  • Attributes appear inside the opening tag and their values sit inside quotation marks.
  • All attributes are consist of two parts: a name and a value.

The id Attribute



  • The id Attribute specifies the unique id for an element.
  • The main reason behind the use of id attribute is that if you have two or more elements of the same name in a web page than you can use the id attribute to distinguish between elements that have the same name.
  • Here in an example that shows the use of the id attribute to style text with CSS:
  • Example



    <!DOCTYPE html >
    <html>
    <head>
    <style>
    #mytext{
    color:blue;
    }
    </style>
    </head>
    <body>
    <h1 id="mytext">www.eitworld.com</h1>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • You can clearly understand this example by visiting the topic: HTML CSS.

The lang Attribute



  • The lang attribute shows the main language used in a html document.
  • The lang attribute is used with the <html> tag.
  • Declaration of lang attribute is important for the search engines.
  • Example



    <!DOCTYPE html >
    <html lang="en">
    <body>
    <h1>This document contains English language.</h1>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





The title Attribute



  • The title attribute shows extra information (tooltip) about an elemen.
  • In this example, the <h1> element has a title attribute. The value of the this attribute is "h1 tag shows most important heading."

    Example



    <!DOCTYPE html >
    <html>
    <body>
    <h1 title="h1 tag shows most important heading.">This is h1 tag.</h1>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • To see the effect of title attribute move the mouse over the element, the title will be displayed as a tooltip.

The href Attribute



  • The href attribute basically used with the <a> tag.
  • In Html links are defined using <a> tag and href is used for defining the address of the link.
  • In this example, the href attribute contains the address of the home page of www.eitworld.com:
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <a href="http://www.eitworld.com">eitworld.com: Home Page</a>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • To see the effect of href attribute click on the link. It will show the home page of www.eitworld.com in front of you.

The alt Attribute



  • The alt attribute specifies an alternative text for an image.
  • The browser shows the alternative text when an image cannot be displayed.
  • In this example, the alt attribute contains the value "html tutorial". This text will display when the image associated with <img> tag cannot be displayed.
  • Example



    <!DOCTYPE html >
    <html>
    <body>
    <img src="images/html-tutorial.jpg" alt="html tutorial">
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • If the image cannot be displayed by the browser then the text present in alt attribute will show in front of you.

The class Attribute



  • The class attribute is used to associate an element with a css style sheet, and specifies the class of element.
  • You will learn more about the use of the class attribute when you will learn HTML CSS. So for now you can avoid it.