HTML attributes

Discussion in 'Web Design, HTML And CSS' started by MinalS, Jun 12, 2016.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    32
    Trophy Points:
    0
    The attribute in HTML provides user with more information about the element. It is always added inside the opening tag of the element. Every attribute contains of two parts as name and value. The name defines the property to be assigned to the attribute. The value describes the value to be assigned to the property. It is always added inside the quotations. All the attributes name and value are case sensitive.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Attributes in HTML</title>
    </head>
    <body>
    <h1 align="left">Learn about HTML attributes</h1>
    <h1 align="center">HTML attributes</h1>
    </body>
    </html>
    
    Output:

    [​IMG]

    Different core attributes



    There are four core attributes which can be used on most of the HTML elements. All of the core attributes are explained in detail.

    1. The id attribute

    The element on the web page can be uniquely identified using the id attribute. The advantage of using the id attribute is if a particular element contains an id attribute, user can easily identify the element and its corresponding contents. If there are more than one element containing same name, the id attribute is used for differentiating the element with same name.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <h1 id="demo">Demonstrate the use of id attribute</h1>
    <h1 id="show">Show the id attribute</h1>
    </body>
    </html>
    
    2. The class attribute

    The class attribute is used for relating an element with a style sheet. A list of class name which are differentiated using a space between them are defined.
    Code:
        class ="class1 class2 class3"
    
    3. The title attribute

    Using the title attribute, a title is added to the element. It can be viewed as tooltip when user hovers the cursor over the element.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Example of title</title>
    </head>
    <body>
    <h1 id="demo">Title Example</h1>
    </body>
    </html>
    
    Output:
    [​IMG]

    4. Style attribute

    The cascading style sheets ( CSS ) are defined in the html element using the style attribute.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Example of style attribute</title>
    </head>
    <body>
    <p style="font-family:arial; “>Style example</h1>
    </body>
    </html>
    
    Output:
    [​IMG]

    Internalization attributes



    The internalization attributes are always present for many of the XHTML elements. There are two different types of internalization attributes as explained below.

    1. lang attribute

    Using the lang attribute, the main language of the document can be defined. In the earlier HTML versions, the lang attribute was used for backward compatibility. The xml:lang attribute is used for the XHTML documents.

    Example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>English language</title>
    </head>
    <body>
    The English language
    </body>
    </html>
    
    2. dir attribute

    Using the dir attribute helps user indicate the direction of the text flow. The following two values can be assigned to the attribute.
    1. rtl: The text flow is from right to left
    2. ltr: The text flow is from left to right. It is the default value.
    Example:

    Code:
    <!DOCTYPE html>
    <html dir="rtl">
    <head>
    <title>Text Direction</title>
    </head>
    <body>
    The text is rendered from right to left
    </body>
    </html>
    
    Output:
    [​IMG]

    Generic attributes



    Some of the generic attributes which can be used along with different HTML tags are mentioned below:
    1. bgcolor: The background color of the element can be modified. The values can be RGB, decimal and hexadecimal.
    2. align: The text is horizontally aligned. The text can be added at left, right or center.
    3. class: The element which can be used inside the cascading style sheets are defined.
    4. width: The width of tables, cells, or images can be assigned. It can be a numeric value.
    5. Height: The height of tables, cells or images can be defined. Numeric value can be assigned.
    6. id: The element to be used in the style sheet. It can be defined by the user.
     
    Last edited by a moderator: Jan 21, 2017

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice