Attributes are invisible key-value pairs that are included inside HTML elements (or tags) to assign information to the element, such as:

<p attribute-key="attribute-value">Example paragraph</p>

General Attributes

These general attributes are constantly used and are extremely useful.

id

Assign a unique identification string to an element. This is useful for referencing the element with CSS or JavaScript.

<p id="paragraph1">Example paragraph</p>

Once this paragraph is assigned the id "paragraph1" we can then write CSS either in our header or an external file to format it, as follows:

p#paragraph1 { color: blue; }

When referencing an element with an id in CSS, use the name of the element type (in this case, p) followed by the hashtag (#) symbol and the element's id. The result will be as follows:

class

Assign one or more class names to an element. This is useful for referencing the element as part of a group with CSS or JavaScript.

<p class="speaker1">Hello</p>
<p class="speaker2">Hi</p>
<p class="speaker1">How are you?</p>
<p class="speaker2">Fine. You?</p>

We can then assign CSS values as follows:

p.speaker1 { color: green; }
p.speaker2 { color: coral; }

When referencing an element with a class in CSS, use the name of the element type (in this case, p) followed by a period (.) and the element's class name. The result will be as follows:

src

Assign the source for an element. This is typically used when you are including an external file or other resource in your site, such as an image, video, audio, CSS, or JavaScript file. For instance, to embed an image in your HTML, use an img element with a src attribute as follows:

<img src="https://edtechbooks.org/content_images/elearning_hacker/rickroll_4k.jpg">

href

Assign a link (or horizontal reference) to an element. This is typically used to create a hyperlink to a file or another page.

name

Assign a unique name string to an element. This is similar to id, but it is typically used for form elements that will be used to submit information to the server and should be avoided for assigning formatting.

value

Assign a value to an element. This is typically used with input fields like form elements, checkboxes, or radio buttons.

Accessibility Attributes

alt

Provide a description of a visual or audio resource so that screen readers, web crawlers, and those with disabilities can understand the content.

dir

Choose the direction of the text. For example, English would be left-to-right, while Arabic would be right-to-left.

Options include ltr for left-to-right and rtl for right-to-left.

aria

Accessible Rich Internet Applications (ARIA) values are used in more sophisticated applications where content is dynamically changed. We will not address them here, but if you are dynamically changing content on a page after it is loaded, please realize that you will need to include additional markup to ensure that your materials are accessible.

Table Attributes

Tables have a variety of attributes that can be set, such as cellpadding, cellspacing, width, height, etc., but these formatting attributes should generally be set with CSS instead.

Some common structural attributes that may be used include the following:

colspan and rowspan

Make a cell (td or th) span across multiple columns or multiple rows:

<table>
  <thead>
    <tr><th rowspan="2">Name</th><th colspan="2">Values</th></tr>
    <tr><th>X</th><th>Y</th></tr>
  </thead>
  <tbody>
    <tr><td>Chicago</td><td>1.5</td><td>3.2</td></tr>
  </tbody>
</table>

Format Attributes

There are many attributes that may be used for formatting content (e.g., width, height), but these should generally not be used. Instead, you should use element- and class-based CSS whenever possible.

If necessary, the style attribute can be used to apply CSS formatting to a single element, but this should be done sparingly and, instead, the CSS for that element should be set in a separate CSS file. This allows formatting to cascade (or be shared) between files and elements and prevents you from having to update formatting for each and every element.

style

Assign CSS formatting to an element within the HTML tag. This is useful for development and testing, but generally, all CSS formatting should be moved to a separate CSS file and assigned to the element either via the id or class.

Custom Attributes

At times, it can be helpful to store your own metadata in HTML elements. This is best done by creating your own custom attributes. To prevent confusion, you should only create custom attributes that begin with data-*. For instance, if you wanted to store a note about whether an element has been spellchecked or not, you could use data-spellchecked="true".