简体   繁体   中英

JS Get list of all available standard HTML tags

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

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, 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.

Got it using T.Js answer above finally! in case anyone asks

"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"

Go to https://www.w3schools.com/tags/ or https://techspirited.com/all-html-tags-list-of-all-html-tags . Copy the tag table contents. Paste to excel. Remove the descriptions. Save as csv.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM