LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


HTML Specification

The following content is dynamically created from information gathered from w3.org. The purpose of this pen/page/program is to showcase simple functionality of each HTML tag in the HTML5 standard.

New features will continue to be added. Feel free comment any suggestions you may have.

Changelog

  • 02/25/2018: Moved API on the server, not sure if I'll re-host or not. Might move to Google App Scripts for PoC
  • 03/08/2015: Updated layout of navigation.
  • 03/06/2015: API was down; it is now up.
  • 08/26/2015: Added processing logic for "standard" field in JSON
  • 08/26/2015: Added external JSON parsing
CSS
* {
  font-family: Calibri;
}

body {
  min-width: 100%;
  overflow-x: hidden;
}

#navigation {
  position: fixed;
  background-color: #e0e0e0;
  padding: 10px;
  top: 10px;
  width: 450px;
  box-shadow: 1px 1px 5px;
}

#navigation > ul {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#navigation > ul > li {
  list-style-type: none;
  float: left;
  padding-right: 10px;
  padding-bottom: 10px;
  font-size: 8pt;
}

#wrapper {
  width: 768px;
  margin: auto;
}

.htmlBlock {
  background-color: #f0f0f0;
}

.notStandard {
  background-color: #ffeeee;
}

.notStandard h2 {
  color: #ff0000;
}

.example {
  background-color: #ffffff;
}

.htmlBlock, .example {
  padding: 10px 20px;
  margin-bottom: 10px;
}

.notice {
  border-radius: 5px;
  border: 1px solid #222;
  padding: 10px;
  background-color: #333;
  color: #fff;
}
JS
// Listener function for XMLHttpRequest
function listener () {
  // Save response as object
  var html = JSON.parse(this.response);
  
  // Build Navigation
  var list = document.createElement("ul");
  for (var key in html) {
    var item = document.createElement("li");
    var anchor = document.createElement("a");
    var link = document.createTextNode(html[key]["tag"]);

    anchor.appendChild(link);
    anchor.setAttribute("href", "#" + html[key]["tag"]);
    item.appendChild(anchor);
    list.appendChild(item);
  }
  document.getElementById("navigation").appendChild(list);

  // Build Content
  for (var key in html) {
    // Create Container
    var container = document.createElement("div");
    container.className = "htmlBlock";
    if (html[key]["standard"] == 0) {
      container.className += " notStandard";
    }

    // Navigation Anchor
    var anchor = document.createElement("a");
    anchor.setAttribute("id", html[key]["tag"]);
    container.appendChild(anchor);

    // Title
    var heading = document.createElement("h2");
    var title = document.createTextNode(html[key]["tag"]);
    heading.appendChild(title);
    container.appendChild(heading);

    // Link
    var paragraph = document.createElement("p");
    var link = document.createElement("a");
    var linkText = document.createTextNode("Click here to learn more about <" + html[key]["tag"] + ">...");
    link.setAttribute("href", html[key]["link"]);
    link.setAttribute("target", "_blank");
    link.appendChild(linkText);
    paragraph.appendChild(link);
    container.appendChild(paragraph);
    
    // Description
    var paragraph = document.createElement("p");
    html[key]["desc"] = html[key]["desc"].replace("<", "<");
    html[key]["desc"] = html[key]["desc"].replace(">", ">");
    var desc = document.createTextNode(html[key]["desc"]);
    paragraph.appendChild(desc);
    container.appendChild(paragraph);

    if (typeof html[key]["content"] !== "undefined") {
      // Create Example Container
      var example = document.createElement("div");
      example.className = "example";

      // Tag
      var tag = document.createElement(html[key]["tag"]);
      var content = document.createTextNode(html[key]["content"]);
      tag.appendChild(content);
      // Attributes
      for (var attribute in html[key]["params"]) {
        tag.setAttribute(attribute, html[key]["params"][attribute]);
      }
      example.appendChild(tag);

      // Append Example to Container
      container.appendChild(example);
    }

    // Append Container to Wrapper
    document.getElementById("wrapper").appendChild(container);
  }
}

var url = "";

var request = new XMLHttpRequest();
request.addEventListener("load", listener);
request.open("get", url, true);
request.send();

Description

I came up with this idea when doing some research at work for cross-browser compatibility. A tool like this can be easily configured to test various HTML tags.
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Square Adv