Question

66

How does HTML tags work inside script tag?

rated 0 times [ 72] [ 6] / answers: 1 / hits: 43147 / 13 Years ago, fri, april 15, 2011, 12:00:00

For example, view-source at Joel Spolsky's public career profile

<script type=text/html id=stackexchangeanswerswidget>

    <h3>Top Answers</h3>



    <div class=answers>

    </div>



</script>



<script type=text/html id=topanswer>

    <div class=top-answer>

        <div class=top-answer-stats>{{= shared.htmlEncode(Score) }}</div>

        <span class=top-answer-title><a href={{=AnswerLink}}>{{= shared.htmlEncode(Title) }}</a></span>

        <a class=add-answer>add</a>

        <br class=clear />

    </div>

</script>



<script type=text/html id=answer-view>

    <div class=answer>

        <div class=answer-stats {{= shared.htmlEncode(Site.toLowerCase().replace(/ /g, '')) }}>

            <div class=score>

                <strong>{{= shared.htmlEncode(Score) }}</strong>

                <div class=votecount>votes</div>

            </div>

            <img class=answer-logo src={{= shared.htmlEncode(FaviconUrl) }} />

        </div>

        <div class=answer-content>

            <span class=q>Q:</span>



            <div class=answer-top>



                <a class=answer-title href={{= shared.htmlEncode(AnswerLink) }}>{{= shared.htmlEncode(Title) }}</a><br />

            </div>



            <span class=a>A:</span><div class=answer-body>{{= Body }}</div>



            <div class=more-button style=text-align:center; clear:both; display:none;><a class=more>More</a></div>



        </div>

    </div>

</script>

How does HTML tags work inside script tag? and/or What kind of technology used for those html tags, and template alike codes {{= .... }} inside script tags?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylerdamiena

Add To Favorites

Follow

Total Points: 139

Total Questions: 90

Total Answers: 118

Location: Liechtenstein

Member since Wed, Dec 8, 2021

2 Years ago

answered 13 Years ago aleighabayleef · Accepted Answer

You can put anything that you want in a <script> tag. If you specify a content type other than Javascript (or another scripting language that the browser understands), it will not be interpreted by the browser, and you can just access it as plain text. Since the contents of <script> tags are treated as CDATA, the contents are not parsed and you can store unquoted XML or HTML in the contents (as long as you don't ever put a </script> tag in the contents, since that will close your element).

This is used, for example, in SVG Web, a polyfill that allows you to use inline SVG in HTML and have that converted to native SVG in browsers that support it, or Flash in browsers that don't. It allows embedding of SVG in browsers that don't support it natively by wrapping it in a <script> tag, so the browser doesn't try and fail to parse it as HTML.

In the case of SO carreers, it looks like they storing templates for use with Backbone.js and Underscore.js in <script> tags, since that's a convenient place to stick templates in HTML. Here's a snippet of their code where they grab the template and provide it to the Underscore template engine:

    TopAnswerView = Backbone.View.extend({

        template: _.template($(#topanswer).html()),

        events: {

            click .add-answer: addAnswerToCV

        },