Related post

HTML attributes - Zhullyblog



Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.


HTML attribute

We talked about tags and elements in HTML in the previous post. But do you know that there is something that gives more precise meaning or should I say add additional information to tags. Well, that thing is called an attribute.

Attribute add additional meaning to the element. Let's take an image for instance. When you want to add an image to a webpage, you use <img src= "img.png"> ,we get to image very soon.
Okay, when you do this, an image is added but you need to specify the width and height.  The width and height are the attribute I am referring to.

Attribute comes immediately after the elements and the value are enclosed in a quotation mark. You can have as many attribute you want.
Let's take a quick example.


<img src="example.png"  width="420"  height="420">


There are several attribute in HTML5.


The id Attribute
I call 'id'  identification. Your id is what is used to identify you. It is unique and can only be referred to you. It's just like a full name. Only one person can be attached to a particular unique full name.
The use of id makes it very easy to identify someone which is the same when talking about web pages. An id makes it easier to identify an element such as header and it makes it faster to select the element when styling in CSS.
Here is an example.



<div id= "Container">Container name here</div>


The class attribute
I call 'class' classification. Your id is your identifier while your class is classification. Your name is your id while gender is classification. Do you get that?

Now, let's go to web pages. Only a unique element is assigned to a particular BUT several element can have the same class.
Here is an example.



<div class="box"> Text here <div>


The title attribute
The title element is used to provide additional information by the web browser. A user can only see this information when they place cursor over the element.
Try this code.




<p title="Zhullyblog : Learn to code with zhully">Zhullyblog</p>

The style attribute
As the name implies, the style attribute allows you to style. This simply means that you can add CSS styling to your HTML directly within your element. We would talk more about style attribute in tutorials later.
Try this code.



<p style="color: red;"> This is an example </p>


There are other attributes such as the language attribute but we would talk about that later.




Follow us on
Please share




OTHER TUTORIALS

Featured tutorials




Comments