A Guide to HTML

HTML Attributes

HTML attributes are name/value pairs that provide metadata about an HTML element. In an HTML tag, the attributes follow the tag name in the opening tag. (Naturally, closing tags do not have attributes.) Each name/value pair is separated by space characters. Names and values are associated using an equals sign, and values should be quoted (double quotes are more common, but single quotes can also be used). HTML is case-agnostic about attribute names, but XHTML demands that they be lower-case, so it is recommended to always use lower-case. Attribute values, on the other hand, are always case-sensitive. For many attributes, their values must be chosen from a standardized set, or the browser won’t understand them.

Here is an example of an input tag with multiple attributes, and an explanation of what they do:

<input type="text" id="searchform" value="Enter a search term" />
  • The type attribute determines the type of input field; the text value says it will be a line of text (and not, say, a button).
  • The id attribute gives the tag a unique identifier, which is searchform. If you try to refer to this tag using the ID searchForm, it will not be found, since values are case-sensitive.
  • In the last attribute, value is, confusingly, the name of the attribute; the attribute’s value is Enter a search term. For a text input field, this is the default input value, which is usually overwritten by the user.

Though attributes are always stored as name/value pairs behind the scenes, some attributes can only have Boolean values (true and false). But instead of assigning one of those values, HTML simply assumes a value of true if the attribute is present at all, and false if it’s not. With these attributes, the standare recommends that the attribute value should match the attribute name (e.g. disabled="disabled"). But it doesn’t need to be; any value at all will be considered true (even the string “false”). In HTML (including HTML5), tags like these can be minimized: only the attribute name is given, and no value is assigned. However, this is not valid XML, so attribute minimization is not supported in XHTML. On the other hand, the non-minimized versions work in all forms of HTML. For that reason, I recommend that you do not use attribute minimization at all.

Recall that behind the scenes, the browser turns each HTML element into a DOM node object. When this happens, the HTML element’s attributes become properties of that DOM object. This makes them easy to change using JavaScript; you can simply assign a new value to the object’s property, and the browser immediately re-renders the HTML element using the new attribute value.

Global Attributes

Each HTML element type will have different kinds of attributes associated with it, since attributes that make sense for one element usually don’t make sense for another. I will give these attributes when we discuss the relevant tags.

But there are some attributes that can be used with any HTML element. These attributes are called global attributes. They are mainly used either for accessibility, or to target elements using CSS or JavaScript. The most significant ones are:

class
Specifies a category for HTML elements. Many elements can have the same class, even if they are not of the same type. Conversely, the same element can have multiple classes. (An HTML class is not even conceptually the same as a class in object-oriented programming; if you know OOP already, try not get mixed up.)

If an element has multiple classes, they should be separated by space characters in the attribute’s value string. For example, to make a tag be of both the alert and status classes, you would say class="alert status". Because of this, you cannot have spaces in the name of a class. For historical reasons, it is standard practice to replace spaces with hyphens in class names, and to make all class names lower-case.

Class names, like everything else in HTML, should be semantic: alert is fine, but flashing-red is not.

id
Identifies a specific HTML element. ID’s must be unique; no two elements can have the same ID, even if they are different types. Like class names, ID’s cannot contain spaces, and should be semantic.

If you want a URL to target an element with a specific ID, then you can use the ID as the URL’s fragment identifier. Let’s say your website is at http://www.example.com, your HTML file is called book.html, and you have a tag with the ID of chapter-three. The URL would be:

http://www.example.com/book.html#chapter-three

When the browser goes to this URL, it will load the contents of book.html, then scroll down to the tag with the ID of chapter-three.

title
Specifies the title of an element. This is usually displayed as a tooltip: text that appears when the cursor is moved over the element. It is also used by screen readers, which usually read the title aloud.
dir
Specifies the text direction. The value must be either rtl (right-to-left), ltr (left-to-right, the default), or auto (if the text direction isn’t known).
lang
Specifies the language of the element. The value of the attribute is an ISO Language Code, either a generic language code (“en”) or a region-specific language code (“en-US”).
name (deprecated on most elements)
This attribute gives a name to the HTML element, which may or may not be unique. The HTML 4.01 standard allowed it on certain elements, but bad designers started using them on everything. The XHTML 1.0 standard deprecated its use with nearly every HTML tag. If the name is unique, use the id attribute; otherwise, use the class attribute.

The only exceptions are form tags and the <meta> tag. I will go over form tags when I cover HTML forms. The <meta> tag will be discussed in the next section.

