{"id":90,"date":"2025-09-05T09:00:03","date_gmt":"2025-09-05T09:00:03","guid":{"rendered":"https:\/\/a11y-tools.com\/blog\/?p=90"},"modified":"2025-09-15T10:08:43","modified_gmt":"2025-09-15T10:08:43","slug":"new-lookup-tool-html-reference-bookmarklet-and-extension","status":"publish","type":"post","link":"https:\/\/a11y-tools.com\/blog\/2025\/09\/new-lookup-tool-html-reference-bookmarklet-and-extension\/","title":{"rendered":"New Lookup tool: HTML Reference (bookmarklet and extension)"},"content":{"rendered":"<p>Following hot on the heels of my <a href=\"https:\/\/a11y-tools.com\/blog\/2025\/08\/new-bookmarklet-wcag-lookup-tool\/\">WCAG look-up tool<\/a>, I have adapted it and spun off a separate tool to look up HTML references.<\/p>\n<ul>\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/look-up-html-reference\/goflpobfjgihmlcbnmeonceebgfiemlj\">Chrome extension: Look up HTML reference<\/a><\/li>\n<li><a href=\"https:\/\/a11y-tools.com\/bookmarklets\/#htmllookup\">Bookmarklet version: Look up HTML reference<\/a><\/li>\n<\/ul>\n<p>I was quite surprised that something like this doesn&#8217;t already exist as an extension, but there you go.<\/p>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/09\/image-2.png\" alt=\"Screenshot of HTML Lookup as shown in Google Chrome Web Store\"><figcaption>Lookup HTML reference in Google Chrome Web Store.<\/figcaption><\/figure>\n<p>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**.<\/p>\n<p>Previously:<\/p>\n<ol>\n<li>Search for reference (e.g. HTML address element)<\/li>\n<li>Scroll past all of the sponsored results or AI-generated slop<\/li>\n<li>Pick what you think is the best\/most reliable resource, click on it<\/li>\n<li>After the page is loaded, copy the page heading<\/li>\n<li>Paste it where you are doing your work (logging faults, writing up remediation notes etc)<\/li>\n<li>Switch back to the reference page<\/li>\n<li>Copy the URL<\/li>\n<li>Go back to where you are doing your work<\/li>\n<li>Paste the page title<\/li>\n<li>Forget, once again, the format for a Markdown link<\/li>\n<\/ol>\n<p>Now, with this extension:<\/p>\n<ol>\n<li>Open the extension &#8211; appears in the side panel (if you use the extension version)<\/li>\n<li>Type the element or attribute you need, select from the filtered list<\/li>\n<li>Need a Markdown link? Press &#8216;1&#8217;. It&#8217;s copied to your clipboard!<\/li>\n<\/ol>\n<p>The extension references all HTML elements (with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\">MDN<\/a> and the <a href=\"https:\/\/html.spec.whatwg.org\">WhatWG spec<\/a> as available sources), <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\">HTML attributes (referencing MDN)<\/a> and all <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Reference\/Attributes\">ARIA attributes<\/a>. Note that there are some missing attribute pages on MDN, and where these are missing, the tool indicates this clearly.<\/p>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/09\/image-e1757018084302.png\" alt=\"Attribute table on MDN showing that they are looking for contributors for content that has not yet been written\"><figcaption>Not all HTML attributes have an entry on MDN.<\/figcaption><\/figure>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/09\/image-3.png\" alt=\"The lookup tool flagging that the MDN reference is not available\"><figcaption>Where an attribute listed does not have an MDN page, it flags this in the tool.<\/figcaption><\/figure>\n<p>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).<\/p>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/09\/image-4.png\" alt=\"The HTML lookup tool showing as a dialog in the bookmarklet version\"><figcaption>If you use the bookmarklet version, you get the dialog version of the tool.<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Thoughts? Feedback? Best way to get in touch is via <a href=\"https:\/\/bsky.app\/profile\/lloydi.com\">BlueSky<\/a> or <a href=\"https:\/\/www.linkedin.com\/in\/lloydi\/\">LinkedIn<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Chrome extension: Look up HTML reference Bookmarklet version: Look up HTML reference I was quite surprised that something like this doesn&#8217;t already exist as an extension, but there you go. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,5],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-bookmarklets","category-extensions","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":9,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}