HTML Attributes

    In this article, we will discuss HTML attributes, which are one of the essential topics in HTML.

    HTML Attributes

    In HTML, the attributes are used to provide additional information about the elements. For most of the HTML elements, attributes are optional, but there are some elements where we have to deliver the attributes. Attributes always specified within the opening tag of the HTML element and they specified in a name and value pair.

    Example 

    <image src= "cat.jpg" alt ="cat image">

    In this example src ="cat.jpg" and alt="cat image" are two attributes where src and alt are attributes name and "cat.jpg" and "cat image" are attributes values. Here alt attribute is optional, but src is mandatory because src specify which image to show. There should be at least one space gap between two attributes, and the value of the attributes must have resided in the double inverted comma.

    Some most important HTML element attributes:

    <a> Element href Attribute

    <a> anchor tags are used to create links on the web page and the href attribute specify the address of the link. 

    <a href="https://www.techgeekbuzz.com">TechGeekBuzz</a>

    <img> src Attribute

    src is a mandatory attribute that must be passed along with <img> tag, it specifies the image location that supposed to display on the web page. 

    <img src ="dog.jpg">

    img Width and Height attributes

    In the image <img> tag, we can also pass the width and height attribute to size the image. 

    <img src ="dog.jpg" width="500" height ="700">

    here width ="500" means the image will be 500 pixels wide.

    alt attribute

    alt attribute can be used with various HTML elements but it mostly used with <img> element. In case if the browser fails to load the image, the text of alt will be displayed on the screen. Even the screen reader app can read the alt information, so a visually impaired person can understand what image context is. 

    <img src="cat.png" alt="black cat" height="200" width ="300">

    style attribute

    Style attribute is used to provide inline styling to the HTML elements. I t is an inline alternative for CSS coding. style attribute can be applied on any HTML element, and it mostly used to change the element font size, colour, style, etc. 

    <h1 style="color:red">Welcome to TechGeekBuzz.</h1>

    lang Attribute

    This attribute defined inside the <html> tag and it describes the language of the document content. 

    <html lang="en-US">

    title attribute

    This attribute can be used with various HTML elements, and you can see its value when you hover your mouse over the element content. 

    <h1 title="techgeekbuzz"> Hover over me! </h1>

    Points to remember

    While writing the attributes, there are some points; we need to keep in mind to keep our code good.

    Bad Code Good Code
    Always use Quotes for attribute values
    <a href= h ttp://www.techgeekbuzz.com > <a href="https://www.techgeekbuzz.com">
    Use lowercase characters to represent the attribute name.
    <a HREF = "https://www.techgeekbuzz.com"> <a href="https://www.techgeekbuzz.com">
    Always provide one space to write the next attribute.
    <img src="img.png"width="500"height="200"> <img src="img.png" width="500" height="200">

    If you try to run this bad code, this will give us the same result like the Good code, but it always a good practice to keep your code clean and systematic so you and other developers could read and understand it.

    Summary

    • HTML attributes provide additional information about the HTML elements.
    • Every HTML element has attributes.
    • There are some attributes which are specific to some tags, and there are some attributes which can be used with multiple tags.
    • Always use double or single quotes to represent attribute values.
    • Always use the lowercase character for attribute names.
    Previous Tutorial Next Tutorial