How to Create Custom Tags For Html

// Create a class for the elementclass XProduct extends HTMLElement {  constructor() {    // Always call super first in constructor    super();
    // Create a shadow root    var shadow = this.attachShadow({mode: 'open'});
    // Create a standard img element and set its attributes.    var img = document.createElement('img');    img.alt = this.getAttribute('data-name');    img.src = this.getAttribute('data-img');    img.width = '150';    img.height = '150';    img.className = 'product-img';
    // Add the image to the shadow root.    shadow.appendChild(img);
    // Add an event listener to the image.    img.addEventListener('click', () => {      window.location = this.getAttribute('data-url');    });
    // Create a link to the product.    var link = document.createElement('a');    link.innerText = this.getAttribute('data-name');    link.href = this.getAttribute('data-url');    link.className = 'product-name';
    // Add the link to the shadow root.    shadow.appendChild(link);  }}
// Define the new elementcustomElements.define('x-product', XProduct);

body {  background: #F7F7F7;}
x-product {  display: inline-block;  float: left;  margin: 0.5em;  border-radius: 3px;  background: #FFF;  box-shadow: 0 1px 3px rgba(0,0,0,0.25);  font-family: Helvetica, arial, sans-serif;  -webkit-font-smoothing: antialiased;}
x-product::slotted(.product-img) {  cursor: pointer;  background: #FFF;  margin: 0.5em;}
x-product::slotted(.product-name) {  display: block;  text-align: center;  text-decoration: none;  color: #08C;  border-top: 1px solid #EEE;  font-weight: bold;  padding: 0.75em 0;}

If nothing appeared below, then your browser does not support Custom Elements yet.<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product><x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product><x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>

Is there a way to create your own html tag in HTML5?

You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

STEP 1

Normalize its attributes in your CSS Stylesheet (think css reset) -
Example:

 stack{display:block;margin:0;padding:0;border:0; ... }

STEP 2

To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Then you can use your custom tag freely.

<stack>Overflow</stack>

Feel free to set attributes as well...

<stack id="st2" class="nice"> hello </stack>

Is it safe to create Custom HTML Tags?

@PrisonerZER0 I wouldn't call "Olde browsers" the word "safe". Somewhat of an oxymoron. Even M$ has put IE in a coffin. https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support

Us supporting them is only asking for trouble. Thanks for the shout.

I created the snuggsi ツ (https://github.com/devpunks/snuggsi) library as a suite of conventions over the web components/custom elements native browser spec. My philosophy is you shouldn't need to know node, webpack, babel, etc. Should only need to know basic HTML,CSS,JS to be productive in 2017. The following snippet is a perfect example.

Feel free to reach out on github as it seems like you are up to snuff with modern platform development. We won't need these convoluted front end tools where we are going Feel free to reach out on github so i can help you get started!

<hello-world> Hello {planet}</hello-world>
<!-- more info @ https://github.com/devpunks/snuggsi --><script src=//unpkg.com/snuggsi></script><script>
// Element Definition -----------------------------
Element `hello-world`
// Class Description ------------------------------
(class extends HTMLElement {
  get planet ()    // "automagic" token binding    { return 'world ' }
  onclick ()    // "automagic" event registration    { alert (this) }})
</script>

redbox {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

<redbox></redbox>
<!-- OR -->
<redbox />

<div class="toys grid_4 push_2"> </div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}