HTML Page Title
The
element is the single most important on-page SEO signal and the label users see in tabs, bookmarks, and search results.</p>
<h2>Setting a great page title</h2>
<div class="codebox">
<div class="codebox-head">EXAMPLE</div>
<pre><!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<!--
Best practice:
- Most important keywords first
- Brand at the end, separated by | or -
- Under ~60 characters so search engines do not truncate
- Unique per page
-->
<title>Hello World in HTML | MySite</title>
<meta name='description' content='A 2-minute walkthrough of the simplest HTML5 document.' />
<!-- Open Graph + Twitter for shares -->
<meta property='og:title' content='Hello World in HTML' />
<meta property='og:description' content='A 2-minute walkthrough of the simplest HTML5 document.' />
<meta property='og:image' content='https://example.com/og/hello-world.png' />
<meta name='twitter:card' content='summary_large_image' />
</head>
<body>
<h1>Hello World in HTML</h1>
<p>The h1 should match the title's intent so users land on the page they expected.</p>
</body>
</html></pre>
</div>
<h2>Why it matters</h2>
<p>A bad title hurts traffic, bookmarks, and trust. Keep it specific (what is on this page?), front-load the topic, and add the brand at the end. Pair it with a meta description and Open Graph tags so links shared anywhere render nicely.</p>
<div class="tip"><strong>Tip:</strong> Tweak the snippet with <em>Try it Yourself »</em>, then sit the quiz at the bottom of the page.</div>
<aside class="lesson-aside" aria-label="Lesson summary">
<h3>Lesson at a glance</h3>
<figure class="lesson-aside-figure">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 60" role="img" aria-label="Progress through HTML Tutorial: lesson 18 of 88 (20%)">
<rect x="0" y="22" width="600" height="14" rx="7" fill="#e8eef3"/>
<rect x="0" y="22" width="122.72727272727" height="14" rx="7" fill="#E44D26"/>
<circle cx="122.72727272727" cy="29" r="9" fill="#fff" stroke="#E44D26" stroke-width="2"/>
<text x="0" y="16" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#666">Start</text>
<text x="600" y="16" text-anchor="end" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#666">Lesson 18 of 88 · 20%</text>
<text x="600" y="54" text-anchor="end" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#666">End</text>
</svg>
<figcaption>Your progress through the <strong>HTML Tutorial</strong> track.</figcaption>
</figure>
<table class="lesson-aside-table">
<thead>
<tr><th scope="col">Aspect</th><th scope="col">Detail</th></tr>
</thead>
<tbody>
<tr><th scope="row">Track</th> <td><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/html">HTML Tutorial</a></td></tr>
<tr><th scope="row">Topic</th> <td>HTML Page Title</td></tr>
<tr><th scope="row">Section</th> <td>Overview</td></tr>
<tr><th scope="row">Position</th> <td>Lesson 18 of 88</td></tr>
<tr><th scope="row">Difficulty</th><td>Intermediate</td></tr>
<tr><th scope="row">Previous</th><td><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/html/favicon">← HTML Favicon</a></td></tr>
<tr><th scope="row">Next</th> <td><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/html/tables">HTML Tables →</a></td></tr>
</tbody>
</table>
</aside>
<style>
.lesson-aside {
margin: 32px 0 24px;
padding: 18px 22px;
background: #f8fafb;
border: 1px solid #e3e8ed;
border-radius: 8px;
}
.lesson-aside h3 {
margin: 0 0 14px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #444;
}
.lesson-aside-figure { margin: 0 0 16px; }
.lesson-aside-figure svg { display: block; max-width: 100%; height: auto; }
.lesson-aside-figure figcaption {
font-size: 12px;
color: #666;
margin-top: 6px;
font-style: italic;
}
.lesson-aside-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: #fff;
border: 1px solid #e3e8ed;
border-radius: 6px;
overflow: hidden;
}
.lesson-aside-table th,
.lesson-aside-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid #eef1f4;
}
.lesson-aside-table thead th {
background: #eef2f6;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #555;
}
.lesson-aside-table tbody th {
width: 110px;
background: #fafbfc;
color: #555;
font-weight: 600;
}
.lesson-aside-table tr:last-child th,
.lesson-aside-table tr:last-child td { border-bottom: none; }
.lesson-aside-table a { color: #1F4E79; text-decoration: none; }
.lesson-aside-table a:hover { text-decoration: underline; }
</style>
<h2>Example</h2>
<div class="codebox">
<div class="codebox-head">Example</div>
<pre><!DOCTYPE html>
<html>
<head>
<title>HTML Page Title</title>
</head>
<body>
<h1>HTML Page Title</h1>
<p>This is a demo page for the "HTML Page Title" lesson.</p>
</body>
</html></pre>
<a href="https://www.iwantcoding.com.wehelptradiesstaging.com/tryit/html/page-title" class="btn-green">Try it Yourself »</a>
</div>
<h2>Exercise</h2>
<div class="exercise" data-exercise>
<p class="exercise-instruction">Set the text shown on the browser tab.</p>
<div class="exercise-code">
<span class="exercise-text"><head><</span>
<input type="text" class="exercise-blank" data-blank="0" spellcheck="false" autocomplete="off">
<span class="exercise-text">>My Shop</</span>
<input type="text" class="exercise-blank" data-blank="1" spellcheck="false" autocomplete="off">
<span class="exercise-text">></head></span>
</div>
<script type="application/json" data-exercise-answers>["title","title"]</script>
<div class="exercise-actions">
<button type="button" class="btn-green" data-exercise-check>Check answers</button>
<button type="button" class="btn-light" data-exercise-hint>Show hint</button>
</div>
<p class="exercise-hint" data-exercise-hint-text hidden>Goes inside <head>.</p>
<p class="exercise-result" data-exercise-result></p>
</div>
<h2>Test yourself</h2>
<div class="quiz" data-quiz>
<fieldset class="quiz-question" data-question="0" data-answer="1">
<legend><strong>Q1.</strong> The page title goes in the…</legend>
<label class="quiz-option">
<input type="radio" name="q0" value="0">
<span><body></span>
</label>
<label class="quiz-option">
<input type="radio" name="q0" value="1">
<span><head></span>
</label>
<label class="quiz-option">
<input type="radio" name="q0" value="2">
<span>A <meta></span>
</label>
<label class="quiz-option">
<input type="radio" name="q0" value="3">
<span><header></span>
</label>
</fieldset>
<fieldset class="quiz-question" data-question="1" data-answer="0">
<legend><strong>Q2.</strong> Page title appears in…</legend>
<label class="quiz-option">
<input type="radio" name="q1" value="0">
<span>Tab + bookmarks + search results</span>
</label>
<label class="quiz-option">
<input type="radio" name="q1" value="1">
<span>Footer</span>
</label>
<label class="quiz-option">
<input type="radio" name="q1" value="2">
<span>Nowhere user-visible</span>
</label>
<label class="quiz-option">
<input type="radio" name="q1" value="3">
<span>Only in print</span>
</label>
</fieldset>
<fieldset class="quiz-question" data-question="2" data-answer="1">
<legend><strong>Q3.</strong> Good title length is roughly…</legend>
<label class="quiz-option">
<input type="radio" name="q2" value="0">
<span>1–5 chars</span>
</label>
<label class="quiz-option">
<input type="radio" name="q2" value="1">
<span>50–60 chars</span>
</label>
<label class="quiz-option">
<input type="radio" name="q2" value="2">
<span>200+ chars</span>
</label>
<label class="quiz-option">
<input type="radio" name="q2" value="3">
<span>Doesn't matter</span>
</label>
</fieldset>
<div class="quiz-actions">
<button type="button" class="btn-green" data-quiz-submit>Submit quiz</button>
<button type="button" class="btn-light" data-quiz-reset>Reset</button>
</div>
<p class="quiz-result" data-quiz-result></p>
</div>
<aside class="study-aids" style="margin:28px 0 20px;padding:16px 18px;border:1px solid #E5E7EB;border-left:4px solid #4F46E5;border-radius:8px;background:#F9FAFB;">
<h2 style="margin:0 0 8px;font-size:16px;color:#111827;">📚 Study aids for HTML Page Title</h2>
<p style="margin:0 0 12px;font-size:14px;color:#374151;line-height:1.55;">
Reading is only step one. To lock in <em>html page title</em> from the HTML Tutorial track, use the interactive tools iwantcoding.com ships with every lesson:
</p>
<ul style="margin:0 0 12px 20px;padding:0;font-size:14px;color:#374151;line-height:1.7;">
<li><strong>Try it live</strong> — <a href="https://www.iwantcoding.com.wehelptradiesstaging.com/tryit/html/page-title" style="color:#4F46E5;font-weight:600;">run this lesson's example</a> in a sandbox and tweak it.</li>
<li><strong>Drill the terms</strong> — flip through the <a href="https://www.iwantcoding.com.wehelptradiesstaging.com/flashcards/html" style="color:#4F46E5;font-weight:600;">HTML Tutorial flashcards</a> to memorise syntax and keywords.</li>
<li><strong>Prove you know it</strong> — take the <a href="https://www.iwantcoding.com.wehelptradiesstaging.com/boss/html" style="color:#4F46E5;font-weight:600;">HTML Tutorial boss quiz</a> for a 10-question randomised test across the whole track.</li>
<li><strong>Keep a reference</strong> — bookmark the <a href="https://www.iwantcoding.com.wehelptradiesstaging.com/cheatsheet/html" style="color:#4F46E5;font-weight:600;">HTML Tutorial cheatsheet</a> for quick lookups while you code.</li>
<li><strong>Continue the track</strong> — the next lesson is <a href="https://www.iwantcoding.com.wehelptradiesstaging.com/html/tables" style="color:#4F46E5;font-weight:600;">HTML Tables</a>.</li>
</ul>
<p style="margin:0;font-size:12px;color:#6B7280;">
💡 <strong>Editor's tip:</strong> Learners who complete the flashcards <em>before</em> the boss quiz score, on average, 22% higher on the first attempt. Reading → drilling → testing → building is the order that sticks.
</p>
</aside>
<section class="comments-section" data-comments
data-track="html"
data-topic="page-title">
<h2>Discussion</h2>
<div class="comments-list" data-comments-list>
<p class="comments-loading">Loading…</p>
</div>
<form class="comments-form" data-comments-form>
<input type="text" name="name" placeholder="Your handle (2–30 chars)" required maxlength="30">
<textarea name="body" placeholder="Ask a question, share a tip, point out an error…" required maxlength="1000" rows="3"></textarea>
<input type="hidden" name="parent_id" value="">
<div class="comments-form-actions">
<button type="submit" class="btn-green">Post comment</button>
<button type="button" class="btn-light" data-comments-cancel hidden>Cancel reply</button>
</div>
<p class="comments-form-status" data-comments-form-status></p>
</form>
</section>
<script>
(function () {
const root = document.querySelector('[data-comments]');
if (!root) return;
const track = root.dataset.track;
const topic = root.dataset.topic;
// Derive the app's base path from window.location so subdirectory installs
// (e.g. /w3schools/public/...) still hit the right API endpoint.
// The current page may be /{base}/{track}/{topic} OR /{base}/{track} (track
// home renders the first topic). Find the LAST occurrence of /{track} in
// the pathname and treat everything before it as the base path.
const path = window.location.pathname;
const marker = '/' + track;
const lastIdx = path.lastIndexOf(marker);
const basePath = lastIdx > 0 ? path.substring(0, lastIdx) : '';
const apiRoot = basePath + '/api/comments';
const listUrl = `${apiRoot}/${track}/${topic}`;
const voteBase = apiRoot;
const list = root.querySelector('[data-comments-list]');
const form = root.querySelector('[data-comments-form]');
const status= root.querySelector('[data-comments-form-status]');
const cancelBtn = root.querySelector('[data-comments-cancel]');
const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf };
/* Preserve handle across lessons */
const NAME_KEY = 'l3.handle.v1';
const savedName = (() => { try { return JSON.parse(localStorage.getItem(NAME_KEY)) || ''; } catch { return ''; } })();
if (savedName) form.querySelector('[name="name"]').value = savedName;
const escapeHtml = s => String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
async function loadComments() {
try {
const res = await fetch(listUrl, { headers: { 'Accept': 'application/json' } });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const ct = res.headers.get('content-type') || '';
if (!ct.includes('application/json')) {
throw new Error('expected JSON, got ' + (ct || 'unknown'));
}
const json = await res.json();
render(json.comments || []);
} catch (e) {
list.innerHTML = `<p class="comments-empty">⚠ Failed to load: ${e.message}</p>`;
}
}
function render(comments) {
if (comments.length === 0) {
list.innerHTML = '<p class="comments-empty">No comments yet. Be the first.</p>';
return;
}
list.innerHTML = comments.map(renderOne).join('');
}
function renderOne(c) {
const replies = c.replies.map(renderReply).join('');
return `
<article class="comment" data-id="${c.id}">
<div class="comment-vote">
<button type="button" class="comment-vote-btn" data-dir="up" title="Upvote">▲</button>
<span class="comment-vote-count" data-vote-count>${c.votes}</span>
<button type="button" class="comment-vote-btn" data-dir="down" title="Downvote">▼</button>
</div>
<div class="comment-main">
<header class="comment-head"><strong>${escapeHtml(c.name)}</strong> <small>${c.created}</small></header>
<p class="comment-body">${escapeHtml(c.body)}</p>
<button type="button" class="comment-reply-btn" data-reply-to="${c.id}">Reply</button>
${replies ? `<div class="comment-replies">${replies}</div>` : ''}
</div>
</article>`;
}
function renderReply(c) {
return `
<article class="comment comment-reply" data-id="${c.id}">
<div class="comment-vote">
<button type="button" class="comment-vote-btn" data-dir="up">▲</button>
<span class="comment-vote-count" data-vote-count>${c.votes}</span>
<button type="button" class="comment-vote-btn" data-dir="down">▼</button>
</div>
<div class="comment-main">
<header class="comment-head"><strong>${escapeHtml(c.name)}</strong> <small>${c.created}</small></header>
<p class="comment-body">${escapeHtml(c.body)}</p>
</div>
</article>`;
}
/* Submit a comment */
form.addEventListener('submit', async e => {
e.preventDefault();
status.textContent = 'Posting…';
const fd = new FormData(form);
const payload = {
name: (fd.get('name') || '').toString().trim(),
body: (fd.get('body') || '').toString().trim(),
parent_id: fd.get('parent_id') ? Number(fd.get('parent_id')) : null,
};
try {
localStorage.setItem(NAME_KEY, JSON.stringify(payload.name));
// Attach reCAPTCHA token when protection is enabled site-wide.
if (window.L3Recaptcha && window.L3Recaptcha.protect.comments) {
try {
payload.recaptcha_token = await window.L3Recaptcha.execute('submit_comment');
} catch (e) {
status.textContent = '⚠ reCAPTCHA error: ' + e.message;
return;
}
}
const res = await fetch(listUrl, {
method: 'POST', headers, body: JSON.stringify(payload),
});
const json = await res.json().catch(() => ({}));
if (res.ok && json.ok) {
form.querySelector('[name="body"]').value = '';
form.querySelector('[name="parent_id"]').value = '';
cancelBtn.hidden = true;
if (json.held) {
status.textContent = json.message || 'Queued for review.';
setTimeout(() => status.textContent = '', 4000);
} else {
status.textContent = 'Posted ✓';
setTimeout(() => status.textContent = '', 2000);
loadComments();
}
if (window.L3) window.L3.addXP(1, 'comment');
} else {
status.textContent = '⚠ ' + (json.error || `HTTP ${res.status}`);
}
} catch (e) { status.textContent = '⚠ ' + e.message; }
});
/* Reply / vote delegation */
list.addEventListener('click', async e => {
const replyBtn = e.target.closest('[data-reply-to]');
if (replyBtn) {
form.querySelector('[name="parent_id"]').value = replyBtn.dataset.replyTo;
form.querySelector('[name="body"]').focus();
cancelBtn.hidden = false;
status.textContent = `Replying to comment #${replyBtn.dataset.replyTo}…`;
return;
}
const voteBtn = e.target.closest('[data-dir]');
if (voteBtn) {
const article = voteBtn.closest('[data-id]');
const id = article.dataset.id;
try {
const res = await fetch(`${voteBase}/${id}/vote`, {
method: 'POST', headers, body: JSON.stringify({ dir: voteBtn.dataset.dir }),
});
const json = await res.json().catch(() => ({}));
if (json.ok) {
article.querySelector('[data-vote-count]').textContent = json.votes;
} else {
voteBtn.title = json.error || 'Vote failed';
}
} catch {}
}
});
cancelBtn.addEventListener('click', () => {
form.querySelector('[name="parent_id"]').value = '';
status.textContent = '';
cancelBtn.hidden = true;
});
loadComments();
})();
</script>
<div class="lesson-nav bottom">
<a class="prev" href="https://www.iwantcoding.com.wehelptradiesstaging.com/html/favicon">« Previous</a>
<button type="button" class="btn-mark-complete" data-mark-complete>Mark complete</button>
<a class="next" href="https://www.iwantcoding.com.wehelptradiesstaging.com/html/tables">Next »</a>
</div>
</article>
</div>
<script src="https://www.iwantcoding.com.wehelptradiesstaging.com/js/site.js"></script>
</main>
<aside id="aiPanel" class="ai-panel" aria-hidden="true"
data-track="html" data-topic="page-title">
<header class="ai-panel-head">
<div class="ai-tabs" role="tablist">
<button type="button" class="ai-tab active" data-ai-tab="chat">Study Buddy</button>
<button type="button" class="ai-tab" data-ai-tab="debug">Debugger</button>
<button type="button" class="ai-tab" data-ai-tab="quiz">Quiz Gen</button>
<button type="button" class="ai-tab" data-ai-tab="review">Review</button>
</div>
<button type="button" class="ai-close" id="aiClose" aria-label="Close">×</button>
</header>
<section class="ai-pane active" data-ai-pane="chat">
<div class="ai-chat-log" data-ai-log></div>
<form class="ai-chat-form" data-ai-chat-form>
<textarea data-ai-chat-input placeholder="Ask anything about this lesson…" rows="2" required></textarea>
<button type="submit" class="btn-green">Send</button>
</form>
</section>
<section class="ai-pane" data-ai-pane="debug">
<p class="ai-help">Paste broken code. AI returns a fix + explanation.</p>
<textarea data-ai-debug-input placeholder="Paste your broken code here…" rows="8"></textarea>
<div class="ai-row">
<label>Language
<select data-ai-debug-lang>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</select>
</label>
<button type="button" class="btn-green" data-ai-debug-go>Debug</button>
</div>
<div class="ai-output" data-ai-debug-output></div>
</section>
<section class="ai-pane" data-ai-pane="quiz">
<p class="ai-help">Generate fresh AI questions for the current lesson.</p>
<div class="ai-row">
<label>Questions
<input type="number" data-ai-quiz-count min="1" max="10" value="3">
</label>
<button type="button" class="btn-green" data-ai-quiz-go>Generate</button>
</div>
<div class="ai-output" data-ai-quiz-output></div>
</section>
<section class="ai-pane" data-ai-pane="review">
<p class="ai-help">Paste a snippet. AI scores style / best practices / errors.</p>
<textarea data-ai-review-input placeholder="Paste code to review…" rows="8"></textarea>
<div class="ai-row">
<label>Language
<select data-ai-review-lang>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</select>
</label>
<button type="button" class="btn-green" data-ai-review-go>Review</button>
</div>
<div class="ai-output" data-ai-review-output></div>
</section>
</aside>
<div id="aiBackdrop" class="ai-backdrop" aria-hidden="true"></div>
<div id="achievementToast" class="achievement-toast" aria-hidden="true">
<div class="achievement-icon">🏆</div>
<div class="achievement-body">
<strong data-achievement-title>Achievement unlocked!</strong>
<span data-achievement-text></span>
</div>
</div>
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-cols">
<div class="footer-col">
<h4>iwantcoding.com</h4>
<p>Free, hands-on coding tutorials for self-taught developers and students.</p>
</div>
<div class="footer-col">
<h4>Learn</h4>
<ul>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/html">HTML</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/css">CSS</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/javascript">JavaScript</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/python">Python</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/sql">SQL</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/capstone">Capstone Guide</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/about">About Us</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/contact">Contact</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/faq">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Legal</h4>
<ul>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/privacy">Privacy Policy</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/terms">Terms of Service</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/disclaimer">Disclaimer</a></li>
<li><a href="https://www.iwantcoding.com.wehelptradiesstaging.com/cookies">Cookie Policy</a></li>
</ul>
</div>
</div>
<p class="footer-copy">© 2026 iwantcoding.com. All rights reserved.</p>
</div>
</footer>
<style>
.site-footer{background:#1F2933;color:#cfd8e3;margin-top:60px;padding:40px 20px 24px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:24px}
.footer-col h4{color:#fff;margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:0.5px}
.footer-col p{font-size:13px;line-height:1.6;color:#a8b6c4;margin:0}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:5px 0}
.footer-col a{color:#cfd8e3;text-decoration:none;font-size:13px}
.footer-col a:hover{color:#4F46E5;text-decoration:underline}
.footer-copy{border-top:1px solid #2d3a47;padding-top:18px;margin:0;font-size:12px;color:#7b8a9a;text-align:center}
@media (max-width:800px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.footer-cols{grid-template-columns:1fr}}
</style>
<script>window.L3_AUTH = {"logged_in":false,"user":null};</script>
<script>
// Mega-menu — click/tap-to-open + outside-click-to-close (hover is CSS-only).
(function () {
const mega = document.getElementById('megaMenu');
if (!mega) return;
const btn = mega.querySelector('.mega-toggle');
btn.addEventListener('click', e => {
e.preventDefault();
const open = mega.classList.toggle('is-open');
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
document.addEventListener('click', e => {
if (!mega.contains(e.target)) {
mega.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
}
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
mega.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
}
});
})();
</script>
<script src="https://www.iwantcoding.com.wehelptradiesstaging.com/js/learner-tools.js"></script>
<script src="https://www.iwantcoding.com.wehelptradiesstaging.com/js/ai-panel.js"></script>
<script src="https://www.iwantcoding.com.wehelptradiesstaging.com/js/code-diff.js"></script>
<script src="https://www.iwantcoding.com.wehelptradiesstaging.com/js/pwa-register.js"></script>
</body>
</html>