javascript - JS Get list of all available standard HTML tags - Stack Overflow

admin管理员组

文章数量:1312801

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

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

• javascript
• html

Share Improve this question Follow edited Oct 22, 2018 at 11:50 asked Oct 22, 2018 at 11:43 user4602228user4602228 8

• 1 There is standard and non-standard tags. Think about XML structure (that is similar to HTML), it's infinite amount of possible tags. Maybe you wish to list all tags that are present in your DOM? Then elems = document.body.getElementsByTagName("*") – Justinas Commented Oct 22, 2018 at 11:46
• 1 Are you looking for something like this: stackoverflow./questions/12823264/… – Mariyan Commented Oct 22, 2018 at 11:47
• 1 Nope, all possible HTML tags, not all which are inside the DOM – user4602228 Commented Oct 22, 2018 at 11:49
• 1 Go to w3schools./tags or techspirited./all-html-tags-list-of-all-html-tags. Copy the tag table contents. Paste to excel. Remove the descriptions. Save as csv. – Mariyan Commented Oct 22, 2018 at 11:55
• 1 Pointy please place the code in your console and let me know what es up – user4602228 Commented Oct 22, 2018 at 11:55

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 9

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.

You could just take a list from a site like w3scools, so, I did. I needed this anyway and had it lying around in a project. It is an array of all the HTML elements as of today (Feb 8, 2023).

const HTMLElements = [
    "!DOCTYPE",
    "a",
    "abbr",
    "abbr",
    "acronym", // NOT HTML5
    "address",
    //"applet", // NOT HTML5 (NOT MAJORLY SUPPORTED)
    "area",
    "article",
    "aside",
    "audio",
    "b",
    "base",
    "basefont", // NOT HTML5
    "bdi",
    "bdo",
    "big", // NOT HTML5
    "blockquote",
    "body",
    "br",
    "button",
    "canvas",
    "caption",
    "center", // NOT HTML5
    "cite",
    "code",
    "col",
    "colgroup",
    "data",
    "datalist",
    "dd",
    "del",
    "details",
    "dfn",
    "dialog",
    //"dir", NOT HTML5 (use "ul" instead)
    "div",
    "dl",
    "dt",
    "em",
    "embed",
    "fieldset",
    "figcaption",
    "figure",
    //"font", // NOT HTML5 (use CSS)
    "footer",
    "form",
    //"frame", // NOT HTML5
    //"frameset", // NOT HTML5
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "head",
    "header",
    "hr",
    "html",
    "i",
    "iframe",
    "img",
    "input",
    "ins",
    "kbd",
    "label",
    "legend",
    "li",
    "link",
    "main",
    "map",
    "mark",
    "meta",
    "meter",
    "nav",
    //"noframes", // NOT HTML5
    "noscript",
    "object",
    "ol",
    "optgroup",
    "option",
    "output",
    "p",
    "param",
    "picture",
    "pre",
    "progress",
    "q",
    "rp",
    "rt",
    "ruby",
    "s",
    "samp",
    "script",
    "section",
    "select",
    "small",
    "source",
    "span",
    //"strike", NOT HTML5 (Use <del> or <s> instead)
    "strong",
    "style",
    "sub",
    "summary",
    "sup",
    "svg",
    "table",
    "tbody",
    "td",
    "template",
    "textarea",
    "tfoot",
    "th",
    "thead",
    "time",
    "title",
    "tr",
    "track",
    //"tt", // NOT HTML5 (Use CSS)
    "u",
    "ul",
    "var",
    "video",
    "wbr"
] // Total of 116 (excluding non-html5 and also ments, which are "<!-- [ment] -->").

本文标签： javascriptJS Get list of all available standard HTML tagsStack Overflow