CODEWITHSUNDEEP
html
xnetdude
xnetdude

Reputation: 169

Use custom html tag to display image on page

I am trying to use custom html tags (ideally within the Summernote HTML editor) to display an image. Custom tags are new to me and the examples I have seen don't seem to help me).

Essentially I want the user to add an html marker (within the html editor) which is replaced by an image eg.

'<bell></bell>' would display a custom image of a bell

Am I right in following the concept of custom HTML tags and can anyone help with a basic example?

Upvotes: 0

Views: 724

Answers (1)

Doug
Doug

Reputation: 1515

HTML is pretty forgiving and will let you create your own elements...

However, you will also have to create your own CSS rules to match them as well.

You will also need to build up any and all behaviors you would like for the element to have (in consideration for things like JavaScript, clicks, bubbling, ... ) It looks like the Custom Element site touches on how you can make these connections.

bell{
  display: block;
  display: inline-block;
  background-image: url(https://image.freepik.com/free-vector/golden-bell_1262-6415.jpg);
  background-size: contain;
  height: 40px;
  width: 40px;
}
<bell></bell>

However, I would caution that using a custom element this way, may hurt a site's accessibility (image without alt text).

My takeaway/recommendation is feel free to use this for anything that is non-critical. But if the element is something that will be need to be read/seen or interacted with, its probably best to go with the original elements designed for those purposes.

Upvotes: 2

Related Questions