Create new tag involving predetermined structure

Question

Just working on HTML, it has happened that I have to use lots of times a structure like the following one:

<div class="class1"><p class="class2">Title</p><div class="class3">
    Content
</div></div>

and the structure is repeated and also nested. So it would be very helpful for me to be able to define something of the type

<newtag tit="Title">Content</newtag>

That is: instead of having the code

<div class="class1"><p class="class2">External box</p><div class="class3">
    <div class="class1"><p class="class2">Medium box</p><div class="class3">
        <div class="class1"><p class="class2">Inner box</p><div class="class3">
            <p>Something</p>
        </div></div>
    </div></div>
    <div class="class1"><p class="class2">Another medium box</p><div class="class3">
        <p>Something else</p>
    </div></div>
</div></div>

I would have

<!--some previous code (perhaps in html, css or js)-->

<newtag tit="External box">
    <newtag tit="Medium box">
        <newtag tit="Inner box">
             <p>Something</p>
        </newtag>
    </newtag>
    <newtag tit="Another medium box">
        <p>Something else</p>
    </newtag>
</newtag>

I imagine there must be something like this, but I really do not know how to do it. Is there some way to implement the previous structure? That is, what should be the 'some previous code'?

Any suggestion is welcome.

possible duplicate of [Is there a way to create your own html tag in HTML5?](http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5) — blex, Feb 21 '15 at 14:25
@blex I am a beginner in `html`, and perhaps that's why I do not understand the relation... but it seems that in the linked answer it says nothing about the internal structure (in the words of the linked question, how to relate 'menu' or 'lunch' with the structure `li`? It does not appear in the answer, it is not feasible out of `menu{...}`). Could you help me a bit further? Sorry for the inconvenience. — Jjm, Feb 21 '15 at 14:51
@Jjm I am confused. I think we are trying to solve an x/y problem here — Michelangelo, Feb 21 '15 at 15:38
@Mikey What do you mean? That it is not possible? Perhaps not... — Jjm, Feb 21 '15 at 15:39
See: http://tutorials.jenkov.com/angularjs/custom-directives.html — kenorb, Feb 21 '15 at 15:40
@Jjm http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — Michelangelo, Feb 21 '15 at 15:41
@Mikey I have tried to improve the question. Is it correct now? Perhaps I have fallen again into xy, but I do not know how to explain it better... — Jjm, Feb 21 '15 at 15:54

Michelangelo · Answer 1 · 2015-02-21T15:53:11.077

3

Yes you can use custom elements like this: http://jsfiddle.net/6aj7gjaw/ Also read this: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ Basically: the dash is essential for browsers to distinguish custom elements from build-in elements. Anyway, be aware that not all browsers support this.

<my-header>Hello</my-header>

my-header{
    border:1px solid black;
    height: 100px;
    width: 100%;
    display:block;
}

EDIT: I think you want something like this:fiddle

(function() {
    var div = document.createElement('sub-header');
    div.innerHTML ="I am a sub-header";
    document.getElementById("myHeader").appendChild(div);

})()

This script will automatically create a new element called sub-header which will be nested within the my-header. If you are starting out I would recommend really going through the basics first because what you want requires Javascript and that is really a step up from the basics. Good luck!

edited Feb 21 '15 at 15:53

answered Feb 21 '15 at 15:33

Michelangelo

5,888
5
31
50

Yes, but I would like to give instructions *inside* the new tag, that is, that when 'my-header' is called, the browser knows there must be a couple of nested `div` and so on – Jjm Feb 21 '15 at 15:38
Yes, I think it must be something like the edit... I will try out; thank you very much. No problem with JavaScript, I know the basics. – Jjm Feb 21 '15 at 15:57
Is there some way to programme the new tag so that it asks for a particular (and new) attribute? For example, `` asks for `src="..."` and `` asks for `href="..."`; I would like that `` asked for `title="..."` and that used the information given. Is it possible? – Jjm Feb 21 '15 at 17:28
2

@Jjm yes, your custom element can also have custom attributes. To answer your question from another comment, custom elements can also have "internal structure" through another part of the Web Components spec called the [Shadow DOM](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/). Web Components are still on the bleeding edge side of things; if you want to experiment with them now, Googles [Polymer](https://www.polymer-project.org/) is a good place to start. – janfoeh Feb 21 '15 at 18:02

score 1 · Answer 2 · answered Feb 21 '15 at 17:42

1

You are probably looking for client-side templating systems. Have a look on this comparison. I particularly would suggest to use mustache. Hope it would help you.

answered Feb 21 '15 at 17:42

mvillegas

123
6

Create new tag involving predetermined structure

2 Answers2