HTML Attributes

An HTML attribute is a piece of markup language used to adjust the behavior or display of an HTML element. For example, attributes can be used to change the color, size, or functionality of HTML elements.

Attributes are used by including them in an opening HTML tag:

Syntax

    
<tag_name attribute_name="value">Content</tag_name>

HTML Core Attributes

id
title
class
style

The Id Attributes

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element:

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

Example

 
<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

You can click on above box to edit the code and run again.

Output

This para explains what is HTML

This para explains what is Cascading Style Sheet

The Title Attributes

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute:

Example

    
    <!DOCTYPE html>
    <html>
    <head>
    <title>The title Attribute Example</title>
    </head>
    <body>
    <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
    </body>
    </html>

You can click on above box to edit the code and run again.

Output

Titled Heading Tag Example

The Class Attributes

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

Example

    
 class="className1 className2 className3"

You can click on above box to edit the code and run again.

Output

The Style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

Example

    
    <!DOCTYPE html>
    <html>
    <head>
    <title>The style Attribute</title>
    </head>
    <body>
    <p style="font-family: arial; color: red;">some text....</p>
    </body>
    </html>

You can click on above box to edit the code and run again.

Output

some text....

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

    
<a href= "https://www.codelines.in">Visit Codelines</a>

You can click on above box to edit the code and run again.

Output

Visit Codelines

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

    
    <img src="img_boys.jpg">

You can click on above box to edit the code and run again.

Output

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

Example

    
<img src="img_boys.jpg" width:"400" height:"500">

You can click on above box to edit the code and run again.

Output