📘 HTML from A to Z

Your complete visual guide to HTML — meanings, symbols, code, alignment & real examples.
Built for beginners, explained in plain English.

🎯 28 lessons • full course • code along

`, output: '

⬅️ SVG

⬅️ Canvas

' }, { id: 'a11y', icon: '♿', title: 'Accessibility (a11y) & ARIA', tag: 'U', desc: 'Make your site usable for everyone, including people using screen readers or keyboard-only navigation.', meaning: 'Always use semantic HTML first. Add alt to all images. Use aria-label for icon-only buttons. Use aria-hidden="true" to hide decorative elements from screen readers. Ensure color contrast is high and focus states are visible.', code: ` Bar chart showing 50% growth in Q3

Hot Deal!

3 items added to cart.

`, output: '

✅ alt text for images
✅ aria-label for icon buttons
✅ aria-hidden for emojis/decorations
✅ aria-live for screen reader announcements

' }, { id: 'adv-forms', icon: '✅', title: 'Advanced Forms: Fieldset, Datalist, Output', tag: 'V', desc: 'HTML5 added powerful form elements for grouping, auto-suggest, calculations, and progress tracking.', meaning: 'Use <fieldset> and <legend> to group related inputs. <datalist> provides autocomplete suggestions for text inputs. <output> displays the result of a calculation. <progress> and <meter> show visual bars.', code: ``, output: '' }, { id: 'embeds', icon: '🖥️', title: 'Iframes, Embeds & Objects', tag: 'W', desc: 'Embed external content like YouTube videos, maps, PDFs, or legacy plugins into your page.', meaning: '<iframe> embeds another HTML document. Always add a title for accessibility and restrict permissions using sandbox or allow. <embed> and <object> are older tags used for PDFs, SVGs, or Flash (legacy), but <iframe> is the modern standard for web content.', code: `

`, output: '

▶️ YouTube Video Player (Simulated iframe)

📄 PDF / Object Embed (Fallback supported)

' }, { id: 'scripts', icon: '🧪', title: 'Scripts, Styles & Module Imports', tag: 'X', desc: 'Connect your HTML to CSS for styling and JavaScript for interactivity.', meaning: 'Use <link> for external CSS. Use <script src="..."> for external JS. Add defer to scripts so they download in parallel and execute after HTML parsing. Use type="module" for modern ES6 JavaScript imports.', code: ` `, output: '✅ CSS makes it beautiful. JS makes it interactive. defer prevents render-blocking!' }, { id: 'responsive', icon: '📱', title: 'Responsive Design & Viewport', tag: 'Y', desc: 'Ensure your site looks perfect on phones, tablets, and ultrawide monitors.', meaning: 'The <meta name="viewport"> tag is mandatory for mobile layouts. Combine it with CSS Media Queries (@media) to change layouts at specific breakpoints. Use relative units (rem, %, vw) instead of fixed pixels.', code: ` `, output: '✅ Responsive design = one codebase that adapts to any screen size.

📱 Mobile

💻 Desktop

📺 TV

' }, { id: 'final', icon: '🏁', title: 'Putting It All Together', tag: 'Z', desc: 'You\'ve mastered the A-Z of HTML! Now combine these elements to build real-world projects.', meaning: 'HTML is the foundation. From here, learn CSS to make it beautiful, and JavaScript to make it smart. Start building: a portfolio site, a blog layout, or a dashboard. The web is yours to create!', code: ` My Portfolio

Jane Developer

My Projects

`, output: '🎉 You did it! HTML from A to Z!

Now go build something amazing. 🚀

' }, { id: 'bonus1', icon: '🏗️', title: 'Bonus: Web Components & Templates', tag: '⭐', desc: 'Advanced HTML5 features for building reusable, encapsulated custom elements.', meaning: '<template> holds HTML that is parsed but not rendered until activated via JS. <slot> is used inside Shadow DOM to inject external content into a custom component. This is the foundation of frameworks like React/Vue, but built natively into the browser!', code: ` `, output: '✅ Templates and Slots power the modern web (Shadow DOM). They keep your code clean and encapsulated.' }, { id: 'bonus2', icon: '🗑️', title: 'Bonus: Deprecated Tags (What NOT to use)', tag: '⚠️', desc: 'HTML has evolved. Many old tags from the 90s are obsolete and should never be used in modern code.', meaning: 'Never use <font>, <center>, <marquee>, <blink>, or <frame>. They mix presentation with structure and break accessibility. Always use CSS for styling and layout instead!', code: ` Old Text Centered text Scrolling text

Modern Text

Centered text

