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="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a 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="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a 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="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a 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="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a 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></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-fd24bd8e19d2841a.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/b133bdac07c7940e.css\",\"style\"]\n2:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/caf3ca742c7945f9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\n10:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n12:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"html\",\"d\"]\nb:[\"part\",\"part-2\",\"d\"]\nc:[\"pattern\",\"html-seofriendly-html\",\"d\"]\nd:[\"mode\",\"project\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b133bdac07c7940e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"hN8t5By7h5nzsrdSose07\",\"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__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.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/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",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\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",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-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\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);})();\"}}],[\"$\",\"$Lf\",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\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",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\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-506edbde2b5b3f55.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-6b3bda54d2fd2e14.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-09ee572e3d7819a2.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8935\",\"static/chunks/8935-c1c159349bf7da40.js\",\"9663\",\"static/chunks/9663-fdcd080af3916e3e.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-1fc9c577a9450e06.js\"],\"default\"]\n16: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\",\"position\":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\"}]}}"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",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\"},\"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,"13:[[\"$\",\"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\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"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\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/project\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:alt\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:title\",\"content\":\"SEO-friendly HTML Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"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\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>