Creating custom HTML Tags

Community Guides
1

Introduction

Surprise, Here’s another tutorial,
This tutorial lets you create custom html tags and it’s gonna be cool.

Styling

We need some style for this to work correctly.

Here is some example code:

.in-image {
         position: absolute;
         top: -55px;
         right: 618px;
         height: 539px;
         width: 580px;
     }

     .inimage {
         position: relative;
    }

Tada, You made the inimage tag!
The inimage tag let’s you place anything in images

<inimage>

Finally

Now that you made the tag using CSS let’s try it out!

<inimage class="inimage">
       <img src="./assets/img/image.jpg" style="position: relative;" width="650"></img>
</inimage>

The results should be…

image
image689×637 40.4 KB

(Background not included)

1 Like
2

Or just an easier method, you don’t have to give a custom element a class to stylize it:

in-image {
         position: absolute;
         top: -55px;
         right: 618px;
         height: 539px;
         width: 580px;
     }

     .inimage {
         position: relative;
    }

and

<inimage>
       <img src="./assets/img/image.jpg" style="position: relative;" width="650"></img>
</inimage>
3

Great!

Technically, HTML allows invalid tag elements for ease of adding new tags in later on, so you’re not defining HTML tags, rather just giving an HTML tag a style and such. I believe invalid tags allow text inside (this why you can do <canvas>Canvas is not supported :(</canvas>), too… so, yeah.

You can do this in JavaScript, too!

This allows you to add functionality, too!

Otherwise, XHTML and XSLT are great for this, too!

1 Like
4

You can also use JavaScript.