`, output: '

❌ <font>, <center>, <marquee>
✅ Use CSS classes and Flexbox/Grid instead!

' } ]; // ================================================================ // ENTITY DATA // ================================================================ const entities = [ { sym: '<', name: 'less-than', entity: '<' }, { sym: '>', name: 'greater-than', entity: '>' }, { sym: '&', name: 'ampersand', entity: '&' }, { sym: '"', name: 'double quote', entity: '"' }, { sym: '©', name: 'copyright', entity: '©' }, { sym: '®', name: 'registered', entity: '®' }, { sym: '™', name: 'trademark', entity: '™' }, { sym: '€', name: 'euro', entity: '€' }, { sym: '£', name: 'pound', entity: '£' }, { sym: '¥', name: 'yen', entity: '¥' }, { sym: '♥', name: 'heart', entity: '♥' }, { sym: '♦', name: 'diamond', entity: '♦' }, { sym: '✓', name: 'checkmark', entity: '✓' }, { sym: '•', name: 'bullet', entity: '•' }, { sym: '…', name: 'ellipsis', entity: '…' }, { sym: '±', name: 'plus-minus', entity: '±' }, { sym: '×', name: 'times', entity: '×' }, { sym: '÷', name: 'divide', entity: '÷' }, { sym: '∞', name: 'infinity', entity: '∞' }, { sym: '≠', name: 'not equal', entity: '≠' }, { sym: '≤', name: 'less or equal', entity: '≤' }, { sym: '≥', name: 'greater or equal', entity: '≥' }, { sym: ' ', name: 'non-breaking space', entity: ' ' }, ]; // ================================================================ // RENDER FUNCTIONS // ================================================================ function renderTOC() { const list = document.getElementById('tocList'); list.innerHTML = lessons.map((l, i) => `

${String(i+1).padStart(2,'0')} ${l.icon} ${l.title}

`).join(''); } function renderLessons() { const container = document.getElementById('mainContent'); container.innerHTML = lessons.map((l, i) => { // Build the code block with syntax highlighting let codeHtml = l.code; // Simple but robust syntax highlighting codeHtml = codeHtml .replace(/&/g, '&') .replace(//g, '>') .replace(/()/g, '$1') .replace(/(<!DOCTYPE[^&]*>)/gi, '$1') .replace(/(<\/?)([\w-]+)/g, '$1$2') .replace(/(\s)([\w-]+)(=)("[^"]*"|'[^']*')/g, '$1$2$3$4') .replace(/(\s)([\w-]+)(?=\s|>|\/>)/g, '$1$2'); // Entity grid (only for the entities lesson) let entityGrid = ''; if (l.id === 'entities') { entityGrid = `

${entities.map(e => `

${e.sym}

${e.name} ${e.entity}

`).join('')}

`; } // Output preview let outputHtml = ''; if (l.output) { outputHtml = `

👁️ Live Preview ${l.output}

`; } return `

Lesson ${String(i+1).padStart(2,'0')} ${l.icon}

${l.title} ${l.tag}

${l.desc}

${l.meaning}

${entityGrid}

${codeHtml}

📄 Code

${outputHtml}

`; }).join(''); // Attach copy handlers document.querySelectorAll('.copy-btn').forEach(btn => { btn.addEventListener('click', function() { const code = decodeURIComponent(this.dataset.code); navigator.clipboard.writeText(code).then(() => { const orig = this.textContent; this.textContent = '✅ Copied!'; setTimeout(() => { this.textContent = orig; }, 1500); }).catch(() => { // fallback const ta = document.createElement('textarea'); ta.value = code; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); const orig = this.textContent; this.textContent = '✅ Copied!'; setTimeout(() => { this.textContent = orig; }, 1500); }); }); }); } // ================================================================ // PROGRESS & SCROLL SPY // ================================================================ function updateProgress() { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; document.getElementById('progressFill').style.width = Math.min(progress, 100) + '%'; document.getElementById('progressText').textContent = Math.round(Math.min(progress, 100)) + '%'; } function scrollSpy() { const sections = document.querySelectorAll('.lesson'); const links = document.querySelectorAll('.toc-list a'); let currentId = ''; sections.forEach(section => { const rect = section.getBoundingClientRect(); if (rect.top <= 120) { currentId = section.id.replace('lesson-', ''); } }); links.forEach(link => { link.classList.toggle('active', link.dataset.id === currentId); }); } function handleBackTop() { const btn = document.getElementById('backTop'); if (window.scrollY > 400) { btn.classList.add('visible'); } else { btn.classList.remove('visible'); } } // ================================================================ // INIT // ================================================================ renderTOC(); renderLessons(); // After rendering, update progress and scroll spy window.addEventListener('scroll', () => { updateProgress(); scrollSpy(); handleBackTop(); }); window.addEventListener('resize', updateProgress); window.addEventListener('load', () => { updateProgress(); scrollSpy(); handleBackTop(); }); // Back to top document.getElementById('backTop').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Smooth TOC clicks document.querySelectorAll('.toc-list a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const id = this.dataset.id; const el = document.getElementById(`lesson-${id}`); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); console.log('📘 HTML from A to Z — Full Course Loaded!'); console.log('🎯 ' + lessons.length + ' lessons ready.');

My Projects

Default Name

${l.title} ${l.tag}