Home HTML HTML Attributes (Updated HTML5 List)

HTML Attributes (Updated HTML5 List)

109
0

HTML elements can support more than one attribute inside tag. HTML Attributes provides a proper meaning to elements like how it looks, behavior, style, title, alternate text and much more.

Attributes comes with pairs of attribute_name=”attribute_value” for e.g, <div id=”page-container”></div>. Where, id is “attribute_name” and page-container is “attribute_value”, separated by = sign and must be enclosed with double or single quotes. You can use mostly all attributes with any HTML element. Attributes can be optional for some HTML elements.

Listed below are the most common attributes that can be added to any available HTML elements to define its behavior. The four core attributes that can be used on the majority of HTML elements are id, class, title, style.

Attribute Value Description
accesskey character Represents a shortcut key to focus an element for eg. “o” for open, “c” for close etc
align center
left
right
Represents horizontal align for an HTML element
class user_defined Represents a style for an element which is used in CSS style sheet
height pixels Represents height for an element
id user_defined Represents unique id for an element
lang lang_code Represents the language of the element for it’s content
style css_properties Represents an inline style for an element for e.g style=”color:red;text-decoration:underline;”
tabindex numeric_value Represents tabbing index or order for the control for e.g. tabindex=”1″, tabindex=”2″ and so on
title user_defined Represents a tooltip information for an elements like img, a, abbr etc
valign bottom
middle
top
Represents vertical align for an HTML elements like table, img, p etc
width pixels Represents width for an element

Sample Code

<html>
<head>
    <title>Common HTML Attributes Example</title>
    <style type="text/css">
        .links {
            color: #F15A23;
            text-decoration: none;
            cursor: pointer;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <!-- Body Part Starts -->
    <div id="page-container">
        <p style="color: green">
            This is the example of inline style attribute
        </p>

        <!--Example of a tag with id, title, tabindex and class attributes-->
        <a id="lnkClickHere1" href="https://www.aspneto.com/" tabindex="1"
            class="links" title="anchor tag 1" tabindex="1">Click Here 1</a>
        <br />
        <a id="lnkClickHere2" href="https://www.aspneto.com/html-attributes/" tabindex="2"
            class="links" title="anchor tag 2" tabindex="2">Click Here 2</a>

        <!--Note:href is not supported by all elements except some elements like a tag, base tag-->
        <p>This is also a valid statement without any attribute</p>
    </div>
    <!-- Body Part Ends -->
</body>
</html>

Sample Result

This is the example of inline style attribute

Click Here 1
Click Here 2

This is also a valid statement without any attribute

Tip: You can see the complete List of HTML Elements here.
Previous articleHTML Event Attributes (Updated HTML5 Event Atrributes List)
Next articleHTML Elements List (Updated HTML5 Tags List)
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × 1 =