1.CSS-2
<h2 id="css2"></h2>
<style>#css2::before{content:"1.CSS-2";}</style>
2.ATTR-2
<h2 data-title="2.ATTR-2" id="attr2"></h2>
<style>#attr2::before{content:attr(data-title);}</style>
3.IMG-2
<h2><img src="path/to/title2.png" alt=""></h2>
4.B64-2
// PHP GD ⇒ base64 image (see code sample)
5.SVGEM-2
<object data="title2.svg" type="image/svg+xml"></object>
6.CAN-2
<canvas id="can2" width="400" height="60"></canvas>
<script>
const c=document.getElementById('can2').getContext('2d');
c.font='32px Arial';c.fillText('6.CAN-2',10,40);
</script>
7.WEBGL-2
// WebGL canvas – omitted for brevity
8.JS-2
<h2 id="js2"></h2>
<script>document.getElementById('js2').innerText='8.JS-2';</script>
9.EVT-2
<h2 id="evt2">(click)</h2>
<script>document.getElementById('evt2').onclick=()=>{event.target.innerText='9.EVT-2'};</script>
10.COM-2
<h2><!--10.COM-2--></h2>
<script>...extract comment...</script>
11.ENC-2
// atob(<base64>) then inject
12.IFR-2
<iframe src="title2.html"></iframe>
13.PDF-2
<embed src="title2.pdf" type="application/pdf">
14.FNT-2
// custom icon font glyphs
15.FRM-2
<input value="15.FRM-2" disabled>
16.OBJ-2
<object data="title2-content.html"></object>
17.EMB-2
<embed src="title2-content.html">
18.SHD-2
<h2 is="shadow-title-2"></h2>
<script>
class ShadowTitle2 extends HTMLHeadingElement{
constructor(){super();const s=this.attachShadow({mode:'closed'});
const span=document.createElement('span');span.textContent='18.SHD-2';s.appendChild(span);}
}
customElements.define('shadow-title-2',ShadowTitle2,{extends:'h2'});
</script>
19.B64SVG-2
// <img src="data:image/svg+xml;base64,...">
20.XHR-2
<h2 id="xhr2"></h2>
<script>fetch('title2.txt').then(r=>r.text()).then(t=>xhr2.innerText=t);</script>
