HTML | Attributes

An attribute is used to provide extra or additional information about an element.

  • All HTML elements can have attributes. Attributes provide additional information about an element.
  • It takes two parameters : a name and a value. These define the properties of the element and is placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element.
  • Every name has some value that must be written within quotes.

Syntax:

<element attribute_name="attribute_value">

Below are some of the most commonly used Attributes in HTML:

  1. src Attribute :If we want to insert an image into a webpage, then we need to use the <img> tag and the src attribute. We will need to specify the address of the image as the attribute’s value inside the double quote.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>src Attribute</title>
    </head>
    <body>
    </body>
    </html>

    chevron_right

    
    

    Output:

  2. alt Attribute : As the name goes this is an alternate tag that is used to show or display something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be used to describe the image to a developer who is actually sitting at the coding end.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>alt Attribute</title>
    </head>
    <body>
        <!--If the image is not found or the img field 
         is left blank the alt value gets displayed-->
        <img src="" alt="Since the src value is blank,the alt value is displayed">
    </body>
    </html>

    chevron_right

    
    

    Output:

  3. The width and height Attribute : This attribute is used to adjust the width and height of an image.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>Width and Height</title>
    </head>
    <body>
        <img src="https://www.geeksforgeeks.org/wp-content/uploads/Geek_logi_-low_res.png" width="300px" height="100px" >
    </body>
    </html>

    chevron_right

    
    

    Output:

  4. The id Attribute : This attribute is used to provide a unique identification to an element. Situations may arise when we will need to access a particular element which may have a similar name as the others. In that case, we provide different ids to various elements so that they can be uniquely accessed. The properties extending the use of id is generally used in CSS, which we will be learning later.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>id Attribute</title>
    </head>
    <body>
        <p id = "GfG">Hello geeks<br>
        <p id = "ui">This is unique to this paragraph<br>
        <p id = "head">This is also unique to this paragraph
    </body>
    </html>

    chevron_right

    
    

  5. The title Attribute : The title attribute is used to explain an element on hovering the mouse over it. The behavior differs with various elements but generally the value is displayed while loading or hovering mouse pointer over it.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html
    <head
        <title>title Attribute</title
    </head
    <body
        <h3 title="Hello GeeksforGeeks">Hover to see the effect</h3
    </body
    </html>                    

    chevron_right

    
    

    Output:

  6. The href Attribute : This attribute is used to specify a link to any address. This attribute is used along with <a> tag. The link put inside the href attribute gets linked to the text displayed inside the<a> tag.
    On clicking on the text we will be redirected to the link. By default, the link gets opened in the same tag but by using the target attribute and setting its value to “_blank”, we will be redirected to another tab or another window based on the browsers configuration.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>link Attribute</title>
    </head>
    <body>
        <a href="https://www.geeksforgeeks.org/">
            Click to open in the same tab
        </a><br>
        <a href="https://www.geeksforgeeks.org/" target="_blank">
            Click to open in a different tab
        </a>
    </body>
    </html>

    chevron_right

    
    

    Output:

  7. The style Attribute : This attribute is used to provide various CSS(Cascading Style Sheets) effects to the HTML elements such as increasing font-size, changing font-family, coloring etc. For a detailed explanation refer HTML | Style Tag. The program below shows few name and values that go along the style attribute

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>style Attribute</title>
    </head>
    <body>
        <h2 style="font-family:Chaparral Pro Light;">Hello GeeksforGeeks.</h2>
        <h3 style="font-size:20px;">Hello GeeksforGeeks.</h3>
        <h2 style="color:#8CCEF9;">Hello GeeksforGeeks.</h2>
        <h2 style="text-align:center;">Hello GeeksforGeeks.</h2>
    </body>
    </html>

    chevron_right

    
    

    Output:

  8. The lang attribute : The language is declared with the lang attribute. Declaring a language is can be important for accessibility applications and search engines.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en-US">
    <body>
      
    ...
      
    </body>
    </html>

    chevron_right

    
    

This article is contributed by Chinmoy Lenka. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up

Improved By : AKSAHARAN