The list of attributes available in HTML is long and well-documented. Even if you havent memorized them (and theres totally nothing wrong with an author er random person off the street, who has), there are a bunch of places where HTML attributes youre familiar with will have different or more specific jobs. Lets take a look.nameYou may have heard of the name attribute, giving a name/label to information sent through a form. And more specifically you may have used it to bring together a set of radio buttons, but you can also use it with the details element to have only one of a set of accordions open at a time.Like if you have more than one refrigerator in the office at work, any respectable person would only open one door at a time. Right, Bob?<details name="office-kitchen"> <summary>Refrigerator 1</summary> Lunches, condiments, yogurt et al.</details><details name="office-kitchen"> <summary>Refrigerator 2</summary> More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.</details><details name="office-kitchen"> <summary>Refrigerator 3</summary> Cookie dough someone bought from somebodys childs fundraiser, expired milk, unidentifiable meat et al.</details>See the Pen Name [forked] by Undead Institute.titleYouve probably heard of the universal attribute title. Its typically thought of as the built-in tooltip text, but three elements have special semantics for the title attribute: input and the rarely used gems, the definition (dfn) element, and the abbreviation (abbr) element.If youre using a pattern attribute on an input to provide some regex-based error correction, then you should definitely tell the user how to meet the criteria youre using. The title attribute can be used both as a tooltip and as the message shown when the user doesnt meet that criteria.<form method="post" action="#"> <label>Who took my <em>well labeled</em> yogurt from the company fridge? I know it was you, Bob.<br> <input type="text" pattern="Bob [A-Za-z].+" title="There are many Bobs. The only question is which one it was. Please limit your answers to Bob and his/her last name."> </label><br> <button type="submit">Submit</submit></form>See the Pen Title - Input [forked] by Undead Institute.For a dfn element, if you use the title attribute, then it has to include the term being defined. dfn should still have text in it, but it can be an abbreviation or a different form of the term.<p><dfn title="Office Yogurt Thief">OYG</dfn>s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.</p>See the Pen Title - dfn [forked] by Undead Institute.A title on an abbr element not only sets the tooltip but explicitly has the expansion of the abbreviation or acronym. As it says in the spec: "The [title] attribute, if specified, must contain an expansion of the abbreviation, and nothing else." Thats the specifications equivalent of threatening a mafia hit if you arent careful with your title attributes. You have been warned, Bob.When dealing with a suspected yogurt thief, we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with the problem.See the Pen Title - abbr [forked] by Undead Institute.valueThe value attribute is well known for setting default values on inputs, but you can also use it on a list item (li) within an ordered list (ol) to change the number of that item and all that follow it. It only takes integers, but you can use it no matter what type of ordered list you use (numeric, alphabetical, or Roman numerals).<h1>Favorite Co-workers</h1><ol> <li>Tina</li> <li>Keesha</li> <li>Carlos</li> <li>Jamal</li> <li>Scott</li> <li value="37">Bob</li> <li>Bobbie</li> <li>Bobby</li> <li>"Rob"</li></ol>See the Pen Value [forked] by Undead Institute.datetimeYou might have used a datetime attribute on a time element to provide a machine-readable format of the time and/or date represented in the time elements text: <time datetime="2024-12-09">Dec. 12, 2024</time>The same attribute can also be used with the ins and del elements (used for notating an addition/insertion and deletion of content, respectively). The datetime attribute on ins and del provides a machine-readable date (and optionally a time) for when the change was made. You can show it to the visitor if you like, but its mainly intended for private use. Check out the edits of the original version of an earlier example:When dealing with a <ins datetime="2024-11-17">suspected</ins> yogurt thief <del datetime="2024-11-17">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17">Bob</del> <ins datetime="2024-11-17">the problem</ins>.See the Pen Datetime [forked] by Undead Institute.As an added note, screenreaders do not announce the datetime attribute in this context.citeSticking with our oft-neglected friends ins and del, the cite attribute that you use on blockquote and q elements to provide a URL of the source of the quotation can also be used on ins and del to provide the URL of a document explaining the changes.When dealing with a <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">suspected</ins> yogurt thief <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">Bob</del> <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">the problem</ins>.See the Pen Cite [forked] by Undead Institute.Again, these dates are not announced in assistive tech, like screen readers.multipleYou probably know the multiple attribute as that more-than-meets-the-eye attribute that transforms a dropdown menu into a multi-select box, like a co-worker who lets you choose two donuts from the box. (Im lookin at you, Tina.) But it has two other uses as well. You can add it to both a file input and an email input to accept multiple files and emails, respectively.<form method="post" action="#"> <label>Upload complaint forms (about Bob) <input type="file" multiple> </label><br> <label>Email all of Bobs bosses: <input type="email" multiple></label><br> <button type="submit">Submit</submit></form>Just be sure that the emails are comma-separated.See the Pen Multiple [forked] by Undead Institute.forIn your travels across the internet, youve probably come across the for attribute when its used to associate a label element with a form field (input, select, textarea, etc.), but you can also use it to explicitly associate the elements of a calculation with an output element.Unlike a label-input relationship, which is a one-to-one relationship (i.e., one label for one field), the for attribute used on an output can hold an unordered, space-separated list of IDs of the fields that contributed to the calculation.<form method="post" action="#" id="comeuppance"> <fieldset><legend>Defendant name</legend> <label>First Name: <input name="fname" type="text"></label> <label>Last Name: <input name="lname" type="text"></label> </fieldset> <label>Number of yogurts stolen (unlabeled): <input name="numunlbld" id="numstolen-unlbld" type="number"> </label> * <label>Unlabeled Multiplier: <input name="multiunlbld" id="multi-unlbld" type="number" value="0.5"> </label> + <label>Number of yogurts stolen (labeled): <input name="numlbld" id="numstolen-lbld" type="number"> </label> * <label>Labeled Multiplier: <input name="multilbld" id="multi-lbld" type="number" value="1.5"> </label> = <label>Suggested prison term (in years): <output id="answer" for="numstolen-unlbld numstolen-lbld multi-unlbld multi-lbld"></output> </label></form>See the Pen For [forked] by Undead Institute.targetJust like you can use a target attribute to open a link in a new tab/window, you can use the same target attribute and value _blank to have a form open the response in a new tab/window.<form method="post" action="#" id="comeuppance" target="_blank"> [...]</form>disabledYou may have used the disabled attribute to knock out an individual form field, but you can also use it to disable every descendant of a fieldset element. No matter what HR says and its innocent-until-proven-guilty ethos, we all know Bob did it. Dont we?<form method="post" action="#" id="comeuppance"> <fieldset disabled><legend>Defendant name</legend> <label>First Name: <input name="fname" type="text" value="Bob"></label> <label>Last Name: <input name="lname" type="text" value="McBobberson"></label> </fieldset> [...]</form>See the Pen Disabled [forked] by Undead Institute.Attribute SelectorsWhile not technically an HTML tip, attributes can also be used as selectors in CSS. You put square brackets around the attribute name and youll select all elements that contain that attribute.<style> [title] { background-color: red; }</style><h1>List of <del>Suspects</del><ins>Co-workers</ins></h1><ol> <li>Fred</li> <li>Rhonda</li> <li>Philomina</li> <li>Cranford</li> <li>Scott</li> <li title="the guilty one">Bob</li> <li>Bobbie</li> <li>Bobby</li> <li>"Rob"</li></ol>See the Pen Attribute Selector [forked] by Undead Institute.Theres actually a whole lot more you can do with attribute selectors, but thats the topic of another article literally.Wrapping UpOkay, now that weve learned some trivia we can use to properly prosecute Bobs office and yogurtorial transgressions, do you have a favorite HTML attribute I didnt discuss? Show off your personal life-of-the-party energy in the comments. (And, yes, cool people have a favorite HTML attribute really cool people right? Right?? Right!?!?!?!?!)