in

Understanding the HTML Attributes and Their Usage

Hey! In our previous lessons we looked at HTML Tags and HTML elements. Today we will be looking at HTML Attributes and this can be seen as an additional sauce added to make a structure look meaningful and more beautiful.

READ THE PREVIOUS TUTORIAL HERE: Tutorial #3 | Understanding the HTML Elements and Their Importance

What are HTML attributes ?

HTML attributes are properties added inside the opening tags for the purpose of identification, addition of more properties to the tag or beautification of the tag using cascading style sheet (css). Most HTML tags can have attributes in them which enables users to add an extra bit of information into them.

Parts of an Attribute

The attributes is divided into two basic parts which include:

  • The name
  • The value

The name: This is the property that will be attached to the HTML element for example color, align, position etc

The value: This is the value of the property to be attached to the HTML element for example we can attach “red” to the attribute name “color”

And both when used take this format name: value

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p style="color:red;"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

The color:red was introduced into the first paragraph tag and it takes this format style=name:value and the result changes the color of the words in that paragraph to red

Result on web view

color HTML attributes

CORE ATTRIBUTES IN HTML

The four core attributes you can find and use in majority of the HTML documents are:

  • Id
  • Class
  • Style
  • Title

The Id attribute

This attribute which in full means “identity attribute” is used to identify a particular html element for the purpose of future referencing and styling. Most times we use the id when trying to style the element using an external styling with CSS.

Example

To identify the paragraph #1 on this html code we can use an id inside the paragraph element in this manner

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p id="first_paragraph"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

With this we can easily reference the first paragraph of this web document on any other document using the id “first_paragraph”

The class Attribute

The class attribute is similar to the id attribute but differs only in the way it’s been structured on HTML and CSS document but they perform similar function of referencing a particular element.

For Example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p class="first_paragraph"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

Title attribute

The title attribute is similar to the id attribute and the behavior only depends on the element that carries it

For example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p title="first_paragraph" ><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

The Style Attribute

This attribute is used in styling the element. Further information can be added to the element such as color, position, font weight using inline CSS styling with the help of the style attribute

for example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p style="color:red;"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

Result on web browser

html attributes style

Other Attributes

Some other internationalization attribute we have in HTML include:

  • dir
  • lang

The dir attribute

This attribute is used to indicate to the web browser on the direction the text should flow and it can take only two values which are “left to right (ltr) & right to left (rtl)” or auto (automatic) . The dir attribute takes the form dir=”ltr” or dir=”rtl” or dir=”auto” in an HTML document

For example

<!DOCTYPE html>
<html dir="ltr">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p title="first_paragraph"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

The lang Attribute

This attribute is used to inform the web browser about the language of the HTML document. and it takes the form lang=”en” where “en” means English and can be changed to any other known language short code

for example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p>Hypertext Markup Language is a standard markup language for web</p>
                <p title="first_paragraph"><u>documents designed to be viewed with a web browser. </u></p>
                 
                 <p>It can be assisted by technologies such as Cascading</p>
                  <p>Style Sheets and scripting languages such as JavaScript.”</p>
    
</body>
</html>

List of Attributes, their value and function

Attribute Values Functions
align Right, left, center Can only align tags horizontally
Valign Top, middle, bottom Can only align tags vertically
Id Defined by the user Identifies an element for styling
class Defined by the user Classifies an element for styling
background URL For background image placement
width Numeric value Specifies the width of a property e.g. table
Height Numeric value Specifies the heigth of a property e.g. table
Title Defined by the user Defining the title of an element
bgcolor Numeric, hexadecimal , RGB values Used for setting up background colors

Conclusion

Now you understand the basics of HTML attributes and you are really doing great. Lets move on to the next tutorial on  HTML FORMATTING

What do you think?

HTML elements

Understanding the HTML Elements and Their Importance

HTML FORMATTING TITLE

Understanding the HTML Formatting and The Usage