Tuesday, May 16, 2017

Html Attributes


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, i will be going through the various Html attributes that is available in Html.

In the previous tutorials that  we have had, we have seen few Html tags and their usages like heading tags <h1>, <h2>, paragraph tag <p> and other tags, we used them so far in their simplest form, but most of these Html tags have attributes, which are additional information added to them.

An attribute is used to define the characteristics of a HTML element and is placed inside the element's opening tag. Also take note that all attributes are made up of two parts which are the name and the value, you will understand better as we move further.

You can also read our tutorial post on: Html Introduction

The name is the property you want to set. For example, the div <div> element can carry a Html attribute whose name is align, which can be used to indicate the alignment of the div on the page.

On the other hand, value is what you want the value of the property to be set to and it is always been put within quotations. The below example shows the three values of the align attribute which are left, center and right.

<!doctype html>
<html>

     <head>
            <title>Tutorial on align attribute</title>
     </head>

     <body>
            <div align="left">This div element is left aligned</div>
            <div align="center">This div element is center aligned
            </div> <div align="right">This div element is aligned to the right</div>   
     </body>

</html>

Feel free to try the above code out on your text editor to have a better understanding. You can also drop your questions via the comment box if you having issues, they will be attended to. Now let us move to few more attributes.

You can also check out our tutorial post on: Html Basic Tags2

Core Attributes

Html has four core attributes that can be used on majority of Html elements, although not all of them. Below is the list of the core Html attributes.

Id
Title
Class
Style

The Id Attribute

The id attribute of a Html tag can be used to uniquely identify any element within a Html page. There are two primary reasons why you might wanna use an Id attribute on an element:

The first reason is if an element carries an Id attribute as a unique identifier, it is possible to identify just that particular element and it's content.

The second reason is if you have two or more elements of the same name within Html page, you can use the Id attribute to distinguish between the elements that have the same name. Example on how to use the Id attribute is shown below.

Example


<!doctype html>
<html>

     <head>
            <title>Tutorial on Id attribute</title>
     </head>

     <body>
            <div Id="Container">This div element is left aligned</div>
            <div Id="nav menu">This div element is center aligned</div>    
     </body>

</html>

You can also try the above code out for better understanding. Now we move on to the title attribute

The Title Attribute

The Title attribute gives suggested title to the Html element. The syntax for a title attribute is similar to that of the Id attribute.

You can also read our tutorial post on: Html Tags

The behavior of this attribute will be dependent on the element that carries it. Following below is a short example.

Example


<!doctype html>
<html>

     <head>
            <title>Tutorial on title attribute</title>
     </head>

     <body>
            <a title="home"  href="#" target="_blank">Homepage</a> 
     </body>

</html>

The above example illustrates a Html link which has a title attribute added to it. We will be discussing about Html links in another tutorial guide.

You can try the above code out using your text editor and feel free to ask questions.

The Class Attribute
The class attribute associates an element with a style sheet, and it specifies the class of the element. You will learn more about how a class attribute is used when i start dropping tutorial posts on Css. But for now you have to take this basic knowledge into your brains.

Example

<!doctype html>
<html>

     <head>
            <title>Tutorial on class attribute</title>
     </head>

     <body>
            <div class="main menu">Home</div>                                   
     </body>

</html>

Now am going to talk about the final core Html attribute, the rest of the other Html attributes will be discussed in my next tutorial.

You can also check out our tutorial post on: Html Elements

The Style Attribute
The style attribute lets you specify a Css rule or Css rules within an element. Below is a short example -

Example

<!doctype html>
<html>

     <head>
            <title>Tutorial on style attribute</title>
     </head>

     <body>
            <div style="float: left;  clolor: red;  font-size: 2px;">Home</div>   
     </body>

</html>

You can try the above code out for better understanding.

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the rest of the Html Attributes.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.