agila-learning-examples/en/expanded-8-2/lesson-2/lesson.html

<!doctype html><html lang="en"><meta charset="utf-8"><title>Render data as text</title><h1>Render data as text</h1><p>15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.</p><p>The third task contains characters that resemble HTML. textContent displays those characters as text. Replacing it with innerHTML would interpret markup and can create an injection risk with untrusted data. Add an item containing an ampersand and angle brackets. Verify that the visible result preserves the literal text.</p><pre><code class="language-web">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;title&gt;Agila study&lt;/title&gt;
&lt;main&gt;&lt;h1&gt;Tasks&lt;/h1&gt;&lt;ul id=&quot;tasks&quot;&gt;&lt;/ul&gt;&lt;/main&gt;
&lt;script&gt;const tasks=[&quot;Read&quot;,&quot;Test&quot;,&quot;&lt;strong&gt;Explain&lt;/strong&gt;&quot;];for(const text of tasks){const li=document.createElement(&quot;li&quot;);li.textContent=text;document.getElementById(&quot;tasks&quot;).append(li);}&lt;/script&gt;&lt;/html&gt;</code></pre><h3>Practice and evidence</h3><p>Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.</p></html>