Mastering HTML & HTML5: Basics to Professional Best Practices

A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.

#html5#web-development#frontend-coding#semantic-html#seo-best-practices#coding-tutorial#html-basics

Watch
Pitch

HTML & HTML5 Mastery

From Basic Structure to Professional Best Practices

Made by

Level 1: The Foundation

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and meaning of web content. A website is a collection of related web pages, while the Internet is the global network connecting them.

Made by

Document Structure & Tags

Every HTML5 document relies on a specific anatomy to function correctly. The DOCTYPE declaration informs the browser of the version. The 'html' tag wraps all content, 'head' contains metadata and titles, and 'body' contains the visible content. Basic formatting tags like h1-h6 (headings) and p (paragraphs) organize the text hierarchy.

Made by

Organizing Data & Navigation

Unordered Lists (ul): Bullet points for non-sequential items.
Ordered Lists (ol): Numbered lists for sequential steps.
Description Lists (dl): Key-value pairs for definitions.
Hyperlinks (a): Anchor tags connect pages using absolute or relative URLs.

Made by

Level 2: Tables & Data

Tables are essential for displaying structured data like financial reports or schedules. Key elements include <tr> for rows, <td> for data cells, and <th> for headers. Advanced features like 'rowspan' and 'colspan' allow cells to extend across the grid layout, offering layout flexibility before CSS Grid existed.

Made by

Interactivity: Forms

Input Types: Text, password, radio buttons, and checkboxes collect user data.

Form Structure: The

