In this tutorial, we will be discussing HTML attributes.
What You’ll Need:
1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver
As I am only teaching these tutorials in simple text editing programs, I will not be explaining Dreamweaver. This might come in a later tutorial though. 
Any HTML element can have a few different attributes, which provide additional information about the element. These attributes are always specified in the starting tag and never in the closing tags. They will always have a name and a value, which will always need to be within quotes. It is true that in some browsers, leaving the quotes out will still allow the attribute to be displayed properly, it is not the coding standard, therefore the page will not be considered valid and some browsers will not display them properly, so it is the best practice to always use quotes. You can use either the single or double quotes, and again, if you’ve read previous tutorials, I have already stated, you should always use lowercase when writing your code, so these attributes are no exception.
Common Attributes:
Some common attributes used are:
- class
- id
- style
- title
Class is used to specify a class name for an element. Id is used to specify a unique id for an element. Title is used to display some extra information about an element, which is displayed as a tooltip. This is what would be displayed when the user hovers over the element. Style is used to specify inline styles for an element. This is not as commonly used anymore because we generally recommend using external stylesheets, but it is important to know that you can still use inline styles if needed.
Here are some examples of the attributes that have been discussed:
<p class="green">This would be a paragraph colored green.</p>
<p id="indent">This would be an indented paragraph.</p>
<p style="font-weight: bold;">This would be a bolded paragraph.</p>
<p>This hyperlink contains a <a href="#" title="Hi, thanks for
hovering over me!">tooltip</a> when hovered over, but won’t take you anywhere!</p>
Remember to give your attributes memorable names, but also remember that they will do nothing unless you specific what they are to do in a stylesheet, whether it’s external, embedded, or inline. These terms will be discussed in the CSS tutorial, so if you don’t understand, look for the appropriate tutorial for more information.
For a complete list of legal attributes that can be used for each HTML element, see the W3C’s list here.
To see these examples in action, you could type the following code into a text editor and save and view it. I will include the associated embedded CSS so you can actually see it in action:
<html>
<head>
<title>Lesson 3: HTML Attributes</title>
<style>
.green {
color: #006600;
}
#indent {
margin-left: 25px;
}
</style>
</head>
<body>
<p class="green">This would be a paragraph colored green.</p>
<p id="indent">This would be an indented paragraph.</p>
<p style="font-weight: bold;">This would be a bolded paragraph.</p>
<p>This hyperlink contains a <a href="#" title="Hi, thanks for
hovering over me!">tooltip</a> when hovered over, but won’t take you anywhere!</p>
</body>
</html>
And here is what it would look like in your browser:
And this concludes this tutorial. Watch out for more to come!
Facebook
Twitter
LinkedIn
Myspace
Youtube
