In HTML, each tag can have different attributes applied. Attributes allow the HTML tag to have specific properties added to them. You can assign a "class" to reuse styles through our your website, or style your elements with the "style" attribute. Don't worry about how the style and class attributes work at this moment, this will be discussed further in our Using & Understanding CSS course.

Basic HTML attributes

The following example explains how an <a> anchor tag uses the attributes "href", "target", and "title".

<a href="http://google.com" target="_blank" title="Click Here">

In this example, the anchor is a hyperlink to Google.com. The href attribute will direct the visitor to Google. The target attribute will open the link in a different window or the same window. In this case _blank opens to a new window or tab. The title attribute will display text when hovering over the link. Below is a small list of common attributes used and a description. Below are the most commonly used HTML attributes.

Most common HTML Attributes
class This attribute is used to apply CSS styles in a style sheet. For example: <p class="paragraph"></p>.
style Allows CSS style to be applied to a specific Element. An example usage of this is the following: <p style="color: #000000"></p>.
id This is a particular identifier of the element. This can only be used once per element. For Example: <p id="para1"></p>.
title The title codes information in the tag about the tag. For example in an <a> anchor tag, you can use the title attribute to allow a small text pop up when the mouse is hovers over the anchor. For example: <a href="/support/" title="Click Here"></a>
name This gives the Element a name. This is different than the title in that the name is not seen by the visitor. The most common use of this is in the <a> anchor tag. The name will navigate the visitor to a specific place on the page. For Example: <a name="this-page-location"></a>. This will navigate your browser to the location of this anchor when you visit the url in the browser like the following: http://your-domain.com/#this-page-location
width The width attribute can be used in elements that support. For example: <div width="100"></div>
align The align attribute tells the browser if the text is centered, left, or right aligned. For Example: <div align="left"></div>

These attributes are used most often to style and label your HTML tags. You can add or remove attributes as needed for the tag to function how you want.

HTML Attribute reference

Below is an more exhaustive reference and their correlating tags they are used for.

attributeSupported Elements
abbr <td> <th>
accept-charset <form>
accept <form> <input>
accesskey <a> <area> <button> <input> <label> <legend> <textarea>
action <form>
align <caption> <iframe> <img> <input> <object> <legend> <table> <hr> <div> <h1> <h2> <h3> <p> <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr>
alink <body>
alt <applet> <area> <img> <input>
archive <applet> <object>
axis <td> <th>
background <tbody
bgcolor <table> <tr> <td> <th> <body>
border <table> <img> <object>
cellpadding <table>
char <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr>
charoff <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr>
charset <a> <link> <script>
checked <input>
cite <blockquot> <q> <del> <ins>
class Most Elements
classid <object>
clear <br>
code <applet>
codebase <applet> <object>
codetype <object>
color <basefont> <font>
cols <frameset> <textarea>
colspan <th> <td>
compact <applet> <dir> <dl> <menu> <ol> <ul>
content <meta>
coords <area> <a>
data <object>
datetime <del> <ins>
declare <object>
defer <script>
dir Most Elements
disabled <button> <input> <optgtoup> <option> <select> <textarea>
enctype <form>
face <basefont> <font>
for <label>
frame <table>
frameborder <frame> <iframe>
headers <th> <td>
height <iframe> <td> <th> <img> <object> <applet>
href <a> <area> <link> <base>
hreflang <a> <link>
hspace <applet> <img> <object>
http-equiv <meta>
id Most Elements
ismap <img> <input>
label <option> <optgroup>
lang Most Elements
language <script>
link <body>
longdesc <img> <frame> <iframe>
marginheight <frame> <iframe>
marginwidth <frame> <iframe>
maxlength <input>
media <style> <link>
method <form>
multiple <select>
name <button> <textarea> <applet> <select> <form> <frame> <iframe> <img> <a> <input> <objext> <map> <param> <meta>
nohref <area>
noresize <frame>
noshade <hr>
nowrap <th> <td>
object <applet>
onblur <a> <area> <button> <input> <label> <select> <textarea>
onchange <input> <select> <textarea>
onclick Most Elements
ondblclick Most Elements
onfocus <a> <area> <button> <input> <label> <select> <textarea>
onkeydown Most Elements
onkeypress Most Elements
onkeyup Most Elements
onload <frameset> <body>
onmousedown Most Elements
onmousemove Most Elements
onmouseout Most Elements
onmouseover Most Elements
onmouseup Most Elements
onreset <form>
onselect <nput> <textarea>
onsubmit <form>
onunload <frameset> <body>
profile <head>
prompt <bisindexody>
readonly <textarea> <input>
rel <a> <link>
rev <a> <link>
rows <frameset> <textarea>
rowspan <th> <td>
rules <table>
scheme <meta>
scope <th> <td>
scrolling <frame> <iframe>
selected <option>
shape <a> <area>
size <hr> <font> <input> <basefont> <select>
span <col> <colgroup>
src <script> <input> <frame> <iframe> <img>
standby <object>
start <ol>
style Most Elements
summary <table>
tabindex <a> <area> <button> <input> <object> <select> <textarea>
target <a> <area> <base> <form> <link>
text <body>
title Most Elements
type <a> <link> <object> <param> <script> <style> <input> <li> <ol> <ul> <button>
usemap <img> <input> <object>
valign <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr>
value <input> <option> <param> <button> <li>
valuetype <param>
version <html>
vlink <body>
vspace <applet> <image> <object> <iframe> <img> <object> <table> <col> <col> <col> <col> <col>
width <hr> <iframe> <img> <object> <table> <td> <th> <applet> <col> <colgroup>
widthpre <col>
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200947

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!