HTML ATTRIBUTES - IDENTIFIER OF HTML ELEMENTS

HTML ATTRIBUTES - IDENTIFIER OF HTML ELEMENTS

Generally attributes are identifier words, they describe and act as a point of reference for elements or objects in real life. In html attributes are special words which provide additional information about the elements, they are the modifier of the element. Each element or tag can have attributes that define the behavior of that element.

Attributes should always be applied with a start tag, The attribute has a name and value pair which make them easy to work with, they are case sensitive and generally recommended that you write them in lowercase. One element can have more than one attribute but spaces should be given in between for clearance and readability.

TOPICS

In this article, we are going to look at the syntax and then the different attribute types we have in html today, bear in mind that these are not all the attributes but they are the basics which you will encounter in most code bases.

1. Style Attribute
2. Title Attribute
3. Href Attribute
4. Src Attribute

SYNTAX

Before we go deeper into the attributes and their individual use cases, it is important to visit the syntax to understand how it works generally. Let us look at the example below:

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

The element represents any particular tag in question that you are showin an attribute. The next is the attribute name, could be any of the known such as src, href, style etc. Once you put in the particular value then you can specify the tag content and close the element. 

STYLE ATTRIBUTE

The style attribute specifies an inline style for an element. The style will override any style set globally, they can be used on any html element. Generally inline styles are outdated as it is always advised to leave all styling to the css only, it is still important to visit it for maore clarity especially when you compare it with

Lets us look at the example below:

From the above example, you can see that the style attribute is used to specify decorative properties like the height, color of the paragraph tags. This attribute is for applying css property on any HTML element. It provides height to the paragraph and changes the color to blue. In the future, you will be told why to leave all styling work to css as it makes it easier for semantics and organization. 

TITLE ATTRIBUTE

The title attribute specifies extra information about an element. It is used as a tooltip at the top of the browsers, it displays text when a user moves a cursor over a link or any text. You can use it in any text or link to show the description about that link or text. The title element can be used on any element however it is not necessarily compulsory or useful.

Let us look at an example below:

<h1 title="This is heading tag">Example of title attribute</h1>  

We can see from the above example that the title attribute is very important for information when a user hovers over a text on a webpage. They are very crucial for screen readers and visually impaired users on the web, we are always building to make the web accessible to everyone no matter the given conditions.

THE HREF ATTRIBUTE

The href attribute is the main attribute of the anchor tag, this attribute gives the link address which is specified in that link. The href attribute provides the hyperlink and if it is not blank then it will remain in the same page, normally if the href attribute is not present then the tag will not be hyperlink. It is very important and irreplaceable in html, let us look at some examples below to see how they really work:

<a href="www.google.com">This is a link to google</a>  

Also see!!

<a href="https://www.facebook.com">This is a link to facebook</a>  

You can see from the above syntax and image that the href attribute created a hyperlink that can be a messenger to any address. A messenger link to any website or online resource is always placed as the value of the href attribute.In this case it links straight to google.com for any search querries you may have, the link you choose for your href attribute depends on the scope of the html document.

It is important to note that the single or double quotes can be used as far as you emain consistent for every attribute value

THE SRC ATTRIBUTE

The src attribute is one of the important and required attributes of element. It is the source for the image which is required to display on the browser. This attribute can contain images in the same directory or another directory/folder. The image name or source should be correct or else the browser will not display the image as wanted. The src attribute is quite simple to use and very fast for displaying images, let us look at the syntax below:

<img src="whitepeacock.jpg" height="400" width="600">  

In the coming articles, more will be taught on the src  attributes, this is because it encompasses the image tag and all other attributes that help style and modify it in full detail. For now, all you have to understand is the syntax for attributes and how they work with html elements includong the images.

QUOTES

In this chapter you have seen that, we have used attributes with double quotes, but some might use single quotes in HTML. The use of both single and double quotes is allowed in html, the most important thing to remember is to remain consistent with whichever you choose either single or double.

This is everything you need to know about html attributes, we will continue with media and other html concepts.

If you want youtube videos, checkout our channel.