HTML Attributes
Well, this is something that you can’t really escape from. HTML attributes are going to haunt you giving you your worst nightmares. They are everywhere, omnipresent, waiting for you to enter a tag. So in order to grab hold of what it is, and how do you use them while writing your general HTML codes, I dedicate this leaflet into learning all about HTML attributes.
What are HTML Attributes?
HTML attributes do nothing but provide additional information. To dumb it down further if someone promises to give you a ball, what’s the first thing that comes to your mind. What type is it? What color is it? etc. Right?
So here the “type” and the “color” are attributes that tell you more about the ball.
In a similar way, every tag in HTML has something that helps in telling you more about the tag.
The way we write HTML attributes is like this:
<element type = "football" >
The football under the double quotes is called value. The attribute here is, well you guessed right, “type”. Notice how the closing tag of element has been put right after football and not where the element concludes itself? That’s how it rolls with HTML attributes. A thing to remember I guess.
We are going to look at a couple of tags and see what it does for us. I am learning too peeps! So bear with me.
Lang
The first one is the “lang” attribute. If you have seen some HTML flinging around lately you might have noticed why there is always a lang attribute hanging around with the <html> tag. People do that because it helps one’s screen reader or browser identify in which language HTML is written so that it can cater to a more language specific public.
Here’s how to use it with the <html> element:
<html lang = "en-US">
Notice how the first two letters EN codify that we are talking about English here. The later two variants (US here) is where the dialect should go. This is how it would appear in a fully fledged HTML code:
This takes us to other HTML attributes.
Title Attribute
Do you remember the title tag? Well, this is not it. It’s an attribute of the same name that can be used anywhere if you want people to find out when they mouse over the text.
It is also analogous to what “tool tip” does. We will look at that later. First, its code:
<p title = "This is a name of an awesome movie website"> Straight from a movie </p>
To put it in a text file this is how our HTML code should look like:
You put the above bit in an HTML file, this is what you get when you save it:
Moving on.
Attributes for a link
Wondering how to show a link on your website? Well, you must meet Mr. <a> tag then. When you use <a> in your HTML code, it defines a hyperlink. But to create it you need to use the “href” attribute.
So if I write: <a href="https://straightfromamovie.com"> Straight From a Movie </a>
It will create a hyperlink waiting to be clicked on whatever you place between the <a> </a> tags. Here’s what you need to type as the HTML code:
When you save it, and try to see it on a web browser this is what you get:
Once you click on it, it will take you to the website.
Go ahead and give it a shot! I hear it’s a great website.
Image Attributes
Working with images? Well it’s another dopey piece to do when you are working with HTML. To embed an image you can simply use the <img> tag. <img> must have the following two attributes:
- src
- alt
They are pretty self-explanatory actually. Src or Source basically helps your system to find the file. Alt is for entering alternate text just in case some browsers fail to load your image. It will help viewers to understand which image you intended to show.
So using the above two attributes of image, our code to display an image called soar.jpg is going to look like:
<img src = "soar.jpg" alt = "songs of a ruin book cover">
That it? That’s it! Alright so no closing tags here. Cool!
This is what our code would appear slapped on notepad:
I am gonna go ahead and run it.
See what I get? The image directly. Here’s one quick exercise for you!
Exercise! Exercise!
I want you to put the image inside that link, so when you click “Straight from a movie” you get the above image.
To dumb it down further:
So the first time you run it on your browser you get a link. Then when you click the link you are redirected to a different page that has this image in it. Got it?
Can you do it?
Answer to that I am gonna post after we are done seeing some other attributes.
Other <img> Attributes
Okay so notice how the image has turned out to be whatever it’s resolution was. Can we primp and preen it as per our requirement.
Of course, we can. That’s where height and width attributes for <img> come into the picture. Numbers you put are in fact pixels and the image will act in accordance with what you have put.
So simply appending the height and width attributes now, will turn the code into:
<img src = "soar.jpg" alt = "songs of a ruin book cover" height = "200" width = "200">
Saving it and then checking it in the browser.
There! Much better!
<span> Element Attribute
Did you know you could color your text with a simple tag? Yes the <span> tag is what lets you achieve that. It’s just that you need an attribute to do that. The attribute “style” is what helps you to brim your life with colors.
You just gotta remember the syntax here. It’s a tad different from others.
<span style = "color: blue"> blue </span>
You have to end the <span> tag with a </span>. Also while using style attribute you have to specify the color with a “color: (color_name)” field. Whatever you write between the span tag then becomes the color you choose.
Here’s how the code would look like in your notepad file.
When you run the above you get the following result in your browser:
Answer to the Above Exercise
That was one pretty exercise I put up there. Almost thought I was a teacher for a sec.
Alright, so did you get it right? If not, let me try that myself.
Okay after one failed attempt I was able to get it right.
Here’s the code that will let you do that:
Here replace the highlighted text with the path of your image location. That’s it. Exercise vanquished!
Save it and run it in the browser. See if you are getting the expected result.
One Final Word
Do you notice how we have been using double quotes all along? If you are using HTML5 you don’t need to. It is supposed to be smart, unlike us. Likewise, you can also make use of single inverted commas instead of double ones there. But in case where there are spaces involved, it becomes kind of indispensable.
I advise you to use your double quotes aplenty, because if you are using them at least there’s a lesser probability of you screwing things up.
All right, with that this chapter of html attributes concludes. Remember it was only to get you a gist of it. There are so many attributes there in HTML. We will learn all about them as we progress. Later dude!
4 Responses
[…] tags. It is the href attribute where you put the link redirect info, all of which we had seen in HTML attributes chapter. am using a step by step process to help you understand how to locate an element using Link […]
[…] Next topic in “How to locate an element using CSS selectors” is on how to locate an element using Tag and Attribute. You can learn all about the attributes of HTML here. […]
[…] you are not sure how to add an image, you can go to back to learning all about the <img> tag and attributes to understand […]
[…] the tags. If you are completely wiped out about what attributes are you can always check out the HTML attributes article where I had talked about it […]