Controls: for multi-line input.</p></div><div style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'><p style='font-size:36px; color:#e2e8f0; margin:0;'>Accessibility: Always use <label> tags associated with input IDs for screen readers.</p></div></div></div></div><div class="absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10"><span class="text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5">Made by</span><img src="/bobr-logo.svg" alt="Bobr AI" class="h-3 md:h-3.5 object-contain"/></div></div></div><div class="slide-scaler w-full group relative"><div class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block">07</div><div class="relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10" style="aspect-ratio:16/9"><div class="slide-frame absolute top-0 left-0"><div style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; justify-content:space-between; padding:80px; box-sizing:border-box; font-family:sans-serif;'><div style='width:50%; padding-right:50px;'><h2 style='font-size:64px; color:#f97316; margin-bottom:40px;'>Level 3: HTML5 Semantics</h2><p style='font-size:36px; line-height:1.6; color:#e2e8f0;'>HTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer. Instead of generic 'div' tags, we use header, nav, section, article, aside, and footer. This improves code readability and significantly boosts SEO by allowing search engines to understand page structure.</p></div><div style='width:45%; height:80%; display:flex; justify-content:center; align-items:center;'><img src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/e11973a4-3103-47b4-b4b3-6b1985fb3f47.png' style='width:100%; height:100%; object-fit:contain; border-radius:20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);'></div></div></div><div class="absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10"><span class="text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5">Made by</span><img src="/bobr-logo.svg" alt="Bobr AI" class="h-3 md:h-3.5 object-contain"/></div></div></div><div class="slide-scaler w-full group relative"><div class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block">08</div><div class="relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10" style="aspect-ratio:16/9"><div class="slide-frame absolute top-0 left-0"><div style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'><h2 style='font-size:64px; color:#3b82f6; margin-bottom:60px; border-bottom: 3px solid #334155; padding-bottom:30px;'>Media & Graphics in HTML5</h2><ul style='list-style:none; padding:0; flex-grow:1; display:flex; flex-direction:column; justify-content:space-around;'><li style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'>Native Audio & Video: Embed media directly without plugins using <audio> and <video> tags.</li><li style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'>Canvas: A container for drawing graphics via JavaScript (games, visualizations).</li><li style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'>SVG: Scalable Vector Graphics for resolution-independent illustrations and icons.</li><li style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'>New Inputs: Enhanced form inputs like date, color, range, and email validation.</li></ul></div></div><div class="absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10"><span class="text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5">Made by</span><img src="/bobr-logo.svg" alt="Bobr AI" class="h-3 md:h-3.5 object-contain"/></div></div></div><div class="slide-scaler w-full group relative"><div class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block">09</div><div class="relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10" style="aspect-ratio:16/9"><div class="slide-frame absolute top-0 left-0"><div style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; justify-content:space-between; padding:80px; box-sizing:border-box; font-family:sans-serif;'><div style='width:50%; padding-right:50px;'><h2 style='font-size:64px; color:#f97316; margin-bottom:40px;'>Level 4: Professional Best Practices</h2><p style='font-size:36px; line-height:1.6; color:#e2e8f0;'>Professional HTML requires adherence to standards. SEO relies on proper Meta Tags (charset, viewport, description). Accessibility means using 'alt' text for images and semantic roles so screen readers can interpret content. Clean indentation and code validation are non-negotiable for maintainable projects.</p></div><div style='width:45%; height:80%; display:flex; justify-content:center; align-items:center;'><img src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/7e75762b-3876-48f8-8a04-058575c2f06f.png' style='width:100%; height:100%; object-fit:contain; border-radius:20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);'></div></div></div><div class="absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10"><span class="text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5">Made by</span><img src="/bobr-logo.svg" alt="Bobr AI" class="h-3 md:h-3.5 object-contain"/></div></div></div><div class="slide-scaler w-full group relative"><div class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block">10</div><div class="relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10" style="aspect-ratio:16/9"><div class="slide-frame absolute top-0 left-0"><div style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'><h2 style='font-size:64px; color:#3b82f6; margin-bottom:40px;'>Tools & Mini Projects</h2><div style='display:grid; grid-template-columns: 1fr 1fr; gap:40px; flex-grow:1;'><div style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'><p style='font-size:36px; color:#e2e8f0; margin:0;'>Validation: Use the W3C Validator to find and fix syntax errors.</p></div><div style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'><p style='font-size:36px; color:#e2e8f0; margin:0;'>DevTools: Inspect specific elements and debut layout issues in the browser.</p></div><div style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'><p style='font-size:36px; color:#e2e8f0; margin:0;'>Responsiveness: Configure the Viewport meta tag for mobile devices.</p></div><div style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'><p style='font-size:36px; color:#e2e8f0; margin:0;'>Project Ideas: Personal Profile, Registration Form, Blog Structure.</p></div></div></div></div><div class="absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10"><span class="text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5">Made by</span><img src="/bobr-logo.svg" alt="Bobr AI" class="h-3 md:h-3.5 object-contain"/></div></div></div></div><div class="mt-24 mb-8 bg-[#1D5939] rounded-[32px] p-8 md:p-16 flex flex-col md:flex-row items-center justify-between gap-12 relative overflow-hidden"><div class="absolute -top-32 -right-32 w-96 h-96 bg-[#26395F] rounded-full blur-3xl opacity-50"></div><div class="absolute -bottom-32 -left-32 w-96 h-96 bg-[#FF441A] rounded-full blur-3xl opacity-30"></div><div class="relative z-10 max-w-xl w-full"><img src="/bobr-logo.svg" alt="Bobr AI" class="h-8 md:h-12 object-contain mb-8 filter brightness-0 invert"/><h2 class="text-3xl md:text-5xl font-black text-[#F2F0E9] mb-8 tracking-tighter leading-[1.05] uppercase">DESIGNER-MADE <br/><span class="text-[#FF9DB0]">PRESENTATION,</span> <br/><span class="text-[#F4C553]">GENERATED FROM</span> <br/><span class="text-[#FF441A]">YOUR PROMPT</span></h2><p class="text-[#F2F0E9]/80 text-lg font-medium mb-10 max-w-md">Create your own professional slide deck with real images, data charts, and unique design in under a minute.</p><a class="inline-flex items-center justify-center px-8 py-4 bg-[#F4C553] text-[#1D5939] font-black uppercase tracking-wider rounded hover:bg-[#FFE599] transition-transform hover:-translate-y-1 text-lg shadow-[4px_4px_0px_#FF441A] hover:shadow-[6px_6px_0px_#FF441A]" href="/">Generate For Free</a></div><div class="relative z-10 w-full max-w-[280px] hidden md:block"><div class="aspect-square relative"><div class="absolute inset-0 bg-[#26395F] rounded-2xl rotate-6 shadow-[8px_8px_0px_#FF441A] border-4 border-[#1D5939] transition-transform hover:rotate-12 duration-500"></div><div class="absolute inset-0 bg-[#FF9DB0] rounded-2xl -rotate-3 shadow-[8px_8px_0px_#1D5939] border-4 border-[#1D5939] transition-transform hover:-rotate-12 duration-500"></div><div class="absolute inset-0 bg-[#EAE6DB] rounded-2xl flex items-center justify-center p-8 flex-col gap-4 border-4 border-[#1D5939] shadow-[8px_8px_0px_#26395F] z-10 transition-transform hover:-translate-y-2 hover:-translate-x-2 duration-300"><div class="w-full flex justify-between items-start mb-2 relative"><div class="w-12 h-12 bg-[#FF441A] rounded-full border-4 border-[#1D5939] z-10 relative"><svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-[#1D5939]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></div><div class="flex gap-2"><div class="w-4 h-4 bg-[#26395F] rounded-full border-2 border-[#1D5939]"></div><div class="w-4 h-4 bg-[#F4C553] rounded-full border-2 border-[#1D5939]"></div></div></div><div class="w-full h-4 bg-[#1D5939] rounded-full relative overflow-hidden"><div class="absolute top-0 left-0 h-full w-1/3 bg-[#FF9DB0]"></div></div><div class="w-5/6 h-4 bg-[#1D5939] rounded-full"></div><div class="w-4/6 h-4 bg-[#1D5939] rounded-full"></div><div class="w-full h-20 bg-white border-4 border-[#1D5939] rounded-xl mt-2 relative overflow-hidden flex items-end"><div class="w-1/3 h-1/2 bg-[#FF441A] border-r-4 border-t-4 border-[#1D5939]"></div><div class="w-1/3 h-3/4 bg-[#F4C553] border-r-4 border-t-4 border-l-4 border-[#1D5939] -ml-1"></div><div class="w-1/3 h-full bg-[#26395F] border-t-4 border-[#1D5939] -ml-1"></div></div></div></div></div></div></div><article class="sr-only" itemScope="" itemType="https://schema.org/PresentationDigitalDocument"><meta itemProp="name" content="Mastering HTML & HTML5: Basics to Professional Best Practices"/><meta itemProp="description" content="A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards."/><meta itemProp="encodingFormat" content="text/html"/><meta itemProp="thumbnailUrl" content="https://bobr.ams3.digitaloceanspaces.com/og/695539051f848c42731b6845.jpg"/><meta itemProp="publisher" content="Bobr AI"/><h2 itemProp="headline">Mastering HTML & HTML5: Basics to Professional Best Practices</h2><p itemProp="abstract">A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.</p><div itemProp="text"><section aria-label="Slide 1"><p>HTML & HTML5 Mastery</p><p>From Basic Structure to Professional Best Practices</p></section><section aria-label="Slide 2"><p>Level 1: The Foundation</p><p>HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and meaning of web content. A website is a collection of related web pages, while the Internet is the global network connecting them.</p></section><section aria-label="Slide 3"><p>Document Structure & Tags</p><p>Every HTML5 document relies on a specific anatomy to function correctly. The DOCTYPE declaration informs the browser of the version. The 'html' tag wraps all content, 'head' contains metadata and titles, and 'body' contains the visible content. Basic formatting tags like h1-h6 (headings) and p (paragraphs) organize the text hierarchy.</p></section><section aria-label="Slide 4"><p>Organizing Data & Navigation</p><p>Unordered Lists (ul): Bullet points for non-sequential items.</p><p>Ordered Lists (ol): Numbered lists for sequential steps.</p><p>Description Lists (dl): Key-value pairs for definitions.</p><p>Hyperlinks (a): Anchor tags connect pages using absolute or relative URLs.</p></section><section aria-label="Slide 5"><p>Level 2: Tables & Data</p><p>Tables are essential for displaying structured data like financial reports or schedules. Key elements include <tr> for rows, <td> for data cells, and <th> for headers. Advanced features like 'rowspan' and 'colspan' allow cells to extend across the grid layout, offering layout flexibility before CSS Grid existed.</p></section><section aria-label="Slide 6"><p>Interactivity: Forms</p><p>Input Types: Text, password, radio buttons, and checkboxes collect user data.</p><p>Form Structure: The <form> tag wraps controls; attributes like 'action' and 'method' define submission.</p><p>Controls: <select> for dropdowns and <textarea> for multi-line input.</p><p>Accessibility: Always use <label> tags associated with input IDs for screen readers.</p></section><section aria-label="Slide 7"><p>Level 3: HTML5 Semantics</p><p>HTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer. Instead of generic 'div' tags, we use header, nav, section, article, aside, and footer. This improves code readability and significantly boosts SEO by allowing search engines to understand page structure.</p></section><section aria-label="Slide 8"><p>Media & Graphics in HTML5</p><p>Native Audio & Video: Embed media directly without plugins using <audio> and <video> tags.</p><p>Canvas: A container for drawing graphics via JavaScript (games, visualizations).</p><p>SVG: Scalable Vector Graphics for resolution-independent illustrations and icons.</p><p>New Inputs: Enhanced form inputs like date, color, range, and email validation.</p></section><section aria-label="Slide 9"><p>Level 4: Professional Best Practices</p><p>Professional HTML requires adherence to standards. SEO relies on proper Meta Tags (charset, viewport, description). Accessibility means using 'alt' text for images and semantic roles so screen readers can interpret content. Clean indentation and code validation are non-negotiable for maintainable projects.</p></section><section aria-label="Slide 10"><p>Tools & Mini Projects</p><p>Validation: Use the W3C Validator to find and fix syntax errors.</p><p>DevTools: Inspect specific elements and debut layout issues in the browser.</p><p>Responsiveness: Configure the Viewport meta tag for mobile devices.</p><p>Project Ideas: Personal Profile, Registration Form, Blog Structure.</p></section></div><ul><li itemProp="keywords">html5</li><li itemProp="keywords">web-development</li><li itemProp="keywords">frontend-coding</li><li itemProp="keywords">semantic-html</li><li itemProp="keywords">seo-best-practices</li><li itemProp="keywords">coding-tutorial</li><li itemProp="keywords">html-basics</li></ul><footer><p>This presentation was created with <a href="https://bobr.ai" itemProp="url">Bobr AI</a> — an AI presentation generator.</p><a href="/p/1b6845-mastering-html-html5-basics-to-professional-best-practices/md" type="text/markdown">View as markdown</a></footer></article><footer class="bg-white border-t border-[#226240]/10 py-12 px-4 md:px-6 mt-auto"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"><div><h3 class="font-semibold text-[#226240] tracking-tight">Lamp AI, Inc.</h3><div class="text-sm text-[#226240]/60 mt-2 space-y-0.5"><p>1111b South Governors Avenue, STE 48345</p><p>Dover, DE 19904 US</p><p class="mt-2">Phone: (302) 450-1743</p></div></div><div><h4 class="font-semibold text-[#226240] tracking-tight text-sm mb-2">Guides</h4><div class="text-sm text-[#226240]/60 space-y-1.5"><a class="block hover:text-[#226240] transition-colors" href="/guides/ai-presentation-generator">AI Presentation Generator</a><a class="block hover:text-[#226240] transition-colors" href="/guides/pitch-deck-structure">Pitch Deck Structure</a><a class="block hover:text-[#226240] transition-colors" href="/guides/sales-deck-template">Sales Deck Template</a><a class="block hover:text-[#226240] transition-colors" href="/guides/how-to-prompt-ai-for-slides">How to Prompt AI for Slides</a><a class="block hover:text-[#226240] transition-colors" href="/guides/add-charts-and-data-to-slides">Charts in Presentations</a><a class="block hover:text-[#226240] transition-colors" href="/guides/powerpoint-alternative">PowerPoint Alternative</a></div></div><div class="text-sm text-[#226240]/60 md:text-right space-y-1.5"><h4 class="font-semibold text-[#226240] tracking-tight text-sm mb-2">Company</h4><a class="block hover:text-[#226240] transition-colors" href="/about">About</a><a class="block hover:text-[#226240] transition-colors" href="/blog">Blog</a><a class="block hover:text-[#226240] transition-colors" href="/pitch-deck">Pitch Deck Generator</a><a class="block hover:text-[#226240] transition-colors" href="/business-presentations">Business Presentations</a><a class="block hover:text-[#226240] transition-colors" href="/presentation-topics">Presentation Topics</a><a class="block hover:text-[#226240] transition-colors" href="/compare">Compare AI Tools</a><a class="block hover:text-[#226240] transition-colors" href="/canva-alternative">Canva Alternative</a><a class="block hover:text-[#226240] transition-colors" href="/gamma-alternative">Gamma Alternative</a><a class="block hover:text-[#226240] transition-colors" href="/privacy-policy">Privacy Policy</a><a class="block hover:text-[#226240] transition-colors" href="/terms-of-service">Terms of Service</a><p class="text-[#226240]/40 mt-4">© 2026 Lamp AI, Inc. All rights reserved.</p></div></div></footer></main></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><script src="/_next/static/chunks/09123a3d6b630a2a.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[785771,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"GoogleTagManager\"]\n3:I[746798,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"TooltipProvider\"]\n4:\"$Sreact.suspense\"\n5:I[936098,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"AttributionCookies\"]\n6:I[893963,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"Header\"]\n7:I[946331,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"default\"]\n8:I[800282,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"default\"]\na:I[339828,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"Toaster\"]\nb:I[956728,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"IntercomProvider\"]\nc:I[138440,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"OpenReplayProvider\"]\nd:I[101152,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"AmplitudeProvider\"]\ne:I[871971,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"Analytics\"]\n10:I[823434,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"OutletBoundary\"]\n12:I[823434,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"ViewportBoundary\"]\n14:I[823434,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"MetadataBoundary\"]\n16:I[563491,[\"/_next/static/chunks/83379af99bd09080.js\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css\",\"style\"]\n:HL[\"/_next/static/chunks/98d9a172226bc148.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3"])</script><script>self.__next_f.push([1,"a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"zJiaLc0eOEvf3NaV2zyvK\",\"c\":[\"\",\"p\",\"1b6845-mastering-html-html5-basics-to-professional-best-practices\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"p\",{\"children\":[[\"id\",\"1b6845-mastering-html-html5-basics-to-professional-best-practices\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/98d9a172226bc148.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/a4be4659ae751f0e.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/7597d871d2e9938a.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/c12b961101a8589b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/f4da83857d341efd.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/3405d78d7c2355d2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/c67845a19eb71517.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Bobr AI\\\",\\\"url\\\":\\\"https://bobr.ai\\\",\\\"logo\\\":\\\"https://bobr.ai/favicon.svg\\\",\\\"sameAs\\\":[],\\\"description\\\":\\\"AI presentation generator that creates professional slides in seconds. No templates — every presentation is uniquely designed.\\\"}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Bobr AI\\\",\\\"url\\\":\\\"https://bobr.ai\\\",\\\"applicationCategory\\\":\\\"BusinessApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"description\\\":\\\"AI-powered presentation generator. Describe your topic and get a professional slide deck with researched content, real images, and data charts — in under a minute.\\\",\\\"offers\\\":{\\\"@type\\\":\\\"AggregateOffer\\\",\\\"priceCurrency\\\":\\\"USD\\\",\\\"lowPrice\\\":\\\"0\\\",\\\"highPrice\\\":\\\"250\\\",\\\"offerCount\\\":\\\"5\\\"},\\\"featureList\\\":[\\\"AI presentation generation from text prompts\\\",\\\"Deep web research for accurate data and sources\\\",\\\"Real-world image search and AI image generation\\\",\\\"Automatic chart and data visualization\\\",\\\"Chat-based slide editing\\\",\\\"Brand kit support\\\",\\\"PPTX and PDF export\\\",\\\"Team collaboration\\\"]}\"}}]]}],[\"$\",\"$L2\",null,{\"gtmId\":\"GTM-T6FX3LFS\"}],[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased flex flex-col min-h-screen\",\"children\":[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$4\",null,{\"fallback\":null,\"children\":[\"$\",\"$L5\",null,{}]}],[\"$\",\"$L6\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex-1 flex flex-col\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$L9\",[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$La\",null,{}],[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{}]]}]}],[\"$\",\"$Le\",null,{\"domainsConfig\":{\"refer\":\"go.bobr.ai\"}}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$Lf\",null,[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$4\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$@13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$4\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$16\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#F2F0E9\"}]]\n9:E{\"digest\":\"NEXT_REDIRECT;replace;/;307;\"}\n"])</script><script>self.__next_f.push([1,"17:I[290322,[\"/_next/static/chunks/ea4592bf6a107990.js\"],\"IconMark\"]\n18:I[983133,[\"/_next/static/chunks/fdfa7b50bd2bce93.js\",\"/_next/static/chunks/a4be4659ae751f0e.js\",\"/_next/static/chunks/cb15e0c2ff49cf52.js\",\"/_next/static/chunks/7597d871d2e9938a.js\",\"/_next/static/chunks/c12b961101a8589b.js\",\"/_next/static/chunks/f4da83857d341efd.js\",\"/_next/static/chunks/3405d78d7c2355d2.js\",\"/_next/static/chunks/c67845a19eb71517.js\"],\"\"]\n:HL[\"/bobr-logo.svg\",\"image\"]\n"])</script><script>self.__next_f.push([1,"15:[[\"$\",\"title\",\"0\",{\"children\":\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practic… | Bobr AI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"html5, web-development, frontend-coding, semantic-html, seo-best-practices, coding-tutorial, html-basics\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://bobr.ai/p/1b6845-mastering-html-html5-basics-to-professional-best-practices\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"type\":\"text/markdown\",\"href\":\"https://bobr.ai/p/1b6845-mastering-html-html5-basics-to-professional-best-practices/md\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practic… | Bobr AI\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://bobr.ams3.digitaloceanspaces.com/og/695539051f848c42731b6845.jpg\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:width\",\"content\":\"1920\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:height\",\"content\":\"1080\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:title\",\"content\":\"Bobr - AI for presentations\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:description\",\"content\":\"Create professional presentations with artificial intelligence in seconds\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image\",\"content\":\"https://bobr.ai/og.png\"}],[\"$\",\"link\",\"16\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.8bd2d939.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"17\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon-96x96.png\",\"sizes\":\"96x96\",\"type\":\"image/png\"}],[\"$\",\"link\",\"19\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L17\",\"20\",{}]]\n"])</script><script>self.__next_f.push([1,"11:null\n"])</script><script>self.__next_f.push([1,"f:[\"$\",\"main\",null,{\"className\":\"min-h-screen bg-[#F2F0E9] flex flex-col\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebPage\\\",\\\"url\\\":\\\"https://bobr.ai/p/1b6845-mastering-html-html5-basics-to-professional-best-practices\\\",\\\"name\\\":\\\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practices\\\",\\\"description\\\":\\\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\\\"}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"VideoObject\\\",\\\"name\\\":\\\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practices\\\",\\\"description\\\":\\\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\\\",\\\"thumbnailUrl\\\":\\\"https://bobr.ams3.digitaloceanspaces.com/og/695539051f848c42731b6845.jpg\\\",\\\"contentUrl\\\":\\\"https://bobr.ams3.digitaloceanspaces.com/seo-video/695539051f848c42731b6845.mp4\\\",\\\"uploadDate\\\":\\\"2025-12-31T14:55:16.363Z\\\",\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Bobr AI\\\",\\\"url\\\":\\\"https://bobr.ai\\\"}}\"}}],[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n .slide-scaler { container-type: inline-size; }\\n .slide-frame {\\n width: 1920px;\\n height: 1080px;\\n transform-origin: top left;\\n scale: calc(100cqi / 1920px);\\n pointer-events: none;\\n user-select: none;\\n }\\n \"}}],[\"$\",\"div\",null,{\"className\":\"flex-1 w-full max-w-5xl mx-auto px-4 py-8 md:py-12\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-12 md:mb-20 text-center max-w-3xl mx-auto flex flex-col items-center\",\"children\":[[\"$\",\"$L18\",null,{\"href\":\"/\",\"className\":\"group flex flex-col items-center gap-2 mb-8 hover:-translate-y-1 transition-transform duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 px-5 py-2.5 bg-white border-2 border-[#1D5939] rounded-2xl shadow-[4px_4px_0px_#1D5939] group-hover:shadow-[6px_6px_0px_#FF441A] group-hover:border-[#FF441A] transition-all\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"text-[#1D5939] group-hover:text-[#FF441A] transition-colors\",\"children\":[\"$\",\"path\",null,{\"d\":\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[#1D5939] group-hover:text-[#FF441A] text-xs md:text-sm font-black uppercase tracking-[0.2em] pt-0.5 transition-colors\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-4 md:h-5 object-contain\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-[#FF441A]\"}],[\"$\",\"div\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-[#26395F]\"}],[\"$\",\"div\",null,{\"className\":\"w-1.5 h-1.5 rounded-full bg-[#FF9DB0]\"}]]}]]}],[\"$\",\"h1\",null,{\"className\":\"text-3xl md:text-5xl lg:text-6xl font-black text-[#1D5939] mb-6 tracking-tighter leading-[1.1] uppercase relative inline-block\",\"children\":[[\"$\",\"span\",null,{\"className\":\"relative z-10\",\"children\":\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practices\"}],[\"$\",\"svg\",null,{\"className\":\"absolute -bottom-2 md:-bottom-4 left-0 w-full h-4 md:h-6 text-[#F4C553] -z-10\",\"viewBox\":\"0 0 100 20\",\"preserveAspectRatio\":\"none\",\"children\":\"$L19\"}],\"$L1a\"]}],\"$L1b\",\"$L1c\"]}],\"$L1d\",\"$L1e\",\"$L1f\"]}],\"$L20\",\"$L21\"]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"path\",null,{\"d\":\"M0,15 Q25,5 50,15 T100,10 L100,20 L0,20 Z\",\"fill\":\"currentColor\",\"opacity\":\"0.8\"}]\n1a:[\"$\",\"svg\",null,{\"className\":\"absolute -top-6 -right-8 w-12 h-12 text-[#FF441A] opacity-80\",\"viewBox\":\"0 0 50 50\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M25 0L31.625 18.375L50 25L31.625 31.625L25 50L18.375 31.625L0 25L18.375 18.375L25 0Z\",\"fill\":\"currentColor\"}]}]\n1b:[\"$\",\"p\",null,{\"className\":\"text-[#1D5939]/80 text-base md:text-xl font-medium leading-relaxed max-w-2xl mx-auto\",\"children\":\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\"}]\n1c:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap justify-center gap-2 mt-8\",\"children\":[[\"$\",\"span\",\"html5\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"html5\"]}],[\"$\",\"span\",\"web-development\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"web-development\"]}],[\"$\",\"span\",\"frontend-coding\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"frontend-coding\"]}],[\"$\",\"span\",\"semantic-html\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"semantic-html\"]}],[\"$\",\"span\",\"seo-best-practices\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"seo-best-practices\"]}],[\"$\",\"span\",\"coding-tutorial\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"coding-tutorial\"]}],[\"$\",\"span\",\"html-basics\",{\"className\":\"px-3 py-1 bg-[#1D5939]/5 text-[#1D5939] text-xs md:text-sm font-bold uppercase tracking-widest\",\"children\":[\"#\",\"html-basics\"]}]]}]\n1d:[\"$\",\"div\",null,{\"className\":\"mb-12 md:mb-16 relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -inset-4 md:-inset-6 bg-[#1D5939] rounded-[32px] md:rounded-[40px] shadow-[8px_8px_0px_#FF9DB0] md:shadow-[16px_16px_0px_#FF9DB0]\"}],[\"$\",\"div\",null,{\"className\":\"absolute top-0 right-0 -mt-12 -mr-8 flex items-center justify-center w-24 h-24 bg-[#F4C553] rounded-full border-4 border-[#1D5939] shadow-[4px_4px_0px_#1D5939] z-20 transform rotate-12\",\"children\":[\"$\",\"span\",null,{\"className\":\"font-black text-[#1D5939] uppercase tracking-tighter text-sm leading-tight text-center\",\"children\":[\"Watch\",[\"$\",\"br\",null,{}],\"Pitch\"]}]}],[\"$\",\"div\",null,{\"className\":\"rounded-2xl md:rounded-3xl overflow-hidden shadow-2xl bg-[#26395F] relative z-10 border-4 border-[#1D5939]\",\"children\":[\"$\",\"video\",null,{\"src\":\"https://bobr.ams3.digitaloceanspaces.com/seo-video/695539051f848c42731b6845.mp4\",\"autoPlay\":true,\"muted\":true,\"loop\":true,\"playsInline\":true,\"className\":\"w-full relative z-10\",\"style\":{\"aspectRatio\":\"16/9\"}}]}]]}]\n"])</script><script>self.__next_f.push([1,"1e:[\"$\",\"div\",null,{\"className\":\"space-y-8 md:space-y-16\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"01\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cdiv style='width:100%; height:100%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background-color:#1e293b; color:#ffffff; font-family:sans-serif;'\u003e\u003cimg src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/3d9f88d5-002e-4ca9-a34a-886e65365f20.png' style='position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.4;'\u003e\u003cdiv style='position:relative; z-index:2; padding:80px; max-width:1200px;'\u003e\u003ch2 style='font-size:96px; margin:0 0 20px 0; font-weight:800; text-transform:uppercase; letter-spacing:-2px; background: linear-gradient(to right, #f97316, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;'\u003eHTML \u0026 HTML5 Mastery\u003c/h2\u003e\u003cp style='font-size:42px; margin:0; font-weight:300; opacity:0.9; border-left: 8px solid #3b82f6; padding-left:30px;'\u003eFrom Basic Structure to Professional Best Practices\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}],[\"$\",\"div\",\"1\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"02\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cdiv style='width:100%; height:100%; background-color:#1e293b; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#f1f5f9; font-family:sans-serif; padding:100px; box-sizing:border-box;'\u003e\u003cdiv style='text-align:center; max-width:1400px;'\u003e\u003ch2 style='font-size:72px; margin-bottom:60px; color:#f97316;'\u003eLevel 1: The Foundation\u003c/h2\u003e\u003cp style='font-size:48px; line-height:1.5; color:#cbd5e1;'\u003eHTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and meaning of web content. A website is a collection of related web pages, while the Internet is the global network connecting them.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\"}}],\"$L22\"]}]]}],\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\"]}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"div\",null,{\"className\":\"mt-24 mb-8 bg-[#1D5939] rounded-[32px] p-8 md:p-16 flex flex-col md:flex-row items-center justify-between gap-12 relative overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -top-32 -right-32 w-96 h-96 bg-[#26395F] rounded-full blur-3xl opacity-50\"}],[\"$\",\"div\",null,{\"className\":\"absolute -bottom-32 -left-32 w-96 h-96 bg-[#FF441A] rounded-full blur-3xl opacity-30\"}],[\"$\",\"div\",null,{\"className\":\"relative z-10 max-w-xl w-full\",\"children\":[[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-8 md:h-12 object-contain mb-8 filter brightness-0 invert\"}],[\"$\",\"h2\",null,{\"className\":\"text-3xl md:text-5xl font-black text-[#F2F0E9] mb-8 tracking-tighter leading-[1.05] uppercase\",\"children\":[\"DESIGNER-MADE \",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"text-[#FF9DB0]\",\"children\":\"PRESENTATION,\"}],\" \",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"text-[#F4C553]\",\"children\":\"GENERATED FROM\"}],\" \",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"text-[#FF441A]\",\"children\":\"YOUR PROMPT\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-[#F2F0E9]/80 text-lg font-medium mb-10 max-w-md\",\"children\":\"Create your own professional slide deck with real images, data charts, and unique design in under a minute.\"}],[\"$\",\"$L18\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center justify-center px-8 py-4 bg-[#F4C553] text-[#1D5939] font-black uppercase tracking-wider rounded hover:bg-[#FFE599] transition-transform hover:-translate-y-1 text-lg shadow-[4px_4px_0px_#FF441A] hover:shadow-[6px_6px_0px_#FF441A]\",\"children\":\"Generate For Free\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative z-10 w-full max-w-[280px] hidden md:block\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute inset-0 bg-[#26395F] rounded-2xl rotate-6 shadow-[8px_8px_0px_#FF441A] border-4 border-[#1D5939] transition-transform hover:rotate-12 duration-500\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 bg-[#FF9DB0] rounded-2xl -rotate-3 shadow-[8px_8px_0px_#1D5939] border-4 border-[#1D5939] transition-transform hover:-rotate-12 duration-500\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 bg-[#EAE6DB] rounded-2xl flex items-center justify-center p-8 flex-col gap-4 border-4 border-[#1D5939] shadow-[8px_8px_0px_#26395F] z-10 transition-transform hover:-translate-y-2 hover:-translate-x-2 duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full flex justify-between items-start mb-2 relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-[#FF441A] rounded-full border-4 border-[#1D5939] z-10 relative\",\"children\":[\"$\",\"svg\",null,{\"className\":\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-[#1D5939]\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"3\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"children\":[\"$\",\"polygon\",null,{\"points\":\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-4 h-4 bg-[#26395F] rounded-full border-2 border-[#1D5939]\"}],[\"$\",\"div\",null,{\"className\":\"w-4 h-4 bg-[#F4C553] rounded-full border-2 border-[#1D5939]\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full h-4 bg-[#1D5939] rounded-full relative overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"absolute top-0 left-0 h-full w-1/3 bg-[#FF9DB0]\"}]}],[\"$\",\"div\",null,{\"className\":\"w-5/6 h-4 bg-[#1D5939] rounded-full\"}],[\"$\",\"div\",null,{\"className\":\"w-4/6 h-4 bg-[#1D5939] rounded-full\"}],[\"$\",\"div\",null,{\"className\":\"w-full h-20 bg-white border-4 border-[#1D5939] rounded-xl mt-2 relative overflow-hidden flex items-end\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-1/3 h-1/2 bg-[#FF441A] border-r-4 border-t-4 border-[#1D5939]\"}],[\"$\",\"div\",null,{\"className\":\"w-1/3 h-3/4 bg-[#F4C553] border-r-4 border-t-4 border-l-4 border-[#1D5939] -ml-1\"}],\"$L2b\"]}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"20:[\"$\",\"article\",null,{\"className\":\"sr-only\",\"itemScope\":true,\"itemType\":\"https://schema.org/PresentationDigitalDocument\",\"children\":[[\"$\",\"meta\",null,{\"itemProp\":\"name\",\"content\":\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practices\"}],[\"$\",\"meta\",null,{\"itemProp\":\"description\",\"content\":\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\"}],[\"$\",\"meta\",null,{\"itemProp\":\"encodingFormat\",\"content\":\"text/html\"}],[\"$\",\"meta\",null,{\"itemProp\":\"thumbnailUrl\",\"content\":\"https://bobr.ams3.digitaloceanspaces.com/og/695539051f848c42731b6845.jpg\"}],[\"$\",\"meta\",null,{\"itemProp\":\"publisher\",\"content\":\"Bobr AI\"}],[\"$\",\"h2\",null,{\"itemProp\":\"headline\",\"children\":\"Mastering HTML \u0026 HTML5: Basics to Professional Best Practices\"}],[\"$\",\"p\",null,{\"itemProp\":\"abstract\",\"children\":\"A comprehensive guide to HTML5 fundamentals, covering document structure, semantic tags, tables, forms, media, and professional web development standards.\"}],[\"$\",\"div\",null,{\"itemProp\":\"text\",\"children\":[[\"$\",\"section\",\"0\",{\"aria-label\":\"Slide 1\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"HTML \u0026 HTML5 Mastery\"}],[\"$\",\"p\",\"1\",{\"children\":\"From Basic Structure to Professional Best Practices\"}]]}],[\"$\",\"section\",\"1\",{\"aria-label\":\"Slide 2\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Level 1: The Foundation\"}],[\"$\",\"p\",\"1\",{\"children\":\"HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and meaning of web content. A website is a collection of related web pages, while the Internet is the global network connecting them.\"}]]}],[\"$\",\"section\",\"2\",{\"aria-label\":\"Slide 3\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Document Structure \u0026 Tags\"}],[\"$\",\"p\",\"1\",{\"children\":\"Every HTML5 document relies on a specific anatomy to function correctly. The DOCTYPE declaration informs the browser of the version. The 'html' tag wraps all content, 'head' contains metadata and titles, and 'body' contains the visible content. Basic formatting tags like h1-h6 (headings) and p (paragraphs) organize the text hierarchy.\"}]]}],[\"$\",\"section\",\"3\",{\"aria-label\":\"Slide 4\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Organizing Data \u0026 Navigation\"}],[\"$\",\"p\",\"1\",{\"children\":\"Unordered Lists (ul): Bullet points for non-sequential items.\"}],[\"$\",\"p\",\"2\",{\"children\":\"Ordered Lists (ol): Numbered lists for sequential steps.\"}],[\"$\",\"p\",\"3\",{\"children\":\"Description Lists (dl): Key-value pairs for definitions.\"}],[\"$\",\"p\",\"4\",{\"children\":\"Hyperlinks (a): Anchor tags connect pages using absolute or relative URLs.\"}]]}],[\"$\",\"section\",\"4\",{\"aria-label\":\"Slide 5\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Level 2: Tables \u0026 Data\"}],[\"$\",\"p\",\"1\",{\"children\":\"Tables are essential for displaying structured data like financial reports or schedules. Key elements include \u0026lt;tr\u0026gt; for rows, \u0026lt;td\u0026gt; for data cells, and \u0026lt;th\u0026gt; for headers. Advanced features like 'rowspan' and 'colspan' allow cells to extend across the grid layout, offering layout flexibility before CSS Grid existed.\"}]]}],[\"$\",\"section\",\"5\",{\"aria-label\":\"Slide 6\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Interactivity: Forms\"}],[\"$\",\"p\",\"1\",{\"children\":\"Input Types: Text, password, radio buttons, and checkboxes collect user data.\"}],[\"$\",\"p\",\"2\",{\"children\":\"Form Structure: The \u003cform\u003e tag wraps controls; attributes like 'action' and 'method' define submission.\"}],[\"$\",\"p\",\"3\",{\"children\":\"Controls: \u003cselect\u003e for dropdowns and \u003ctextarea\u003e for multi-line input.\"}],[\"$\",\"p\",\"4\",{\"children\":\"Accessibility: Always use \u003clabel\u003e tags associated with input IDs for screen readers.\"}]]}],[\"$\",\"section\",\"6\",{\"aria-label\":\"Slide 7\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Level 3: HTML5 Semantics\"}],[\"$\",\"p\",\"1\",{\"children\":\"HTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer. Instead of generic 'div' tags, we use header, nav, section, article, aside, and footer. This improves code readability and significantly boosts SEO by allowing search engines to understand page structure.\"}]]}],\"$L2c\",\"$L2d\",\"$L2e\"]}],\"$L2f\",\"$L30\"]}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"footer\",null,{\"className\":\"bg-white border-t border-[#226240]/10 py-12 px-4 md:px-6 mt-auto\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold text-[#226240] tracking-tight\",\"children\":\"Lamp AI, Inc.\"}],[\"$\",\"div\",null,{\"className\":\"text-sm text-[#226240]/60 mt-2 space-y-0.5\",\"children\":[[\"$\",\"p\",null,{\"children\":\"1111b South Governors Avenue, STE 48345\"}],[\"$\",\"p\",null,{\"children\":\"Dover, DE 19904 US\"}],[\"$\",\"p\",null,{\"className\":\"mt-2\",\"children\":\"Phone: (302) 450-1743\"}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"className\":\"font-semibold text-[#226240] tracking-tight text-sm mb-2\",\"children\":\"Guides\"}],[\"$\",\"div\",null,{\"className\":\"text-sm text-[#226240]/60 space-y-1.5\",\"children\":[[\"$\",\"$L18\",\"/guides/ai-presentation-generator\",{\"href\":\"/guides/ai-presentation-generator\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"AI Presentation Generator\"}],[\"$\",\"$L18\",\"/guides/pitch-deck-structure\",{\"href\":\"/guides/pitch-deck-structure\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Pitch Deck Structure\"}],[\"$\",\"$L18\",\"/guides/sales-deck-template\",{\"href\":\"/guides/sales-deck-template\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Sales Deck Template\"}],[\"$\",\"$L18\",\"/guides/how-to-prompt-ai-for-slides\",{\"href\":\"/guides/how-to-prompt-ai-for-slides\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"How to Prompt AI for Slides\"}],[\"$\",\"$L18\",\"/guides/add-charts-and-data-to-slides\",{\"href\":\"/guides/add-charts-and-data-to-slides\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Charts in Presentations\"}],[\"$\",\"$L18\",\"/guides/powerpoint-alternative\",{\"href\":\"/guides/powerpoint-alternative\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"PowerPoint Alternative\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"text-sm text-[#226240]/60 md:text-right space-y-1.5\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"font-semibold text-[#226240] tracking-tight text-sm mb-2\",\"children\":\"Company\"}],[\"$\",\"$L18\",null,{\"href\":\"/about\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"About\"}],[\"$\",\"$L18\",null,{\"href\":\"/blog\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Blog\"}],[\"$\",\"$L18\",null,{\"href\":\"/pitch-deck\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Pitch Deck Generator\"}],[\"$\",\"$L18\",null,{\"href\":\"/business-presentations\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Business Presentations\"}],[\"$\",\"$L18\",null,{\"href\":\"/presentation-topics\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Presentation Topics\"}],[\"$\",\"$L18\",null,{\"href\":\"/compare\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Compare AI Tools\"}],[\"$\",\"$L18\",null,{\"href\":\"/canva-alternative\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Canva Alternative\"}],[\"$\",\"$L18\",null,{\"href\":\"/gamma-alternative\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Gamma Alternative\"}],[\"$\",\"$L18\",null,{\"href\":\"/privacy-policy\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Privacy Policy\"}],[\"$\",\"$L18\",null,{\"href\":\"/terms-of-service\",\"className\":\"block hover:text-[#226240] transition-colors\",\"children\":\"Terms of Service\"}],[\"$\",\"p\",null,{\"className\":\"text-[#226240]/40 mt-4\",\"children\":[\"© \",2026,\" Lamp AI, Inc. All rights reserved.\"]}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"22:[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]\n31:T431,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; justify-content:space-between; padding:80px; box-sizing:border-box; font-family:sans-serif;'\u003e\u003cdiv style='width:50%; padding-right:50px;'\u003e\u003ch2 style='font-size:64px; color:#f97316; margin-bottom:40px;'\u003eDocument Structure \u0026 Tags\u003c/h2\u003e\u003cp style='font-size:36px; line-height:1.6; color:#e2e8f0;'\u003eEvery HTML5 document relies on a specific anatomy to function correctly. The DOCTYPE declaration informs the browser of the version. The 'html' tag wraps all content, 'head' contains metadata and titles, and 'body' contains the visible content. Basic formatting tags like h1-h6 (headings) and p (paragraphs) organize the text hierarchy.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='width:45%; height:80%; display:flex; justify-content:center; align-items:center;'\u003e\u003cimg src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/5a40a96b-d28e-49df-95de-8781c1bc6b9b.png' style='width:100%; height:100%; object-fit:contain; border-radius:20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);'\u003e\u003c/div\u003e\u003c/div\u003e23:[\"$\",\"div\",\"2\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"03\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$31\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n32:T48b,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'\u003e\u003ch2 style='font-size:64px; color:#3b82f6; margin-bottom:60px; border-bottom: 3px solid #334155; padding-bottom:30px;'\u003eOrganizing Data \u0026 Navigation\u003c/h2\u003e\u003cul style='list-style:none; padding:0; flex-grow:1; display:flex; flex-direction:column; justify-content:space-around;'\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eUnordered Lists (ul): Bullet points for non-sequential items.\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eOrdered Lists (ol): Numbered lists for sequential steps.\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eDescription Lists (dl): Key-value pairs for definitions.\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eHyperlinks (a): Anchor tags connect pages using absolute or relative URLs.\u003c/li\u003e\u003c/ul\u003e\u003c/div\u003e24:[\"$\",\"div\",\"3\",{\"className\":\"slide-scaler w"])</script><script>self.__next_f.push([1,"-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"04\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$32\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",\"4\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"05\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cdiv style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; font-family:sans-serif;'\u003e\u003cdiv style='width:45%; height:100%; overflow:hidden;'\u003e\u003cimg src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/a0fdaaae-a5f2-401f-a587-05a7c164f287.png' style='width:100%; height:100%; object-fit:cover;'\u003e\u003c/div\u003e\u003cdiv style='width:55%; padding:80px; box-sizing:border-box;'\u003e\u003ch2 style='font-size:64px; color:#f97316; margin-bottom:40px;'\u003eLevel 2: Tables \u0026 Data\u003c/h2\u003e\u003cp style='font-size:40px; line-height:1.6; color:#cbd5e1;'\u003eTables are essential for displaying structured data like financial reports or schedules. Key elements include \u0026lt;tr\u0026gt; for rows, \u0026lt;td\u0026gt; for data cells, and \u0026lt;th\u0026gt; for headers. Advanced features like 'rowspan' and 'colspan' allow cells to extend across the grid layout, offering layout flexibility before CSS Grid existed.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"33:T529,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'\u003e\u003ch2 style='font-size:64px; color:#3b82f6; margin-bottom:40px;'\u003eInteractivity: Forms\u003c/h2\u003e\u003cdiv style='display:grid; grid-template-columns: 1fr 1fr; gap:40px; flex-grow:1;'\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eInput Types: Text, password, radio buttons, and checkboxes collect user data.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eForm Structure: The \u003cform\u003e tag wraps controls; attributes like 'action' and 'method' define submission.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eControls: \u003cselect\u003e for dropdowns and \u003ctextarea\u003e for multi-line input.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eAccessibility: Always use \u003clabel\u003e tags associated with input IDs for screen readers.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e26:[\"$\",\"div\",\"5\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"06\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$33\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n34:T416,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; justify-content:space-between; padding:80px; box-sizing:border-box; font-family:sans-serif;'\u003e\u003cdiv style='width:50%; padding-right:50px;'\u003e\u003ch2 style='font-size:64px; color:#f97316; margin-bottom:40px;'\u003eLevel 3: HTML5 Semantics\u003c/h2\u003e\u003cp style='font-size:36px; line-height:1.6; color:#e2e8f0;'\u003eHTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer. Instead of generic 'div' tags, we use header, nav, section, article, aside, and footer. This improves code readability and significantly boosts SEO by allowing search engines to understand page structure.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='width:45%; height:80%; display:flex; justify-content:center; align-items:center;'\u003e\u003cimg src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/e11973a4-3103-47b4-b4b3-6b1985fb3f47.png' style='width:100%; height:100%; object-fit:contain; border-radius:20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);'\u003e\u003c/div\u003e\u003c/div\u003e27:[\"$\",\"div\",\"6\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"07\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] tr"])</script><script>self.__next_f.push([1,"ansition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$34\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n35:T4db,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'\u003e\u003ch2 style='font-size:64px; color:#3b82f6; margin-bottom:60px; border-bottom: 3px solid #334155; padding-bottom:30px;'\u003eMedia \u0026 Graphics in HTML5\u003c/h2\u003e\u003cul style='list-style:none; padding:0; flex-grow:1; display:flex; flex-direction:column; justify-content:space-around;'\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eNative Audio \u0026 Video: Embed media directly without plugins using \u003caudio\u003e and \u003cvideo\u003e tags.\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eCanvas: A container for drawing graphics via JavaScript (games, visualizations).\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eSVG: Scalable Vector Graphics for resolution-independent illustrations and icons.\u003c/li\u003e\u003cli style='font-size:38px; color:#f1f5f9; padding-left:40px; border-left:6px solid #f97316; margin-bottom:30px;'\u003eNew Inputs: Enhanced form inputs like date, color, range, and email validation.\u003c/li\u003e\u003c/ul\u003e\u003c/div\u003e28:[\"$\",\"div\",\"7\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"08\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$35\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n36:T41f,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; display:flex; align-items:center; justify-content:space-between; padding:80px; box-sizing:border-box; font-family:sans-serif;'\u003e\u003cdiv style='width:50%; padding-right:50px;'\u003e\u003ch2 style='font-size:64px; color:#f97316; margin-bottom:40px;'\u003eLevel 4: Professional Best Practices\u003c/h2\u003e\u003cp style='font-size:36px; line-height:1.6; color:#e2e8f0;'\u003eProfessional HTML requires adherence to standards. SEO relies on proper Meta Tags (charset, viewport, description). Accessibility means using 'alt' text for images and semantic roles so screen readers can interpret content. Clean indentation and code validation are non-negotiable for maintainable projects.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='width:45%; height:80%; dis"])</script><script>self.__next_f.push([1,"play:flex; justify-content:center; align-items:center;'\u003e\u003cimg src='https://fd26cb97-690c-4bae-b1d4-98a94c047ad5.selstorage.ru/generated/7e75762b-3876-48f8-8a04-058575c2f06f.png' style='width:100%; height:100%; object-fit:contain; border-radius:20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);'\u003e\u003c/div\u003e\u003c/div\u003e29:[\"$\",\"div\",\"8\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"09\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$36\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]}]]}]]}]\n37:T4ee,\u003cdiv style='width:100%; height:100%; background-color:#1e293b; padding:80px; box-sizing:border-box; font-family:sans-serif; display:flex; flex-direction:column;'\u003e\u003ch2 style='font-size:64px; color:#3b82f6; margin-bottom:40px;'\u003eTools \u0026 Mini Projects\u003c/h2\u003e\u003cdiv style='display:grid; grid-template-columns: 1fr 1fr; gap:40px; flex-grow:1;'\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eValidation: Use the W3C Validator to find and fix syntax errors.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eDevTools: Inspect specific elements and debut layout issues in the browser.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eResponsiveness: Configure the Viewport meta tag for mobile devices.\u003c/p\u003e\u003c/div\u003e\u003cdiv style='background:#0f172a; padding:40px; border-radius:15px; border-left:10px solid #f97316;'\u003e\u003cp style='font-size:36px; color:#e2e8f0; margin:0;'\u003eProject Ideas: Personal Profile, Registration Form, Blog Structure.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e2a:[\"$\",\"div\",\"9\",{\"className\":\"slide-scaler w-full group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 font-black text-6xl md:text-8xl text-[#1D5939] opacity-5 pointer-events-none -rotate-90 origin-center hidden sm:block\",\"children\":\"10\"}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden shadow-[8px_8px_0px_#1D5939] md:shadow-[16px_16px_0px_#1D5939] border-4 border-[#1D5939] transition-transform duration-300 group-hover:-translate-y-2 group-hover:-translate-x-2 bg-white rounded-2xl md:rounded-[32px] z-10\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"slide-frame absolute top-0 left-0\",\"dangerouslySetInnerHTML\":{\"__html\":\"$37\"}}],[\"$\",\"div\",null,{\"className\":\"absolute bottom-4 right-4 flex items-center gap-2.5 bg-[#F2F0E9]/90 backdrop-blur-sm text-[#1D5939] px-3.5 py-2 rounded-lg pointer-events-none select-none z-10 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm border border-[#1D5939]/10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] md:text-xs font-black uppercase tracking-widest opacity-70 mt-0.5\",\"children\":\"Made by\"}],[\"$\",\"img\",null,{\"src\":\"/bobr-logo.svg\",\"alt\":\"Bobr AI\",\"className\":\"h-3 md:h-3.5 object-contain\"}]]"])</script><script>self.__next_f.push([1,"}]]}]]}]\n2b:[\"$\",\"div\",null,{\"className\":\"w-1/3 h-full bg-[#26395F] border-t-4 border-[#1D5939] -ml-1\"}]\n2c:[\"$\",\"section\",\"7\",{\"aria-label\":\"Slide 8\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Media \u0026 Graphics in HTML5\"}],[\"$\",\"p\",\"1\",{\"children\":\"Native Audio \u0026 Video: Embed media directly without plugins using \u003caudio\u003e and \u003cvideo\u003e tags.\"}],[\"$\",\"p\",\"2\",{\"children\":\"Canvas: A container for drawing graphics via JavaScript (games, visualizations).\"}],[\"$\",\"p\",\"3\",{\"children\":\"SVG: Scalable Vector Graphics for resolution-independent illustrations and icons.\"}],[\"$\",\"p\",\"4\",{\"children\":\"New Inputs: Enhanced form inputs like date, color, range, and email validation.\"}]]}]\n2d:[\"$\",\"section\",\"8\",{\"aria-label\":\"Slide 9\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Level 4: Professional Best Practices\"}],[\"$\",\"p\",\"1\",{\"children\":\"Professional HTML requires adherence to standards. SEO relies on proper Meta Tags (charset, viewport, description). Accessibility means using 'alt' text for images and semantic roles so screen readers can interpret content. Clean indentation and code validation are non-negotiable for maintainable projects.\"}]]}]\n2e:[\"$\",\"section\",\"9\",{\"aria-label\":\"Slide 10\",\"children\":[[\"$\",\"p\",\"0\",{\"children\":\"Tools \u0026 Mini Projects\"}],[\"$\",\"p\",\"1\",{\"children\":\"Validation: Use the W3C Validator to find and fix syntax errors.\"}],[\"$\",\"p\",\"2\",{\"children\":\"DevTools: Inspect specific elements and debut layout issues in the browser.\"}],[\"$\",\"p\",\"3\",{\"children\":\"Responsiveness: Configure the Viewport meta tag for mobile devices.\"}],[\"$\",\"p\",\"4\",{\"children\":\"Project Ideas: Personal Profile, Registration Form, Blog Structure.\"}]]}]\n2f:[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"html5\",{\"itemProp\":\"keywords\",\"children\":\"html5\"}],[\"$\",\"li\",\"web-development\",{\"itemProp\":\"keywords\",\"children\":\"web-development\"}],[\"$\",\"li\",\"frontend-coding\",{\"itemProp\":\"keywords\",\"children\":\"frontend-coding\"}],[\"$\",\"li\",\"semantic-html\",{\"itemProp\":\"keywords\",\"children\":\"semantic-html\"}],[\"$\",\"li\",\"seo-best-practices\",{\"itemProp\":\"keywords\",\"children\":\"seo-best-practices\"}],[\"$\",\"li\",\"coding-tutorial\",{\"itemProp\":\"keywords\",\"children\":\"coding-tutorial\"}],[\"$\",\"li\",\"html-basics\",{\"itemProp\":\"keywords\",\"children\":\"html-basics\"}]]}]\n30:[\"$\",\"footer\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"This presentation was created with\",\" \",[\"$\",\"a\",null,{\"href\":\"https://bobr.ai\",\"itemProp\":\"url\",\"children\":\"Bobr AI\"}],\" — an AI presentation generator.\"]}],[\"$\",\"a\",null,{\"href\":\"/p/1b6845-mastering-html-html5-basics-to-professional-best-practices/md\",\"type\":\"text/markdown\",\"children\":\"View as markdown\"}]]}]\n"])</script></body></html>