JS Get list of all available standard HTML tags

Question

Is there a way to get JS to export a list of all possible standard HTML tags?

for instance, if we would like to get all available style properties we could

var d = document.createElement('div');
for(var property in d.style) console.log(property); // would print out all properties;

But we would like to know if there is a way to get all available HTML tags instead.

If such a thing is not possible, does anybody know where can we get our hands on such a list? we couldn't find it in either comma delimited / json... all we found was websites with references etc...

NOTE - we are not talking about document.querySelectorAll('*') which will give us all elements in the DOM. we are looking for ALL POSSIBLE STANDARD HTML TAGS

T.J. Crowder · Accepted Answer

There is no list of "all possible" HTML tags, because an infinite number of HTML tags are possible. There's the specification, which list all current standard HTML tags, but of course, you can create custom elements with their own tags.

Out of curiousity, I looked to see how hard it is to get the list from the spec's web page. I came up with this:

[...document.querySelectorAll("th > code[id*='elements-3:'] > a")].map(a => a.textContent).join()

So, not difficult.

If you run that in the console when you have the spec open from the link above, as of this writing in October 2018 (and also this edit five years later), it lists 112 elements:

a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,kbd,label,legend,li,link,main,map,mark,menu,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,slot,small,source,span,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,u,ul,var,video,wbr

It's tempting to use a code-based approach, looking for HTML element constructors by examining the properties of window:

const show = msg => {
  const p = document.createElement('pre');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
};
const tags = Object.getOwnPropertyNames(window)
  .map(key => {
    const match = /^HTML(.+)Element$/.exec(key);
    return match && match[1].toLowerCase();
  })
  .filter(tag => tag && tag !== "unknown");
show(`${tags.length} tags found:`);
tags.forEach(show);

.as-console-wrapper {
  max-height: 100% !important;
}

But:

That only tells you what the browser supports, which may not be the full range of defined HTML and will vary from vendor to vendor (for me, Chrome lists 71 tags, whereas Firefox and Edge list 67).
It isn't a one-to-one list. For instance, tbody, tfoot, and thead all use HTMLTableSectionElement, so that means
The above lists tablesection, but that isn't a tag, and
The above doesn't list tbody, tfoot, or thead
Not all elements have their own constructors, many of them are just HTMLElement instances (code, cite, b, aside, ...)

So, yeah, the code approach doesn't work. You'll have to get the list from the spec.

JS Get list of all available standard HTML tags

Answers (2)

Related Questions