Locked lesson.

Upgrade

About this lesson

Learn about different Attribute tags such as Language Attributes, Title Attributes, and more...

Quick reference

Understanding HTML Attributes

 Attributes allow us to add additional information to our HTML tags.

When to use

Sometimes you need to add a little bit more information to a particular HTML tag. To do that, use an attribute.

Instructions

Attributes allow us to specify extra information on an HTML tag.  They help us designate height and width for images, add tool tips to elements, designate language for web pages, and many more things.

We'll learn more attributes as we go along, there's no need to memorize them.

Hints & tips

  • Attributes allow us to add additional information to an HTML tag.
  • There are many types of attributes.
  • We don't need to memorize them.
  • We'll look at the important ones as we go throughout the course.
  • You should generally use lower case for your attributes.
Login to download
  • 00:05 Okay, so in the last video, we talked about HTML tags and
  • 00:08 the sorta structure of them.
  • 00:09 There's one more thing we need to talk about regarding structure of HTML tags.
  • 00:14 And that's something called an attribute.
  • 00:15 An attribute is a little something that can go on an HTML tag to give a little bit
  • 00:20 more information.
  • 00:21 Your tags don't always have attributes but sometimes they do and as we go along,
  • 00:25 you'll learn which ones commonly used attributes and
  • 00:28 you'll learn what kinda things to go in there.
  • 00:30 But for right now, you just need to sort of be aware of the concept that
  • 00:34 you can add a little bit information extra.
  • 00:36 And it's kinda hard to give you some examples before we've
  • 00:39 learned any of these tags but we'll go through a couple of them.
  • 00:42 For instance HTML you can add something called a language
  • 00:46 attribute to your HTML tag and that's just lang = English-US.
  • 00:52 And if we click this and head back to our server here and
  • 00:54 click reload nothing has really changed.
  • 00:57 What this does is it just tells the web browser, hey,
  • 01:00 this is supposed to be English.
  • 01:01 And that's helpful for people that have text readers,
  • 01:05 voice-automated text reader things, for people that are blind, things like that.
  • 01:09 It's also good for the search engines.
  • 01:11 You're telling Google, hey, this is supposed to be English.
  • 01:13 Now Google can figure out your website is English anyway just by scanning it and
  • 01:17 saying, hey this is English.
  • 01:18 But it sort of best practices to do that sort of thing.
  • 01:22 But there's lot's of different attributes that you can use.
  • 01:25 Just kinda looking through the code that have already, this P stands for,
  • 01:28 we haven't talked about it yet.
  • 01:29 We'll talk about it in a little bit.
  • 01:31 But this P stands for paragraph we're designating this as a paragraph,
  • 01:35 you can use something called a title attribute.
  • 01:37 You can use that on most tags, but for this we would type,
  • 01:40 type title= "Hello there!".
  • 01:46 And if we save this, and if we come back here, then click reload,
  • 01:49 it does look like anything happened.
  • 01:51 But if I hover my mouse over here, boom.
  • 01:55 We get this pop up little thing that says, Hello there and
  • 01:58 we can change this to whatever we want.
  • 02:01 Isn't this weird.
  • 02:03 Save it, hit reload.
  • 02:05 And if we kinda hover this over, this is called a tool tip or a text tool tip.
  • 02:09 There's all kind of weird things you can do with this.
  • 02:12 One reason to do this is for SEO search engine optimization.
  • 02:16 Some people use that for SEO.
  • 02:18 But that's a title attribute, this is a language attribute.
  • 02:21 Like I said, there's lots of different attributes and you'll learn them as we go.
  • 02:24 Another one would be, for instance, if we create an image.
  • 02:28 We could put a size attribute that specifically tells how big the image is
  • 02:32 supposed to be, in height and width in pixels.
  • 02:35 So, we'll see that as we learn image tags, we'll see how to do that.
  • 02:38 But you definitely don't have to memorize all these attributes.
  • 02:41 And this is more just to, sort of, for your information type thing.
  • 02:44 You'll learn this stuff as we go along, like I said.
  • 02:47 But that's pretty much all there is to HTML tags and specifically attributes.
  • 02:51 One thing I should mention that I didn't mention in the last video is
  • 02:54 capitalization.
  • 02:56 Now, this is the same thing as this,
  • 03:01 uppercase and lowercase and the same thing as this.
  • 03:05 They all work the same.
  • 03:07 HTML is case insensitive.
  • 03:09 It doesn't really matter whether you use upper case or lower case.
  • 03:11 But best practices say that we should use lower case all the time.
  • 03:15 And it's a same thing for attribute.
  • 03:17 You should usually use lower case for your attributes as well.
  • 03:21 I capitalize this probably shouldn't have done that lower case.
  • 03:25 Right here, this one is capitalized obviously, but
  • 03:28 this is a specific language attribute and so it's okay for that to be capitalized.
  • 03:33 But generally speaking you wanna keep all this stuff in lower case for one thing
  • 03:36 it just makes it easier to read, and well that's pretty much the only thing.
  • 03:40 It makes it easier to read.
  • 03:41 But just sorta keep that in mind as we move forward, and in the next video,
  • 03:45 I wanna talk about the HTML skeleton, the basic layout of all HTML pages.

Lesson notes are only available for subscribers.

Gift this course