Is there a way to make a custom HTML tag that incorporates other tags?

This probably sounds stupid, but is there a way that I can make a custom HTML tag that includes other tags?

Like right now I have something like this:

<div>
    <img></img>
    <p></p>
</div>

Is there a way to put all of that into a custom tag that is more simple and looks like this:

<caption-image pic_src="/path" p_text="blahblahblah" />

Maybe using like XML if Javascript cant do it.

The reason I would like something like this is that I need to make a ton of these and it would way simplify the html and make it easier to change.

Solution

You may use a framework to do this, like AngularJS or ReactJS. But I think you will have some trouble learning it now, so you may do it by yourself with some Javascript.

You can create the tag like you are doing, and parse it with javascript, getting what you need from it and building your HTML page.

This will do for you (I'm assuming you are using jQuery):

<caption-image pic_src="path1.png" p_text="blahblahblah"></caption-image>
<caption-image pic_src="path2.png" p_text="123123123"></caption-image>
<caption-image pic_src="path3.png" p_text="this is an image"></caption-image>
<caption-image pic_src="path4.png" p_text="just some text"></caption-image>

<div id="someContainer">
    <figure id="figTemplate">
        <img src="" alt="">
        <figcaption></figcaption>
    </figure>
</div>

<script>
    $.each($('caption-image'), function (key, obj) {
        var src = $(obj).attr('pic_src');
        var p_text = $(obj).attr('p_text');

        $(obj).hide(); //or remove if you want $(obj).remove()

        var clone = $('#figTemplate').clone();
        clone.removeAttr('id')
                .children('img').attr('src', src).attr('alt', p_text).end()
                .children('figcaption').text(p_text);

        $('#someContainer').append(clone);

    });
</script>

I used the figure element because it does exactly what you want, but you may do the same using div, img and p