Advertisement
jcunews

HtmlTagsAuditor.html

Mar 23rd, 2022
1,218
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
RAW Paste Data Copied
Advertisement