Following hot on the heels of my WCAG look-up tool, I have adapted it and spun off a separate tool to look up HTML references.

I was quite surprised that something like this doesn’t already exist as an extension, but there you go.

Screenshot of HTML Lookup as shown in Google Chrome Web Store
Lookup HTML reference in Google Chrome Web Store.

Why might you need an extension? Why not just do a search? The issue, for me at least, was not about finding a resource, but being able to find it and **format it quickly in the way that I wanted**.

Previously:

  1. Search for reference (e.g. HTML address element)
  2. Scroll past all of the sponsored results or AI-generated slop
  3. Pick what you think is the best/most reliable resource, click on it
  4. After the page is loaded, copy the page heading
  5. Paste it where you are doing your work (logging faults, writing up remediation notes etc)
  6. Switch back to the reference page
  7. Copy the URL
  8. Go back to where you are doing your work
  9. Paste the page title
  10. Forget, once again, the format for a Markdown link

Now, with this extension:

  1. Open the extension – appears in the side panel (if you use the extension version)
  2. Type the element or attribute you need, select from the filtered list
  3. Need a Markdown link? Press ‘1’. It’s copied to your clipboard!

The extension references all HTML elements (with MDN and the WhatWG spec as available sources), HTML attributes (referencing MDN) and all ARIA attributes. Note that there are some missing attribute pages on MDN, and where these are missing, the tool indicates this clearly.

Attribute table on MDN showing that they are looking for contributors for content that has not yet been written
Not all HTML attributes have an entry on MDN.
The lookup tool flagging that the MDN reference is not available
Where an attribute listed does not have an MDN page, it flags this in the tool.

I will be updating the tool as and when new attributes are updated on MDN (heck, I might just create/contribute these pages just so the tool has complete coverage).

The HTML lookup tool showing as a dialog in the bookmarklet version
If you use the bookmarklet version, you get the dialog version of the tool.

Note that the bookmarklet version opens in a dialog, but I have found that on some pages where I was using it the host page steals focus back from the dialog, which is why I looked into having these tools as extensions.

Thoughts? Feedback? Best way to get in touch is via BlueSky or LinkedIn.