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...
document.querySelectorAll('*')
which will give us all elements in the DOM. we are looking for ALL POSSIBLE STANDARD HTML TAGSThere 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 :
tbody
, tfoot
, and thead
all use HTMLTableSectionElement
, so that means
tablesection
, but that isn't a tag, and tbody
, tfoot
, or thead
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.