HTML Attribute

What are attributes in an HTML?

HTML attributes provide additional information about HTML elements. For example, attributes can be used to change the color, size, or functionality of HTML elements.

HTML Attribute

  1. All HTML elements can have attributes.
  2. An attribute includes the attribute name followed by an equals sign (=) and a value wrapped in quotes.
  3. Attributes should always be applied with start tag.
  4. Attribute values should always be enclosed in quotation mar
  5. You can add multiple attributes in one HTML element, but need to give space between two attributes.

Such as

<element attribute_name="value">Some content</element>

Example

<!DOCTYPE html>
<html>
    <head> 
        <title>Align Attribute  Example</title> 
     </head>
      
     <body> 
        <p align = "left">Aligened left</p> 
        <p align = "center">Aligened center</p> 
        <p align = "right">Aligened right</p> 
     </body>
</html>

Output:

4

Example Explained

<p align = "left">Aligened left</p>

In the above statement, we have used paragraph tags in which we have applied aligned attribute. This attribute is used for applying CSS property on any HTML element. It provides left to paragraph element of left and turns it align to left.

<p align = "left">Aligened center</p>

In the above statement we have again used align attribute in paragraph tag, which turns its align center.

<p align = "left">Aligened right</p>

In the above statement we have once again used align attribute in paragraph tag, which turns its align right.

Core Attributes

The four core attributes that can be used on the majority of HTML elements are -

  1. title
  2. id
  3. class
  4. color

The title Attribute

The title attribute is used to specify extra information about the element. The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

For example

<!DOCTYPE html>
<html>

  <head>
     <title>The title Attribute Example</title>
  </head>
	
  <body>
     <h2 title = "Devsenv">Heading 2</h2>
  </body>
	
</html>

Output:

6

Now try to bring your cursor over “Heading 2” and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

Id Attribute

The HTML id attribute is used to specify a unique id for an HTML element. You cannot use multiple ID with the same name in one HTML. There are two primary reasons you might use an ID attribute on an element -

  • If an element has an ID attribute as a unique identifier, it is possible to identify only that element and its contents.
  • If you have two elements with the same name within a web page (or style sheet), you can use the id attribute to distinguish between elements with the same name.

Example

<p id = "devsenv">Visit Devsenv</p>
<p id = "paragrap">This is a paragrap tag</p>

Class Attribute

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can use multiple class. 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

<!DOCTYPE html>
<html>
<head>
<style>
.webpage {
  background: blue;
  color: white;
  border: 3px solid black;
  margin: 5px;
  padding: 5px;
}
</style>
</head>
    <body>

        <div class="webpage">
        <h1>I am a Web developers.</h2>
        <p>Web developers work independently as freelancers or with company teams to create website</p>
        </div>

        <div class="webpage">
            <h1>I am a Web Designer.</h2>
            <p>Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads.</p>
        </div>

        <div class="webpage">
        <h2>I am a Full-Stack web developers.</h2>
        <p>A full-stack developer portfolio is a document or webpage detailing the previous projects that you've worked on.</p>
        </div>

    </body>
</html>

Output:

webpage

Style Attribute

The style attribute specifies an inline style for an element. Additionally, the style attribute allows you to specify cascading style sheet (CSS) rules between elements.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:Georgia, 'Times New Roman', Times, serif; color:#f3134b;">Some text...</p>
   </body>
	
</html>

Output:

style

Internationalization Attributes HTML

There are three types of Internationalization Attributes HTML which are:

  • dir
  • lang
  • xml:lang

The dir Attribute

The dir attribute allows you to direct the browser in which direction the text should go. The dir attribute can take one of two values, as you can see in the table below:

Value Meaning
ltr Left to right
rtl Right to left

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Dir Attribute</title>
   </head>
	
   <body>
      <h2 dir = "ltr">It goes from right-to-left.</h2>
      <p dir = "rtl">It goes from right-to-left.</p>
   </body>
	
</html>

Output:

dir-attribute

When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.

The lang Attribute

This attribute is replaced by xml:lang attribute. Before, it was used to indicate the language for the web page.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language</title>
   </head>

   <body>
      English is the International language.
   </body>

</html>

Output

lang

The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. Value for the xml:lang should be ISO-639 country code.

The href Attribute

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

Example as

<a href="https://devsenv.com/">Visit Devsenv</a>

The src Attribute

The src attribute is important and required attribute of element. The src attribute of specifies the path to the image to be Browser. The image name or source should be correct else browser will not display the image.

For example

<img src="https://i.ibb.co/9bCwM5T/flower.jpg" alt="flower" height="400" width="600" border="0">

Output:

flower

Generic Attributes

Here are some other attribute tables that can be easily used with many HTML tags.

Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined “Pop-up” title of the elements.
Previous
HTML Elements
Next
HTML Headings