Bird
Raised Fist0
HTMLmarkup~30 mins

SEO-friendly HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
Build a Simple SEO-friendly HTML Page
šŸ“– Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to be easy to find on search engines like Google. To do this, you will write SEO-friendly HTML that helps search engines understand the page content.
šŸŽÆ Goal: Build a basic HTML page with proper SEO tags including title, meta description, headings, and semantic structure.
šŸ“‹ What You'll Learn
Use semantic HTML5 elements like
,
, and
Add a meaningful tag inside the <head></div><div class="project-req-item">Include a <meta> description tag with a short summary</div><div class="project-req-item">Use heading tags <h1> and <h2> properly to organize content</div><div class="project-req-item">Add alt text to images for accessibility and SEO</div></div></div></div><div class="project-faq-item"><div class="project-faq-header"><span class="project-faq-title">šŸ’” Why This Matters</span><svg class="project-faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg></div><div class="project-faq-body"><div class="project-context-grid"><div class="project-context-item"><div class="project-context-label">šŸŒ Real World</div><div class="project-context-value">Creating SEO-friendly webpages helps local businesses like bakeries attract more visitors through search engines.</div></div><div class="project-context-item job"><div class="project-context-label">šŸ’¼ Career</div><div class="project-context-value">Web developers often need to write semantic, accessible, and SEO-optimized HTML to improve website visibility and user experience.</div></div></div></div></div></div><div class="project-progress"><div class="project-progress-label"><span>Progress</span><span>0<!-- --> / <!-- -->4<!-- --> steps</span></div><div class="project-progress-bar"><div class="project-progress-fill" style="width:0%"></div></div></div><div class="project-step-nav"><button class="project-step-btn active ">1</button><button class="project-step-btn ">2</button><button class="project-step-btn ">3</button><button class="project-step-btn ">4</button></div></div></article><article class="content-card project-step-container active"><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">1</div><div class="project-step-title-wrap "><div class="project-step-title">Create the basic HTML structure</div></div></div><div class="project-instruction">Write the basic HTML5 skeleton with <code>lang="en"</code> in the <code><html></code> tag, and include <code><head></code> and <code><body></code> sections. Inside the <code><body></code>, add a <code><header></code>, <code><main></code>, and <code><footer></code> element.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false"> </textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="project-hint-title mb-1">Hint</div><div class="hint-content"><p>Start with the standard HTML5 document structure. Remember to add <code>lang="en"</code> to the <code><html></code> tag for language identification.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">2</div><div class="project-step-title-wrap "><div class="project-step-title">Add SEO meta tags in the head</div></div></div><div class="project-instruction">Inside the <code><head></code> section, add a <code><title></code> tag with the text <code>"Sweet Treats Bakery"</code>. Then add a <code><meta></code> tag with <code>name="description"</code> and <code>content="Delicious homemade cakes and pastries in your neighborhood."</code>.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false"> </textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="project-hint-title mb-1">Hint</div><div class="hint-content"><p>The <code><title></code> tag shows the page title in browser tabs and search results. The <code><meta name="description"></code> helps search engines understand the page content.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">3</div><div class="project-step-title-wrap "><div class="project-step-title">Add headings and content inside main</div></div></div><div class="project-instruction">Inside the <code><main></code> element, add an <code><h1></code> heading with the text <code>"Welcome to Sweet Treats Bakery"</code>. Below it, add an <code><h2></code> heading with <code>"Our Specialties"</code>. Then add a paragraph <code><p></code> describing the bakery: <code>"We bake fresh cakes, cookies, and pastries daily."</code></div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false"> Sweet Treats Bakery </textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="project-hint-title mb-1">Hint</div><div class="hint-content"><p>Use heading tags to organize your content. The <code><h1></code> is the main title, and <code><h2></code> is a subheading. Paragraphs hold text content.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">4</div><div class="project-step-title-wrap "><div class="project-step-title">Add an image with alt text and footer content</div></div></div><div class="project-instruction">Inside the <code><main></code> element, below the paragraph, add an <code><img></code> tag with <code>src="cake.jpg"</code> and <code>alt="Chocolate cake with strawberries"</code>. Then inside the <code><footer></code>, add a paragraph with the text <code>"Ā© 2024 Sweet Treats Bakery"</code>.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false"> Sweet Treats Bakery Welcome to Sweet Treats Bakery Our Specialties We bake fresh cakes, cookies, and pastries daily. </textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="project-hint-title mb-1">Hint</div><div class="hint-content"><p>Images need descriptive <code>alt</code> text for accessibility and SEO. The footer usually contains copyright or contact info.</p></div></div></div></article></div><div><article class="content-card" id="practice"><div class="code-articles-card-header justify-content-between"><div class="d-flex align-items-center" style="gap:12px"><span class="card-icon nofill intro"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color site-fs-20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></span><h2 class="codefly-card-title mb-0 pb-0">Practice</h2></div><span class="site-fs-15">(<!-- -->1<!-- -->/<!-- -->5<!-- -->)</span></div><div class="code-articles-card-body" data-theme="light"><div class=""><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">1<!-- -->. <!-- -->Which HTML element is best for defining the main title of a webpage for SEO purposes?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><div></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><title></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><header></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><h1></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand the role of <code><h1></code> in SEO</h4>The <code><h1></code> tag defines the main heading of the page content, which search engines use to understand the page topic.</li><li><h4>Step 2: Differentiate from other tags</h4>The <code><title></code> tag sets the browser tab title but is not visible in the page body. <code><header></code> is a semantic container, and <code><div></code> is generic with no SEO meaning.</li><li><h4>Final Answer:</h4><strong><h1></strong> -> Option D</li><li><h4>Quick Check:</h4>Main page title = <h1> [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Main page title should be inside <h1> tag [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using <title> as visible page heading</li><li class="ph-mistake-item mb-0">Using <div> instead of semantic heading</li><li class="ph-mistake-item mb-0">Confusing <header> with heading tags</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">2<!-- -->. <!-- -->Which of the following is the correct way to add a meta description for SEO in HTML?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><meta content="This is my page" name="desc"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><meta description="This is my page"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><meta name="description" content="This is my page"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><meta name="desc" content="This is my page"></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall correct meta tag syntax for description</h4>The meta description tag uses <code>name="description"</code> and a <code>content</code> attribute with the description text.</li><li><h4>Step 2: Check each option's correctness</h4><code><meta name="description" content="This is my page"></code> matches the correct syntax. Options A, B, and D use incorrect attribute names or order.</li><li><h4>Final Answer:</h4><strong><meta name="description" content="This is my page"></strong> -> Option C</li><li><h4>Quick Check:</h4>Meta description = name="description" [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Meta description uses name="description" and content="..." [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using wrong attribute names like 'desc'</li><li class="ph-mistake-item mb-0">Omitting the content attribute</li><li class="ph-mistake-item mb-0">Swapping attribute order incorrectly</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">3<!-- -->. <!-- -->What will be the visible heading structure in the browser from this HTML snippet?<br/><pre><section> <h2>About Us</h2> <article> <h3>Our Mission</h3> </article> </section></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->A main heading 'About Us' and a subheading 'Our Mission' below it</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->Only one heading 'Our Mission' is visible</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->No headings are visible because they are inside section and article</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->Both headings appear but 'Our Mission' is above 'About Us'</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand semantic tags and heading display</h4>The <code><h2></code> and <code><h3></code> tags create visible headings with different sizes and importance.</li><li><h4>Step 2: Analyze the snippet structure</h4>The <code><h2>About Us</h2></code> is the main heading in the section, and <code><h3>Our Mission</h3></code> is a subheading inside the article, so both show in order.</li><li><h4>Final Answer:</h4><strong>A main heading 'About Us' and a subheading 'Our Mission' below it</strong> -> Option A</li><li><h4>Quick Check:</h4>Headings show in order and size [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Headings inside semantic tags still display visibly [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Thinking section/article hide headings</li><li class="ph-mistake-item mb-0">Assuming only one heading shows</li><li class="ph-mistake-item mb-0">Confusing heading order visually</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">4<!-- -->. <!-- -->Identify the error in this HTML snippet for SEO:<br/><pre><head> <title>My Site</title> <meta name="description" content="Welcome to my site"> <h1>Home Page</h1> </head></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->Missing <code><meta charset></code> tag</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><h1></code> should not be inside <code><head></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><title></code> tag is empty</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><meta name="description"></code> is missing content</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Review correct placement of <code><h1></code></h4>The <code><h1></code> tag is for visible page content and must be inside the <code><body></code>, not <code><head></code>.</li><li><h4>Step 2: Check other tags</h4>The <code><title></code> is correctly filled, and the meta description has content. Missing charset is not an error for SEO but recommended.</li><li><h4>Final Answer:</h4><strong><h1> should not be inside <head></strong> -> Option B</li><li><h4>Quick Check:</h4>Visible content tags go in body, not head [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Keep <h1> inside <body>, not <head> [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Placing visible tags inside <head></li><li class="ph-mistake-item mb-0">Ignoring charset meta tag importance</li><li class="ph-mistake-item mb-0">Leaving meta description empty</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">5<!-- -->. <!-- -->You want to improve SEO by organizing content semantically. Which combination of tags best structures a blog post with a title, author info, main content, and footer notes?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">hard</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><div><h1>Title</h1><div>Content</div><div>Author</div></div></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><section><h1>Title</h1><footer>Author</footer></section><article>Content</article></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><header><h1>Title</h1></header><article>Content</article><footer>Author</footer></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Identify semantic tags for blog structure</h4>The <code><article></code> tag wraps the whole blog post. Inside it, <code><header></code> holds the title, <code><section></code> contains main content, and <code><footer></code> includes author and notes.</li><li><h4>Step 2: Compare options for semantic correctness</h4><code><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></code> uses all correct semantic tags in proper order. <code><div><h1>Title</h1><div>Content</div><div>Author</div></div></code> uses generic <code><div></code> tags, which are less SEO-friendly. <code><section><h1>Title</h1><footer>Author</footer></section><article>Content</article></code> misplaces <code><article></code> outside main content. <code><header><h1>Title</h1></header><article>Content</article><footer>Author</footer></code> separates header and footer outside article, which is less clear.</li><li><h4>Final Answer:</h4><strong><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></strong> -> Option A</li><li><h4>Quick Check:</h4>Use semantic tags to organize content clearly [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Wrap blog post in <article> with header, section, footer [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using only <div> without semantic tags</li><li class="ph-mistake-item mb-0">Separating header/footer outside article</li><li class="ph-mistake-item mb-0">Misusing section and article tags</li></ul></div></div></div></div></div></div><div class="d-flex align-items-center justify-content-between mt-4"><button class="secondary-site-btn" disabled=""><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> Previous</button><div class="practice-question-toggles-wrapper"><button class="practice-question-toggle-btn active ">1</button><button class="practice-question-toggle-btn ">2</button><button class="practice-question-toggle-btn ">3</button><button class="practice-question-toggle-btn ">4</button><button class="practice-question-toggle-btn ">5</button></div><button class="secondary-site-btn">Next <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></button></div></div></article></div><div id="mock" class="mtc-wrapper"><div class="mtc-card-container"><div class="mtc-card pulse-effect"><span class="mtc-recommended-badge">Recommended</span><div class="mtc-icon-wrap"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" color="#fff" style="color:#fff" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></div><h4 class="mtc-heading">Ready to prove it?</h4><p class="mtc-sub">Pass the test and this pattern moves <span class="mtc-state-pill">unknown</span> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> <span class="mtc-state-pill good">strong</span> <span class="d-inline-block">while earning <span class="weight-800">+1 Grip</span></span> toward your certificate.</p><div class="mtc-pills"><span class="mtc-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>10 questions</span><span class="mtc-pill"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>~5 min</span><span class="mtc-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>easy <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> hard</span></div><div class="mtc-cta-wrap"><button type="button" class="mtc-cta-btn">Take the Test <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg></button></div></div></div></div></div></main><div class="rpi-float-wrap"><button type="button" class="rpi-float-btn" aria-label="Report an issue"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg><span class="rpi-float-label">Report Issue</span></button></div></div><div style="display:none"><div id="ad-management-config-settings" data-blocklist-all="1"></div></div> <script src="/_next/static/chunks/webpack-28170116499ad51b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/d071dca61fbb01bf.css\",\"style\"]\n2:HL[\"/_next/static/css/907864b6faf28c32.css\",\"style\"]\n3:HL[\"/_next/static/css/ada9a246b4e9c7f9.css\",\"style\"]\n4:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n5:HL[\"/_next/static/css/c478212c00f26f15.css\",\"style\"]\n6:HL[\"/_next/static/css/989afc350a4b3a28.css\",\"style\"]\n7:HL[\"/_next/static/css/ccfdf35169bd162c.css\",\"style\"]\n8:HL[\"/_next/static/css/417e7aee3e688b57.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"9:I[95751,[],\"\"]\nc:I[39275,[],\"\"]\n12:I[61343,[],\"\"]\n13:I[84080,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"\"]\n14:I[88726,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"Toaster\"]\n15:I[20154,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"3154\",\"static/chunks/3154-0aa2f15561902c10.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"4662\",\"static/chunks/4662-1ac1c089600dcc35.js\",\"9160\",\"static/chunks/app/not-found-b9aad74520590312.js\"],\"default\"]\n16:I[78598,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n17:I[56192,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n19:I[76130,[],\"\"]\nd:[\"lang\",\"en\",\"d\"]\ne:[\"subject\",\"html\",\"d\"]\nf:[\"part\",\"part-2\",\"d\"]\n10:[\"pattern\",\"html-seofriendly-html\",\"d\"]\n11:[\"mode\",\"project\",\"oc\"]\n1a:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d071dca61fbb01bf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/907864b6faf28c32.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"buildId\":\"leyaa-prod-build-id\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/html/part-2/html-seofriendly-html/project\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"html-seofriendly-html\",\"d\"],{\"children\":[[\"mode\",\"project\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"html-seofriendly-html\",\"d\"],{\"children\":[[\"mode\",\"project\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$La\",\"$Lb\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ada9a246b4e9c7f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/989afc350a4b3a28.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ccfdf35169bd162c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/417e7aee3e688b57.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$L13\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-18214378714\"}],[\"$\",\"$L13\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-18214378714');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$L13\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"$L13\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L15\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L16\",null,{}],\" \",[\"$\",\"$L17\",null,{}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L18\"],\"globalErrorComponent\":\"$19\",\"missingSlots\":\"$W1a\"}]]\n"])</script><script>self.__next_f.push([1,"1c:I[43489,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6051\",\"static/chunks/795d4814-8b40e2eae05948ca.js\",\"5706\",\"static/chunks/9c4e2130-0ef90d15550fcb15.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7699\",\"static/chunks/8e1d74a4-d3c1e3cfb4eeea98.js\",\"7240\",\"static/chunks/53c13509-a3e4ac0640ae03f2.js\",\"9956\",\"static/chunks/ee560e2c-27ba7a66c659fa82.js\",\"2516\",\"static/chunks/f7333993-31ab72eb9b202e3d.js\",\"1779\",\"static/chunks/0e762574-cee3ec2351d97ca0.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"4889\",\"static/chunks/4889-de8d1c4f2ff2f134.js\",\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"7534\",\"static/chunks/7534-02c906a11e681445.js\",\"4220\",\"static/chunks/4220-e3c1264f6e3453a7.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"6857\",\"static/chunks/6857-f9121be732678b30.js\",\"2202\",\"static/chunks/2202-dad5d33fadc7ea73.js\",\"1786\",\"static/chunks/1786-7253d5c3df8362c5.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-b11550cd55444a64.js\"],\"default\"]\n1b:T425,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"SEO-friendly HTML - Mini Project: Build \u0026 Apply\",\"description\":\"Apply SEO-friendly HTML in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\",\"learningResourceType\":\"Practice Exercise\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"SEO-friendly HTML - Mini Project: Build \u0026 Apply\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"pos"])</script><script>self.__next_f.push([1,"ition\":2,\"name\":\"SEO-friendly HTML - Mini Project: Build \u0026 Apply\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Project\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}]}}1d:T64e,\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Identify semantic tags for blog structure\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;article\u0026gt;\u003c/code\u003e tag wraps the whole blog post. Inside it, \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e holds the title, \u003ccode\u003e\u0026lt;section\u0026gt;\u003c/code\u003e contains main content, and \u003ccode\u003e\u0026lt;footer\u0026gt;\u003c/code\u003e includes author and notes.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Compare options for semantic correctness\u003c/h4\u003e\u003ccode\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/code\u003e uses all correct semantic tags in proper order. \u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;div\u0026gt;Content\u0026lt;/div\u0026gt;\u0026lt;div\u0026gt;Author\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e uses generic \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e tags, which are less SEO-friendly. \u003ccode\u003e\u0026lt;section\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u0026lt;/section\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u003c/code\u003e misplaces \u003ccode\u003e\u0026lt;article\u0026gt;\u003c/code\u003e outside main content. \u003ccode\u003e\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u003c/code\u003e separates header and footer outside article, which is less clear.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eUse semantic tags to organize content clearly [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e"])</script><script>self.__next_f.push([1,"b:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1b\"}}]],[\"$\",\"$L1c\",null,{\"subject\":\"html\",\"dbSubject\":\"html\",\"part\":\"part-2\",\"pattern\":\"html_seofriendly_html\",\"modeSlug\":\"project\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"šŸ“– Learn\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"šŸ’” Why Learn This\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"šŸ’” Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"āœļø Try It\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"šŸ‘ Visualize\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"ā± Complexity\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"šŸ† Challenge\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"šŸ“ Project\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/project\",\"active\":true},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"SEO-friendly HTML - Mini Project: Build \u0026 Apply\",\"contentData\":{\"pattern_id\":\"html_seofriendly_html\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"PMC\":{\"project_title\":\"Build a Simple SEO-friendly HTML Page\",\"mode\":\"PMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"difficulty\":\"beginner\",\"scenario\":\"\u003cp\u003eYou are creating a simple webpage for a local bakery. The bakery wants the page to be easy to find on search engines like Google. To do this, you will write SEO-friendly HTML that helps search engines understand the page content.\u003c/p\u003e\",\"goal\":\"\u003cp\u003eBuild a basic HTML page with proper SEO tags including title, meta description, headings, and semantic structure.\u003c/p\u003e\",\"requirements\":[\"Use semantic HTML5 elements like \u003cheader\u003e, \u003cmain\u003e, and \u003cfooter\u003e\",\"Add a meaningful \u003ctitle\u003e tag inside the \u003chead\u003e\",\"Include a \u003cmeta\u003e description tag with a short summary\",\"Use heading tags \u003ch1\u003e and \u003ch2\u003e properly to organize content\",\"Add alt text to images for accessibility and SEO\"],\"steps\":[{\"step_number\":1,\"title\":\"Create the basic HTML structure\",\"instruction\":\"Write the basic HTML5 skeleton with \u003ccode\u003elang=\\\"en\\\"\u003c/code\u003e in the \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e tag, and include \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e sections. Inside the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, add a \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e, and \u003ccode\u003e\u0026lt;footer\u0026gt;\u003c/code\u003e element.\",\"starter_code\":\"\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\u003c!-- Your code here --\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003c!DOCTYPE html\u003e\",\"\u003chtml lang=\\\"en\\\"\u003e\",\"\u003chead\u003e\",\"\u003cbody\u003e\",\"\u003cheader\u003e\",\"\u003cmain\u003e\",\"\u003cfooter\u003e\"],\"hint\":\"\u003cp\u003eStart with the standard HTML5 document structure. Remember to add \u003ccode\u003elang=\\\"en\\\"\u003c/code\u003e to the \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e tag for language identification.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":2,\"title\":\"Add SEO meta tags in the head\",\"instruction\":\"Inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section, add a \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag with the text \u003ccode\u003e\\\"Sweet Treats Bakery\\\"\u003c/code\u003e. Then add a \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e tag with \u003ccode\u003ename=\\\"description\\\"\u003c/code\u003e and \u003ccode\u003econtent=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003c/code\u003e.\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003c!-- Add title and meta description here --\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\",\"\u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\"],\"hint\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag shows the page title in browser tabs and search results. The \u003ccode\u003e\u0026lt;meta name=\\\"description\\\"\u0026gt;\u003c/code\u003e helps search engines understand the page content.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":3,\"title\":\"Add headings and content inside main\",\"instruction\":\"Inside the \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e element, add an \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e heading with the text \u003ccode\u003e\\\"Welcome to Sweet Treats Bakery\\\"\u003c/code\u003e. Below it, add an \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e heading with \u003ccode\u003e\\\"Our Specialties\\\"\u003c/code\u003e. Then add a paragraph \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e describing the bakery: \u003ccode\u003e\\\"We bake fresh cakes, cookies, and pastries daily.\\\"\u003c/code\u003e\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n \u003c!-- Add h1, h2, and paragraph here --\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n \u003ch1\u003eWelcome to Sweet Treats Bakery\u003c/h1\u003e\\n \u003ch2\u003eOur Specialties\u003c/h2\u003e\\n \u003cp\u003eWe bake fresh cakes, cookies, and pastries daily.\u003c/p\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003ch1\u003eWelcome to Sweet Treats Bakery\u003c/h1\u003e\",\"\u003ch2\u003eOur Specialties\u003c/h2\u003e\",\"\u003cp\u003eWe bake fresh cakes, cookies, and pastries daily.\u003c/p\u003e\"],\"hint\":\"\u003cp\u003eUse heading tags to organize your content. The \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e is the main title, and \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e is a subheading. Paragraphs hold text content.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":4,\"title\":\"Add an image with alt text and footer content\",\"instruction\":\"Inside the \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e element, below the paragraph, add an \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tag with \u003ccode\u003esrc=\\\"cake.jpg\\\"\u003c/code\u003e and \u003ccode\u003ealt=\\\"Chocolate cake with strawberries\\\"\u003c/code\u003e. Then inside the \u003ccode\u003e\u0026lt;footer\u0026gt;\u003c/code\u003e, add a paragraph with the text \u003ccode\u003e\\\"Ā© 2024 Sweet Treats Bakery\\\"\u003c/code\u003e.\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n \u003ch1\u003eWelcome to Sweet Treats Bakery\u003c/h1\u003e\\n \u003ch2\u003eOur Specialties\u003c/h2\u003e\\n \u003cp\u003eWe bake fresh cakes, cookies, and pastries daily.\u003c/p\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n \u003ch1\u003eWelcome to Sweet Treats Bakery\u003c/h1\u003e\\n \u003ch2\u003eOur Specialties\u003c/h2\u003e\\n \u003cp\u003eWe bake fresh cakes, cookies, and pastries daily.\u003c/p\u003e\\n \u003c!-- Add image with alt text here --\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n \u003c!-- Add footer paragraph here --\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eSweet Treats Bakery\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Delicious homemade cakes and pastries in your neighborhood.\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cheader\u003e\\n\u003c/header\u003e\\n\u003cmain\u003e\\n \u003ch1\u003eWelcome to Sweet Treats Bakery\u003c/h1\u003e\\n \u003ch2\u003eOur Specialties\u003c/h2\u003e\\n \u003cp\u003eWe bake fresh cakes, cookies, and pastries daily.\u003c/p\u003e\\n \u003cimg src=\\\"cake.jpg\\\" alt=\\\"Chocolate cake with strawberries\\\"\u003e\\n\u003c/main\u003e\\n\u003cfooter\u003e\\n \u003cp\u003eĀ© 2024 Sweet Treats Bakery\u003c/p\u003e\\n\u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003cimg src=\\\"cake.jpg\\\" alt=\\\"Chocolate cake with strawberries\\\"\u003e\",\"\u003cfooter\u003e\",\"\u003cp\u003eĀ© 2024 Sweet Treats Bakery\u003c/p\u003e\"],\"hint\":\"\u003cp\u003eImages need descriptive \u003ccode\u003ealt\u003c/code\u003e text for accessibility and SEO. The footer usually contains copyright or contact info.\u003c/p\u003e\",\"timeout_seconds\":5}],\"final_expected_output\":\"A complete HTML5 page with language set to English, a meaningful title and meta description in the head, semantic structure using header, main, and footer, headings organizing the content, a descriptive paragraph, an image with alt text, and a footer paragraph with copyright information.\",\"summary\":[\"You learned how to create a basic HTML5 page structure with semantic elements.\",\"You added SEO-friendly tags like title and meta description to help search engines.\",\"You used heading tags to organize content clearly for both users and search engines.\",\"You included alt text on images to improve accessibility and SEO.\",\"You structured footer content properly for a complete webpage.\"],\"extensions\":[\"Add navigation links inside the header using a \u003cnav\u003e element with accessible labels.\",\"Include Open Graph meta tags for better social media sharing previews.\",\"Make the page responsive using CSS media queries to look good on phones and tablets.\"],\"project_context\":{\"real_world_use\":\"Creating SEO-friendly webpages helps local businesses like bakeries attract more visitors through search engines.\",\"job_relevance\":\"Web developers often need to write semantic, accessible, and SEO-optimized HTML to improve website visibility and user experience.\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"markup\",\"total_steps\":4,\"estimated_time_minutes\":30}}},\"subject\":\"html\",\"title\":\"SEO-friendly HTML\",\"puzzleDetails\":[{\"_id\":\"69b1785045baa2b585460070\",\"question_number\":1,\"question\":\"Which HTML element is best for defining the main title of a webpage for SEO purposes?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"D\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand the role of \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e in SEO\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e tag defines the main heading of the page content, which search engines use to understand the page topic.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Differentiate from other tags\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag sets the browser tab title but is not visible in the page body. \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e is a semantic container, and \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is generic with no SEO meaning.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;h1\u0026gt;\u003c/strong\u003e -\u003e Option D\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMain page title = \u0026lt;h1\u0026gt; [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Main page title should be inside \u003ch1\u003e tag [OK]\",\"common_mistakes\":[\"Using \u003ctitle\u003e as visible page heading\",\"Using \u003cdiv\u003e instead of semantic heading\",\"Confusing \u003cheader\u003e with heading tags\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"conceptual\",\"difficulty\":\"easy\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"conceptual\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-07-25T04:06:03.520Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460071\",\"question_number\":2,\"question\":\"Which of the following is the correct way to add a meta description for SEO in HTML?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;meta content=\\\"This is my page\\\" name=\\\"desc\\\"\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;meta description=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;meta name=\\\"desc\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"C\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall correct meta tag syntax for description\u003c/h4\u003eThe meta description tag uses \u003ccode\u003ename=\\\"description\\\"\u003c/code\u003e and a \u003ccode\u003econtent\u003c/code\u003e attribute with the description text.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check each option's correctness\u003c/h4\u003e\u003ccode\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e matches the correct syntax. Options A, B, and D use incorrect attribute names or order.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/strong\u003e -\u003e Option C\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMeta description = name=\\\"description\\\" [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Meta description uses name=\\\"description\\\" and content=\\\"...\\\" [OK]\",\"common_mistakes\":[\"Using wrong attribute names like 'desc'\",\"Omitting the content attribute\",\"Swapping attribute order incorrectly\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"syntax\",\"difficulty\":\"easy\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"syntax\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-08-07T01:55:17.299Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460072\",\"question_number\":3,\"question\":\"What will be the visible heading structure in the browser from this HTML snippet?\u003cbr\u003e\u003cpre\u003e\u0026lt;section\u0026gt;\\n \u0026lt;h2\u0026gt;About Us\u0026lt;/h2\u0026gt;\\n \u0026lt;article\u0026gt;\\n \u0026lt;h3\u0026gt;Our Mission\u0026lt;/h3\u0026gt;\\n \u0026lt;/article\u0026gt;\\n\u0026lt;/section\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"A main heading 'About Us' and a subheading 'Our Mission' below it\",\"B\":\"Only one heading 'Our Mission' is visible\",\"C\":\"No headings are visible because they are inside section and article\",\"D\":\"Both headings appear but 'Our Mission' is above 'About Us'\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand semantic tags and heading display\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;h3\u0026gt;\u003c/code\u003e tags create visible headings with different sizes and importance.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Analyze the snippet structure\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h2\u0026gt;About Us\u0026lt;/h2\u0026gt;\u003c/code\u003e is the main heading in the section, and \u003ccode\u003e\u0026lt;h3\u0026gt;Our Mission\u0026lt;/h3\u0026gt;\u003c/code\u003e is a subheading inside the article, so both show in order.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eA main heading 'About Us' and a subheading 'Our Mission' below it\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eHeadings show in order and size [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Headings inside semantic tags still display visibly [OK]\",\"common_mistakes\":[\"Thinking section/article hide headings\",\"Assuming only one heading shows\",\"Confusing heading order visually\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"rendering\",\"difficulty\":\"medium\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"rendering\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-07-06T07:05:26.889Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460073\",\"question_number\":4,\"question\":\"Identify the error in this HTML snippet for SEO:\u003cbr\u003e\u003cpre\u003e\u0026lt;head\u0026gt;\\n \u0026lt;title\u0026gt;My Site\u0026lt;/title\u0026gt;\\n \u0026lt;meta name=\\\"description\\\" content=\\\"Welcome to my site\\\"\u0026gt;\\n \u0026lt;h1\u0026gt;Home Page\u0026lt;/h1\u0026gt;\\n\u0026lt;/head\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"Missing \u003ccode\u003e\u0026lt;meta charset\u0026gt;\u003c/code\u003e tag\",\"B\":\"\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e should not be inside \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is empty\",\"D\":\"\u003ccode\u003e\u0026lt;meta name=\\\"description\\\"\u0026gt;\u003c/code\u003e is missing content\"},\"correct_answer\":[\"B\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Review correct placement of \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e tag is for visible page content and must be inside the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, not \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check other tags\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e is correctly filled, and the meta description has content. Missing charset is not an error for SEO but recommended.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;h1\u0026gt; should not be inside \u0026lt;head\u0026gt;\u003c/strong\u003e -\u003e Option B\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eVisible content tags go in body, not head [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Keep \u003ch1\u003e inside \u003cbody\u003e, not \u003chead\u003e [OK]\",\"common_mistakes\":[\"Placing visible tags inside \u003chead\u003e\",\"Ignoring charset meta tag importance\",\"Leaving meta description empty\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"debug\",\"difficulty\":\"medium\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"debug\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-08-15T09:26:23.581Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460074\",\"question_number\":5,\"question\":\"You want to improve SEO by organizing content semantically. Which combination of tags best structures a blog post with a title, author info, main content, and footer notes?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;div\u0026gt;Content\u0026lt;/div\u0026gt;\u0026lt;div\u0026gt;Author\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;section\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u0026lt;/section\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"$1d\",\"quick_trick\":\"Wrap blog post in \u003carticle\u003e with header, section, footer [OK]\",\"common_mistakes\":[\"Using only \u003cdiv\u003e without semantic tags\",\"Separating header/footer outside article\",\"Misusing section and article tags\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"application\",\"difficulty\":\"hard\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"application\",\"level\":\"hard\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"html_p2_t5\"}]},\"syllabusData\":{\"part\":\"part-2\",\"subject\":\"html\",\"difficulty\":\"intermediate\",\"metadata\":{\"total_topics\":5,\"total_patterns\":31,\"patterns_with_content\":31,\"created_at\":\"2026-02-28T20:17:21.804063Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Forms, Semantics \u0026 Accessibility\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p2_t1\",\"title\":\"Forms \u0026 Input Elements\",\"order\":1,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"html_purpose_of_forms\",\"title\":\"Purpose of forms\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_form_structure\",\"title\":\"Form structure\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_input_types_text_email_password_number\",\"title\":\"Input types (text, email, password, number)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_labels_and_placeholders\",\"title\":\"Labels and placeholders\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_radio_buttons_and_checkboxes\",\"title\":\"Radio buttons and checkboxes\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_select_dropdown\",\"title\":\"Select dropdown\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_textarea\",\"title\":\"Textarea\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"html_form_submission_basics\",\"title\":\"Form submission basics\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"html_p2_t2\",\"title\":\"HTML Attributes\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_are_attributes\",\"title\":\"What are attributes\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_global_attributes\",\"title\":\"Global attributes\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_id_attribute\",\"title\":\"ID attribute\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_class_attribute\",\"title\":\"Class attribute\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_title_attribute\",\"title\":\"Title attribute\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_data_attributes\",\"title\":\"Data attributes\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_attribute_best_practices\",\"title\":\"Attribute best practices\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p2_t3\",\"title\":\"Semantic HTML\",\"order\":3,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_why_semantic_html_matters\",\"title\":\"Why semantic HTML matters\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_header_footer_main\",\"title\":\"Header, footer, main\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_section_and_article\",\"title\":\"Section and article\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nav_element\",\"title\":\"Nav element\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_aside_element\",\"title\":\"Aside element\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_semantic_vs_nonsemantic_elements\",\"title\":\"Semantic vs non-semantic elements\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p2_t4\",\"title\":\"Accessibility Basics\",\"order\":4,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_why_accessibility_matters\",\"title\":\"Why accessibility matters\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_alt_text_for_images\",\"title\":\"Alt text for images\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_label_association\",\"title\":\"Label association\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_semantic_elements_and_screen_readers\",\"title\":\"Semantic elements and screen readers\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_keyboard_navigation_basics\",\"title\":\"Keyboard navigation basics\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p2_t5\",\"title\":\"HTML Best Practices\",\"order\":5,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_clean_html_structure\",\"title\":\"Clean HTML structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_proper_indentation\",\"title\":\"Proper indentation\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_avoiding_deprecated_tags\",\"title\":\"Avoiding deprecated tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_seofriendly_html\",\"title\":\"SEO-friendly HTML\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_html_validation_tools\",\"title\":\"HTML validation tools\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"PMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Apply SEO-friendly HTML in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"12\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Leyaa\"}],[\"$\",\"meta\",\"18\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:title\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Apply SEO-friendly HTML in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:alt\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Apply SEO-friendly HTML in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"35\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://leyaa.ai/Assets/Favicons/apple-touch-icon.png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script></body></html>