Question

Is something like…

<script type="text/html" id="this-content1">
<h1>This Header Info One</h1>
<p>This content one. . .</p>
</script>
<script type="text/html" id="this-content2">
<h1>This Header Info Two</h1>
<p>This content two. . .</p>
</script>

…and using jQuery to swap out the content based on a selector good practice in today’s standards?

I am just getting into the use of script type=”text/html”… to allow dynamic changes of my content and am finding many ways to do this. Is there a source that might explain the direction this is going and if any standardizing of this practice.

I see code like…

<div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>

…nested in a script type=”text/html” tag and really have no idea why it is written this way. Also have just wet my beak in backbone and this looks to be a little heavy if just looking to add content swapping in one page.

Answer 1

According to the HTML5 spec for the script tag, it’s totally fine to use <script> with a type attribute set to any valid MIME type. That includes MIME types like text/html or text/plain.

According to the HTML4 spec for the script tag, it’s not quite fine:

“There are two types of scripts authors may attach to an HTML
document: Those that are executed one time when the document is loaded
[and t]hose that are executed every time a specific event occurs”

You don’t need backbone for templating. You can use e.g. jQuery or my personal favorite, Mustache.js.