Just like my HTML Tag post, we will be rating the HTML attributes. Attributes are used in tags in order to provide additional information about the element. They are used for a wide variety of purposes, including defining sources and adding functionality. To begin with, I will go over the global attributes since they can apply to any HTML element. Then, I will cover the attributes that only apply to certain elements. Also, I will only cover attributes supported in HTML 5.
Like the HTML Tags post, I will be updating this incrementally, so check back from time to time. I will not be covering event attributes, since that will be covered in a different post.
-
accesskey: The Access Key Attribute
Our fist attribute is the accesskey attribute, which is used to specify a shortcut key to focus on an element. This could be used as a shortcut to open a link. For example, if I set the accesskey to the h button, if I press the h button, it will open that link.When you add the accesskey attribute to an element, you have to use a single character to define which key to use as a shortcut. Now, this presents two major issues that makes it difficult to use this attribute.
First, the accesskey defined could conflict with key standards in browsers, and so many browsers require the user to hold down other keys in addition to the accesskey in order to use the shortcut. This depends on the browser, however, and makes using the accesskey confusing. In Chrome, Edge, Safari, and Opera, you use the Alt key in addition to the accesskey. In Firefox, you use Alt+Shift. In old versions of Opera, you use Shift+Esc.
Secondly, there is not a single universal keyboard, and so it is possible that a user may not have the accesskey on their keyboard. This would make it especially difficult for international users of your site.
Although I think accesskey is a great idea, it presents issues in actual use that brings it's rating down.
<a href="https://www.google.com" accesskey="g">Press g to open me!</a>Rating: C
-
class: The Class Attribute
The classic class attribute. The class attribute is used to define one or more class names for an element. These class names can be used in CSS to define styles and can be used in JavaScript for various purposes. I will say upfront that this is my favorite attribute. Nearly every HTML element I use has the class attribute. It is versatile, useful, and widely used. This website, for example, uses Tailwind classes to define styles.
<p class="important green-bg shaded">Paragraph with class</p>Rating: S
-
contenteditable: The Content Editable Attribute
The contenteditable attribute (what a mouthful) allows an element to be edited by the user from the browser.
This sentence, for example, is editable.
This edit does not stay on the website permanently, obviously, but stays edited during the user session. This is a pretty neat attribute. It is not the most useful, but does provide a cool bit of interactability.
<p contenteditable="true">This sentence, for example, is editable.</p>Rating: B