How to Add an Attribute to an HTML Tag

Problems with a website
Learning how to best report website issues is important.

The HTML language includes a number of elements. These include commonly used website components like paragraphs, heading, links, and images. There are also a number of newer elements that were introduced with HTML5, including the header, nav, footer, and more. All of these HTML elements are used to create the structure of a document and give it meaning. To add even more meaning to elements, you can give them attributes.

A basic HTML opening tag starts with the < character. That is followed by the tag name and finally you complete the etag with the > character. For example, the opening paragraph tag would be written like this:

<p>

To add an attribute to your HTML tag,you first put a space after the tag name (in this case that is the "p"). Then you would add the attribute name that you wish to use followed by an equal sign. Finally, the attribute value would be placed in quotation marks. For example:

<p class="opening">

Tags can have multiple attributes. You would separate each attribute from the others with a space.

<p class="opening" title="first paragraph">

Elements With Required Attributes

Some HTML elements actually require attributes if you want them to work as intended. The image element and the link element are two example of this.

The image element requires the "src" attribute. That attribute tells the browser which image you want to use in that location.

The value of the attribute would be a file path to the image. For example:

<img src="images/logo.jpg" alt="Our company logo">

You will notice that I added another attribute to this element, the "alt" or alternate text attribute. This is not technically a required attribute for images, but it is a best practice to always include this content for accessibility.

The text listed in the value of the alt attribute is what will display if an image fails to load for some reason.

Another element that requires specific attributes is the anchor or link tag.  This element must include the "href" attribute, which stands for 'hypertext reference." That is a fancy way of saying "where this link should go." Just like the image element needs to know which image to load, the link tag must know where it should like to. Here is how a link tag may look:

<a href="http://webdesign.about.com">

That link would now bring a person to the website specified in the value of attribute. In this case, it is the main page of the About.com web design content.

Attributes as CSS Hooks

Another use of attributes is when they are used as "hooks" for CSS styles. Because web standards dictate that you should keep your page's structure (HTML) separate from its styles (CSS), you use these attribute hooks in the CSS to dictate how the structured page will display in the web browser. For instance, you could have this piece of markup in your HTML document.

<div class="featured">

If you wanted that division to have a background color of black (#000) and a font-size of 1.5em, you would add this to your CSS:

.featured {
  background-color: #000;
  font-size: 1.5em;
}

The "featured" class attribute acts as a hook that we use in the CSS to apply styles to that area. We could also us an ID attribute here if we wanted. Both classes and IDs are universal attributes, which means that they can be added onto any element. They can also both be targeted with specific CSS styles to determine the visual appearance of that element.

Regarding Javascript

Finally, using attributes on certain HTML elements is also something you may use in Javascript. If you have script that is looking for an element with a specific ID attribute, that is yet another use of this common piece of the HTML language.

Original article by Jennifer Krynin. Edited on 9/22/16 by Jeremy Girard