Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:8Length:48 minutes
  • Overview
  • Transcript

2.4 HTML Attributes

When creating HTML elements you’ll often find that using tags in their default form is not enough–that’s where HTML attributes come into play. In this lesson, you’ll learn what HTML attributes (and their accompanying values) are, and what they do when you use them with various HTML tags.

Related Links

2.4 HTML Attributes

Hey, welcome back to Start Here: Learn HTML Basics. Let's quickly go over what we've learned so far. We've learned that HTML is a type of markup that you use to give instructions to a web browser. We've learned that pages are made up of HTML elements and the H.T.M.L. elements are created by putting together HTML tags. We also learned that you can have sets of opening and closing tags and that you can have standalone void tags. And the last lesson, you also saw how on top of just the tags themselves we added in some extra information And what we add in there is called an attribute. Now attributes add extra functionality to HTML elements. So let's look at the attribute that we've added to our image element here. Now attributes always follow the same structure. You always have a space after the actual tag name then you have the attribute name and equals sign, a set of talking marks and then you have the value. So you have space attribute equals value in talking marks and you can have multiple attributes per tag and you just have to have a space In between each attribute. Now let's have another attribute into image tag and what you're going to want to do is have a reference handy to all the different HTML elements you have at your disposal. Now I personally like The Mozilla developer network reference. But you can also use the W3.org reference and I'll give you links to both of those. Now down the left side here we have a full list of all HTML elements that are available for use in the current version of HTML. So if we go through alphabetically we can find our Image element. Now we can go into the extra information for that element and if we scroll down, here we can find a list of all the attributes that can Can be used with the image element. Every element is different. Every element has different attributes that you can use along with it. And a reference like this you find out what those attributes are. And we already used the source attribute. And this gives us a description of what that attribute does. In this case that just provides the address of the image file that you want to load into image element. Now let's choose another attribute to use We're going to also add the alt attribute. Now, alt is short for alternative. And you can use this attribute to give some type of full back in case for whatever reason. A visitor is not able to see the image. We can put some text as the value of this old attribute. To describe the image so that if a person can't see the image they still know roughly what was supposed to be there. So we go back into our HTML, we have our space after our last attribute and now we're going to type in our new attribute. We're gonna say equals and we're going to add some token marks. And then in between the two, we put a new value. And we'll add some descriptive text of the image. So now let's see what happens if this image doesn't load, we just deliberately misspelled the name of the file. So now there's is our Alt Text acting as a fullback. Now let's try another example of working with an attribute on an H.T.M.L. tag. So just undo the change we made. Now we're going to add a link. To one of our words that we have in our paragraph here. So let's add in a new element and the element that we're going to use to create a link is the eye element. So check out our reference is that a element And this tells us that this creates an H.T.M.L. anchor or a link and down here we have our attributes and we can see that you need to use an H. ref attribute to specify the U.R.L. that we want this anchor this link to go to so let's add that into our code So we'll add our opening tag and we'll add our closing tag. We'll add some text inside it. And we're gonna make this link to Google, so we'll just put in the word Google. Just make a little space here. Now we need to add our href attribute, so that we know where the link needs to connect to. So we make a space we put in our href attribute we'll set equals and put in our talking marks and then in between the talking marks, we're gonna put the URL of Google. So we'll put http. www.google.com. So now here is a link and if we click that that takes us through to Google. So now we're gradually building up our process. You know that create the mock up required for a web browser you need to piece together. H.T.M.L. elements and that you do that with H.T.M.L. tags that also use H.T.M.L. attributes. Now those concepts are actually the complete foundation for all of the Web design that you will do for the rest of your career. No matter how complex and in depth, everything gets, it's all going to be comprised of those exact same steps. So all you need to do is know where to look to find the correct reference material to learn how to follow those steps as you piece together your websites. And you will have seen In this reference that there are quite a few different H.T.M.L. elements. Most of this, you really want to use very often at all. Most of this are actually fairly edge case this only a handful that you gonna use in all of your projects. So in the next lesson we're going to cover what those common elements are and the role that they play in websites. So see in the next lesson.

Back to the top