API tools faq
paste
Advertisement
jcunews

HtmlTagsAuditor.html

jcunews
Mar 23rd, 2022
1,591
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>HTML Tags Auditor</title>
  6.   <style>
  7. body { margin: .5em auto; max-width: 85ch; font: 14pt/normal sans-serif }
  8. h2 { margin: 0; text-align: center }
  9. h2 span { font-size: 14pt }
  10. center { font-size: 12pt }
  11. p {
  12.   display: block; margin: 1em auto; width: 30ch;
  13.   background: #fdb; text-align: center; line-height: 1.3em;
  14. }
  15. #disp { display: none }
  16. a { margin-left: .5em }
  17. ul { margin: 0; padding-left: 1em }
  18. li { margin-top: .3em }
  19. #stats { margin: 1em 0; text-align: center }
  20. input { margin-left: 1.5em }
  21. input, label { cursor: pointer }
  22. #fs:checked ~ #out tbody tr:not(.supported),
  23. #fq:checked ~ #out tbody tr:not(.supported),
  24. #fq:checked ~ #out tbody tr.generic,
  25. #fg:checked ~ #out tbody tr:not(.generic),
  26. #fu:checked ~ #out tbody tr:not(.unsupported),
  27. #fl:checked ~ #out tbody tr:not(.unsupported),
  28. #fl:checked ~ #out tbody tr.rejected,
  29. #fr:checked ~ #out tbody tr:not(.rejected) { display: none }
  30. #fu { margin-left: 20.05ch }
  31. #fu, #fu ~ input, #fu ~ label { margin-top: .3em }
  32. #fs + label, #fu + label { display: inline-block; width: 5.8em }
  33. #fq + label, #fl + label { display: inline-block; width: 11.7em }
  34. #info { margin-top: 1em }
  35. #out { position: relative; margin: 1em auto; counter-reset: num }
  36. th { line-height: 1.3em }
  37. th { background: #555; color: #fff; font-weight: normal }
  38. td { padding: 0 .3em }
  39. td:first-child:before {
  40.   display: block; position: absolute; left: -4.5ch; width: 2em;
  41.   text-align: right; color: #000;
  42.   counter-increment: num; content: counter(num) ".";
  43. }
  44. tr:nth-child(2n) td { background: #eee }
  45. .supported { color: #070 }
  46. .generic { color: #007 }
  47. .unsupported { color: #900 }
  48. .rejected { color: #a0a }
  49. code { padding: 0 .1em; background: #eef }
  50. #test { position: absolute; top: -100vw }
  51.   </style>
  52. </head>
  53. <body>
  54.   <h2>HTML Tags Auditor <span>v1.0.1</span></h2>
  55.   <center>
  56.     AGPL v3. March 2022.
  57.     <a href="https://www.reddit.com/user/jcunews1">Reddit</a>
  58.     <a href="https://greasyfork.org/en/users/85671-jcunews">Greasyfork</a>
  59.     <a href="https://pastebin.com/u/jcunews">Pastebin</a>
  60.   </center>
  61.  
  62.   <p id="nojs">This application requires Javascript.</p>
  63.  
  64.   <div id="disp">
  65.  
  66.     <div id="stats"></div>
  67.  
  68.     Filter:
  69.     <input id="fa" type="radio" name="filter" checked />
  70.     <label for="fa">All</label>
  71.     <input id="fs" type="radio" name="filter" />
  72.     <label for="fs">Supported</label>
  73.     <input id="fq" type="radio" name="filter" />
  74.     <label for="fq">Supported (unique object)</label>
  75.     <input id="fg" type="radio" name="filter" />
  76.     <label for="fg">Supported (generic object)</label>
  77.     <br />
  78.     <input id="fu" type="radio" name="filter" />
  79.     <label for="fu">Unsupported</label>
  80.     <input id="fl" type="radio" name="filter" />
  81.     <label for="fl">Unsupported (allowed)</label>
  82.     <input id="fr" type="radio" name="filter" />
  83.     <label for="fr">Unsupported (rejected)</label>
  84.  
  85.     <table id="out">
  86.       <thead><th>Tag Name</th><th>Object Name</th></thead>
  87.       <tbody></tbody>
  88.     </table>
  89.  
  90.     Notes:
  91.     <ul>
  92.       <li>
  93.         Tag list is a combined list of HTML v2.0, v2.x, v3.0, v3.2, v4.0, v4.01, v5, including vendor specific Netspace Navigator v4.0 and Microsoft Internet Explorer v5.5 tags.
  94.       </li>
  95.       <li>
  96.         HTML5 tag list is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a>.
  97.       </li>
  98.       <li>
  99.         All other tags are taken from <a href="https://www.htmllint.org/tagslist.html">https://www.htmllint.org/tagslist.html</a>. List may not be accurate.
  100.       </li>
  101.       <li>
  102.         Tags from other specifications such as XML, SVG, MathML, etc., are not included.
  103.       </li>
  104.       <li>
  105.         Result is based on HTML tag usage in a Standard mode HTML5 document of this web browser.
  106.       </li>
  107.       <li>
  108.         Unsupported but allowed tags work like <code>SPAN</code> tag, except that it's implemented as an unknown element object (<code>HTMLUnknownElement</code>). An unknown element object works same as generic element object (<code>HTMLElement</code>).
  109.       </li>
  110.     </ul>
  111.  
  112.   </div>
  113.  
  114.   <div id="test"></div>
  115.  
  116.   <script>
  117. nojs.style.display = "none";
  118. disp.style.display = "block";
  119. tags = "\
  120. A,ABBR,ABBREV,ABOVE,ACRONYM,ADDRESS,APPLET,AREA,ARRAY,ARTICLE,ASIDE,ATOP,AU,AUDIO,\
  121. B,BANNER,BAR,BASE,BASEFONT,BDI,BDO,BELOW,BGSOUND,BIG,BLINK,BLOCKQUOTE,BODY,BODYTEXT,BOX,BQ,BR,BT,BUTTON,\
  122. CANVAS,CAPTION,CENTER,CHOOSE,CITE,CODE,COL,COLGROUP,COMMENT,CONTENT,CREDIT,\
  123. DATA,DATALIST,DD,DDOT,DEL,DETAILS,DFN,DIALOG,DIR,DIV,DL,DOT,DT,\
  124. EM,EMBED,\
  125. FIELDSET,FIG,FIGCAPTION,FIGTEXT,FIGURE,FN,FONT,FOOTER,FORM,FRAME,FRAMESET,\
  126. H1,H2,H3,H4,H5,H6,HAT,HEAD,HEADER,HGROUP,HR,HTML,HYPE,\
  127. I,IFRAME,ILAYER,IMAGE,IMG,INPUT,INS,ISINDEX,ITEM,\
  128. KBD,KEY,KEYGEN,\
  129. LABEL,LANG,LAYER,LEFT,LEGEND,LH,LI,LINK,LISTING,\
  130. MAIN,MAP,MARK,MARQUEE,MATH,MENU,MENUITEM,META,METER,MULTICOL,\
  131. NAV,NEXTID,NOBR,NOEMBED,NOFRAMES,NOLAYER,NOSCRIPT,NOTE,\
  132. OBJECT,OF,OL,OPTGROUP,OPTION,OUTPUT,OVER,OVERLAY,\
  133. P,PARAM,PERSON,PICTURE,PLAINTEXT,PORTAL,PRE,PROGRESS,\
  134. Q,\
  135. RANGE,RB,RIGHT,ROOT,ROW,RP,RT,RTC,RUBY,\
  136. S,SAMP,SCRIPT,SECTION,SELECT,SERVER,SHADOW,SLOT,SMALL,SOURCE,SPACER,SPAN,SPOT,SQRT,STRIKE,STRONG,STYLE,SUB,SUMMARY,SUP,\
  137. T,TAB,TABLE,TBODY,TD,TEMPLATE,TEXTAREA,TFOOT,TH,THEAD,TILDE,TIME,TITLE,TR,TRACK,TT,\
  138. U,UL,\
  139. VAR,VEC,VIDEO,\
  140. WBR,\
  141. XMP".split(",");
  142. s = "";
  143. numSupported = 0;
  144. numUnsupported = 0;
  145. tags.forEach(t => {
  146.   //generate element
  147.   test.innerHTML = `<${t}></${t}>`;
  148.   switch (t) {
  149.     case "BODY": //there can only be one of this. use existing one instead.
  150.       e = document.body;
  151.       break;
  152.     case "CAPTION": //these tags can only exist within a TABLE
  153.     case "COL":
  154.     case "COLGROUP":
  155.     case "TBODY":
  156.     case "TD":
  157.     case "TFOOT":
  158.     case "TH":
  159.     case "THEAD":
  160.     case "TR":
  161.       test.innerHTML = `<table><${t}></${t}></table>`;
  162.       e = test.querySelector(t);
  163.       break;
  164.     case "FRAME": //FRAME can only exist within a FRAMESET
  165.       test.innerHTML = `<frameset><${t}></${t}></frameset>`;
  166.       e = test.querySelector(t);
  167.       break;
  168.     case "HEAD": //there can only be one of this. use existing one instead.
  169.       e = document.head;
  170.       break;
  171.     case "HTML": //there can only be one of this. use existing one instead.
  172.       e = document.documentElement;
  173.       break;
  174.     default:
  175.       e = test.firstChild;
  176.   }
  177.   //add result into table
  178.   if (e) {
  179.     s += `<tr class="${
  180.      e.constructor.name === "HTMLUnknownElement"
  181.      ? (numUnsupported++, "unsupported")
  182.      : (
  183.        numSupported++,
  184.        (
  185.          e.constructor.name === "HTMLElement"
  186.          ? "supported generic"
  187.          : "supported"
  188.        )
  189.      )
  190.    }"><td>${t}</td><td>${e.constructor.name}</tr>`
  191.   } else {
  192.     numUnsupported++;
  193.     s += `<tr class="unsupported rejected"><td>${t}</td><td>(Rejected)</td></tr>`
  194.   }
  195. });
  196. stats.textContent = `Total tags = ${numSupported + numUnsupported}, Supported tags = ${numSupported}, Unsupported tags = ${numUnsupported}. See notes below.`;
  197. out.lastElementChild.innerHTML = s
  198.   </script>
  199. </body>
  200. </html>
  201.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!