Remember that tags can be nested. This means entire sections of a page can be targeted with CSS or JavaScript, by specifying the attribute of the outermost tag.

Event Attributes

Event attributes are used to specify what happens when an event occurs involving that element. Usually, the attribute’s value will be a JavaScript function call.

But remember that HTML is semantic; it should describe only the meaning of elements, and not their behavior. For that reason, you should never specify event attributes in HTML tags. (If you’re curious, the correct technique is to use JavaScript to bind function calls to the DOM object’s properties.)

This was not always possible. In the past, browsers did not implement JavaScript in a standardized way, and the only cross-browser solution was to put event attributes in HTML tags. That hasn’t been the case for years, but some old HTML pages (and, unfortunately, textbooks) still do this. Just so you’ll know them when you see them, I’ll list the most common event attributes, by category. Most are fairly self-explanatory.

  • Mouse events: onclick, ondoubleclick, onmouseover, onmouseout, onmouseup
  • Key events: onkeydown, onkeypress, onkeyup
  • Form events: onblur, onchange, onselect, onsubmit
  • Window events: onload, onunload

The HTML5 specification created many new event attributes, as well as a whole slew of new global attributes. All are designed to be used by JavaScript, not in HTML tags (even the new global attributes, as far as I can tell). For that reason, I won’t talk about them in this article.

Style Attributes (Deprecated)

Previous HTML specification allowed many presentational attributes. Some were deprecated in HTML 4.01, and all are deprecated in HTML5. Even before then, they were discouraged. If you want to specify any of these attributes, you should so so using CSS. I’m including them here for information only.

align
Where to align the element, relative to the surrounding text. Possible values are left, right, top, middle, or bottom. It could only be used on block-level elements.
bgcolor
The background color of the element.
border
The thickness of the border around the element. It was usually specified in pixels.
color
The foreground color of the element. Usually, this meant the text color.
style
The style to use on the element. The value could be any string consisting of CSS style information. Obviously, you should put this in a CSS file instead.

Now that you’re familiar with tag syntax, and have a general feel for attributes, we can start to cover the different HTML tags themselves.

Advertisements

About Karl

I live in the Boston area, and am currently studying for a BS in Computer Science at UMass Boston. I graduated with honors with an AS in Computer Science (Transfer Option) from BHCC, acquiring a certificate in OOP along the way. I also perform experimental electronic music as Karlheinz.
This entry was posted in HTML and tagged , . Bookmark the permalink.

4 Responses to A Guide to HTML

  1. Ben says:

    You probably know this, but the self-closing-ness of your tags are likely to be totally ignored by the browser unless you set the mime type to xhtml! For example, in most browsers this
    This is a paragraph
    will render exactly the same as this:
    This is a paragraph

    A common gotcha is thinking that you can use a self-closing script tag, e.g.

    instead of

    More on this on stackoverflow:
    http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work

    So there can be arguments for doing this for style or tool support, but the browser really doesn’t care.

    • Ben says:

      wow, looks like wordpress doesn’t escape tags. Sorry, but hopefully the stackoverflow article explains well enough

      • Karl says:

        Also, about the tags – nope, WordPress does not excape HTML; you can use it to mark up comments (as I did just now), so it really can’t do that. For HTML tags, you have to use the &lt; and &gt; escape sequences. I also had to do this when I wrote the article, so I know how much of a PITA it is.

    • Karl says:

      Ben: First of all, thanks for taking the time to read the article. I need all the help I can get…

      The “self-closingness” issue applies only to tags that do not represent empty elements, and that includes the <script> tag. It’s supposed to contain text data (the actual JavaScript code). Trying to make these tags self-closing is not valid XHTML, and browsers will consider it “tag soup.”

      If the tag is actually self-closing – like the <br /> or <input /> tags – then the XHTML standard demands that they be properly terminated, or they won’t validate. The HTML standard (even HTML5) does not, but since XHTML is the one that has been used for years, I think it’s better to include the terminating slash.

      However, the Stack Overflow post did show something else that I wasn’t aware of: the <p> tag cannot contain other block-level tags, like <div>. (Inline tags are fine.) If you try to do this, the browser will consider it “tag soup” and automatically treat it as a tag with empty content. In other words, <p><div>Hello, world!</div></p> will turn into <p></p><div>Hello, world!</div><p></p>.

      I’ll update the article with this info. So, thank you for pointing this out. Please let me know if you find anything else in the article that needs work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s