Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to create a basic HTML page structure.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[1]</title> </head> <body> <h1>Welcome to my website</h1> </body> </html>
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Putting tags like inside the title tag instead of text.</div><div class="mistake-item">Leaving the title tag empty.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code><title></code> tag sets the page title shown in the browser tab. Here, "My Website" is the correct title text.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-1"><div class="task-card " id="try-t2" data-blank-count="1"><div class="task-header"><div class="task-badge"><span class="task-number">2</span><span class="task-type">fill in blank</span></div><span class="task-difficulty medium">medium</span></div><p class="task-instruction text-pre-wrap ">Complete the code to add a paragraph inside the body.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t2"><body>
<span class="code-blank" data-blank="1" data-task="t2">[1]</span>
</body></pre></div><div class="blank-selection-hint" id="hint-select-t2"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t2"><div class="fill-option " draggable="true" data-key="A" data-task="t2"><span class="option-key">A</span><header>Title</header></div><div class="fill-option " draggable="true" data-key="B" data-task="t2"><span class="option-key">B</span><p>This is a paragraph.</p></div><div class="fill-option " draggable="true" data-key="C" data-task="t2"><span class="option-key">C</span><span>Text</span></div><div class="fill-option " draggable="true" data-key="D" data-task="t2"><span class="option-key">D</span><div>Hello</div></div></div><button class="verify-btn" id="verifyBtn-t2" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t2"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t2">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t2"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t2"></div></div><div class="mistakes-box d-none" id="mistakes-t2"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using <div> or <span> instead of <p> for paragraphs.</div><div class="mistake-item">Placing paragraph text outside the body tag.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code><p></code> tag is used to add paragraphs in HTML. It is the correct choice to add a paragraph inside the body.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-2"><div class="task-card " id="try-t3" data-blank-count="1"><div class="task-header"><div class="task-badge"><span class="task-number">3</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fix the error in the code by completing the missing tag.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t3"><html lang=<span class="hl-str">"en"</span>>
<head>
<meta charset=<span class="hl-str">"UTF-8"</span>>
<title>Page Title</title>
</head>
<span class="code-blank" data-blank="1" data-task="t3">[1]</span>
<h1>Heading</h1>
</body>
</html></pre></div><div class="blank-selection-hint" id="hint-select-t3"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t3"><div class="fill-option " draggable="true" data-key="A" data-task="t3"><span class="option-key">A</span><section></div><div class="fill-option " draggable="true" data-key="B" data-task="t3"><span class="option-key">B</span><head></div><div class="fill-option " draggable="true" data-key="C" data-task="t3"><span class="option-key">C</span><footer></div><div class="fill-option " draggable="true" data-key="D" data-task="t3"><span class="option-key">D</span><body></div></div><button class="verify-btn" id="verifyBtn-t3" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t3"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t3">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t3"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t3"></div></div><div class="mistakes-box d-none" id="mistakes-t3"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using <head> again instead of <body>.</div><div class="mistake-item">Using <footer> or <section> tags incorrectly here.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code><body></code> tag is missing and is needed to wrap the visible content of the page.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-3"><div class="task-card " id="try-t4" data-blank-count="2"><div class="task-header"><div class="task-badge"><span class="task-number">4</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fill both blanks to create a link that opens in a new tab.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t4"><a href=<span class="hl-str">"</span><span class="code-blank" data-blank="1" data-task="t4">[1]</span><span class="hl-str">" </span><span class="code-blank" data-blank="2" data-task="t4">[2]</span>>Visit OpenAI</a></pre></div><div class="blank-selection-hint" id="hint-select-t4"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t4"><div class="fill-option " draggable="true" data-key="A" data-task="t4"><span class="option-key">A</span>https://openai.com</div><div class="fill-option " draggable="true" data-key="B" data-task="t4"><span class="option-key">B</span>target="_blank"</div><div class="fill-option " draggable="true" data-key="C" data-task="t4"><span class="option-key">C</span>rel="noopener"</div><div class="fill-option " draggable="true" data-key="D" data-task="t4"><span class="option-key">D</span>href="openai.com"</div></div><button class="verify-btn" id="verifyBtn-t4" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t4"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t4">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t4"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t4"></div></div><div class="mistakes-box d-none" id="mistakes-t4"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Using a URL without https:// in href.</div><div class="mistake-item">Forgetting target="_blank" to open in a new tab.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code>href</code> attribute sets the link URL. The <code>target="_blank"</code> attribute makes the link open in a new tab.</p></div></div></div></div><div class="puzzle-container " id="puzzle-fill_in_blank-4"><div class="task-card " id="try-t5" data-blank-count="3"><div class="task-header"><div class="task-badge"><span class="task-number">5</span><span class="task-type">fill in blank</span></div><span class="task-difficulty hard">hard</span></div><p class="task-instruction text-pre-wrap ">Fill all three blanks to create an accessible image with alternative text.</p><div class="code-block"><div class="code-header"><span class="code-title">HTML</span></div><pre class="code-content" id="code-t5"><img src=<span class="hl-str">"</span><span class="code-blank" data-blank="1" data-task="t5">[1]</span><span class="hl-str">" alt="</span><span class="code-blank" data-blank="2" data-task="t5">[2]</span><span class="hl-str">" width="</span><span class="code-blank" data-blank="3" data-task="t5">[3]</span><span class="hl-str">"></span></pre></div><div class="blank-selection-hint" id="hint-select-t5"><span class="d-flex align-items-center justify-content-center flex-wrap gap-1 line-height-normal"><span class="new-material-symbols icon-hw-22"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M480-240q-76.33 0-138.83-43.5-62.5-43.5-87.5-115.83-4-12 2-23.34 6-11.33 19-15.33 13-4.33 25.83 2.17 12.83 6.5 18.83 20.83 19.67 49 63.34 78.67 43.66 29.66 97.33 29.66 72 0 122.67-50.66Q653.33-408 653.33-480q0-53-29.83-96.83-29.83-43.84-78.83-63.5-14.67-6-20.67-18.84-6-12.83-1.67-25.83 4.34-13 15.5-19 11.17-6 23.17-2 71 25 115 87.17 44 62.16 44 138.83 0 100-70 170t-170 70Zm0 160q-161.33 0-277.33-110.67-116-110.66-123-271.33-.34-13.33 8.83-23t22.83-10.67q13.67-1 24.5 8.84 10.84 9.83 12.17 24.5 12.67 138 106.17 226.83 93.5 88.83 225.83 88.83 139.33 0 236.33-97t97-236.33q0-133.67-90-228.17T496.67-812q-14.67-1.33-23.84-11.67-9.16-10.33-8.83-24.66.33-13.67 10-22.67 9.67-9 23-8.67 80 3 149.83 36 69.84 33 121.5 87.17Q820-702.33 850-631.17 880-560 880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-97.33-420-132-131-33.34 101Q213-518 201-518.5q-12-.5-15.67-12.5L89.67-850q-2.67-9.33 4.5-16.5 7.16-7.17 16.5-4.5l319 95.67q12 3.66 12.5 15.66t-11.5 16.34l-101 33.33 132 132q17 17 17 39t-17 39q-17 17-39.5 17t-39.5-17Z"></path></svg></span> Drag options to blanks, or click blank then click option'</span></div><div class="fill-options" id="fillOptions-t5"><div class="fill-option " draggable="true" data-key="A" data-task="t5"><span class="option-key">A</span>logo.png</div><div class="fill-option " draggable="true" data-key="B" data-task="t5"><span class="option-key">B</span>Company logo</div><div class="fill-option " draggable="true" data-key="C" data-task="t5"><span class="option-key">C</span>200</div><div class="fill-option " draggable="true" data-key="D" data-task="t5"><span class="option-key">D</span>image.jpg</div></div><button class="verify-btn" id="verifyBtn-t5" disabled=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"></path></svg>Verify Answer</button><div class="attempts-counter" id="attempts-t5"><span>Attempts:</span><div class="attempts-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span id="attemptsLeft-t5">3<!-- --> left</span></div><div class="hint-box d-none" id="hint-t5"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text" id="hintText-t5"></div></div><div class="mistakes-box d-none" id="mistakes-t5"><div class="mistakes-box-title">Common Mistakes</div><div class="mistakes-list"><div class="mistake-item">Leaving alt attribute empty or missing.</div><div class="mistake-item">Using incorrect file names in src.</div><div class="mistake-item">Not specifying width or using invalid values.</div></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code>src</code> attribute points to the image file. The <code>alt</code> attribute provides descriptive text for screen readers. The <code>width</code> sets the image width in pixels.</p></div></div></div></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-1\",\"d\"]\nc:[\"pattern\",\"html-role-of-html-in-web-development\",\"d\"]\nd:[\"mode\",\"try\",\"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-1/html-role-of-html-in-web-development/try\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-role-of-html-in-web-development\",\"d\"],{\"children\":[[\"mode\",\"try\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-role-of-html-in-web-development\",\"d\"],{\"children\":[[\"mode\",\"try\",\"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:T48f,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Role of HTML in web development - Interactive Code Practice\",\"description\":\"Practice Role of HTML in web development with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\",\"learningResourceType\":\"Practice Exercise\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Role of HTML in web development - Interactive Code Practice\",\"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\":\"Role of HTML in web development - Interactive Code Practice\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Try It\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\"}]}}"])</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-1\",\"pattern\":\"html_role_of_html_in_web_development\",\"modeSlug\":\"try\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\",\"active\":true},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-1/html-role-of-html-in-web-development/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Role of HTML in web development - Interactive Code Practice\",\"contentData\":{\"pattern_id\":\"html_role_of_html_in_web_development\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"TMC\":{\"topic\":\"Role of HTML in web development\",\"mode\":\"TMC_v5\",\"language\":\"html\",\"content_type\":\"Web Development\",\"tasks\":[{\"id\":\"t1\",\"type\":\"fill_in_blank\",\"difficulty\":\"easy\",\"instruction\":\"Complete the code to create a basic HTML page structure.\",\"code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003e{{BLANK_1}}\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003ch1\u003eWelcome to my website\u003c/h1\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"options\":{\"A\":\"My Website\",\"B\":\"\u003ctitle\u003e\",\"C\":\"header\",\"D\":\"content\"},\"correct_answer\":[\"A\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag sets the page title shown in the browser tab. Here, \\\"My Website\\\" is the correct title text.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The title tag needs text that describes the page.\"},{\"level\":2,\"hint\":\"Think about what you want the browser tab to show.\"}],\"common_mistakes\":[\"Putting tags like \u003ctitle\u003e inside the title tag instead of text.\",\"Leaving the title tag empty.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t2\",\"type\":\"fill_in_blank\",\"difficulty\":\"medium\",\"instruction\":\"Complete the code to add a paragraph inside the body.\",\"code\":\"\u003cbody\u003e\\n {{BLANK_1}}\\n\u003c/body\u003e\",\"options\":{\"A\":\"\u003cheader\u003eTitle\u003c/header\u003e\",\"B\":\"\u003cp\u003eThis is a paragraph.\u003c/p\u003e\",\"C\":\"\u003cspan\u003eText\u003c/span\u003e\",\"D\":\"\u003cdiv\u003eHello\u003c/div\u003e\"},\"correct_answer\":[\"B\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e tag is used to add paragraphs in HTML. It is the correct choice to add a paragraph inside the body.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"Paragraphs use the \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e tag.\"},{\"level\":2,\"hint\":\"Other tags like \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e or \u003ccode\u003e\u0026lt;span\u0026gt;\u003c/code\u003e are for different purposes.\"}],\"common_mistakes\":[\"Using \u003cdiv\u003e or \u003cspan\u003e instead of \u003cp\u003e for paragraphs.\",\"Placing paragraph text outside the body tag.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t3\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fix the error in the code by completing the missing tag.\",\"code\":\"\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n{{BLANK_1}}\\n \u003ch1\u003eHeading\u003c/h1\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"options\":{\"A\":\"\u003csection\u003e\",\"B\":\"\u003chead\u003e\",\"C\":\"\u003cfooter\u003e\",\"D\":\"\u003cbody\u003e\"},\"correct_answer\":[\"D\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tag is missing and is needed to wrap the visible content of the page.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The visible content goes inside the body tag.\"},{\"level\":2,\"hint\":\"The head tag is already present, so the missing tag is the body.\"}],\"common_mistakes\":[\"Using \u003chead\u003e again instead of \u003cbody\u003e.\",\"Using \u003cfooter\u003e or \u003csection\u003e tags incorrectly here.\"],\"max_attempts\":3,\"time_limit_seconds\":120},{\"id\":\"t4\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fill both blanks to create a link that opens in a new tab.\",\"code\":\"\u003ca href=\\\"{{BLANK_1}}\\\" {{BLANK_2}}\u003eVisit OpenAI\u003c/a\u003e\",\"options\":{\"A\":\"https://openai.com\",\"B\":\"target=\\\"_blank\\\"\",\"C\":\"rel=\\\"noopener\\\"\",\"D\":\"href=\\\"openai.com\\\"\"},\"correct_answer\":[\"A\",\"B\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003ehref\u003c/code\u003e attribute sets the link URL. The \u003ccode\u003etarget=\\\"_blank\\\"\u003c/code\u003e attribute makes the link open in a new tab.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The href attribute needs a full URL starting with https://.\"},{\"level\":2,\"hint\":\"To open links in a new tab, use target=\\\"_blank\\\".\"}],\"common_mistakes\":[\"Using a URL without https:// in href.\",\"Forgetting target=\\\"_blank\\\" to open in a new tab.\"],\"max_attempts\":3,\"time_limit_seconds\":180},{\"id\":\"t5\",\"type\":\"fill_in_blank\",\"difficulty\":\"hard\",\"instruction\":\"Fill all three blanks to create an accessible image with alternative text.\",\"code\":\"\u003cimg src=\\\"{{BLANK_1}}\\\" alt=\\\"{{BLANK_2}}\\\" width=\\\"{{BLANK_3}}\\\"\u003e\",\"options\":{\"A\":\"logo.png\",\"B\":\"Company logo\",\"C\":\"200\",\"D\":\"image.jpg\"},\"correct_answer\":[\"A\",\"B\",\"C\"],\"answer_explanation\":\"\u003cp\u003eThe \u003ccode\u003esrc\u003c/code\u003e attribute points to the image file. The \u003ccode\u003ealt\u003c/code\u003e attribute provides descriptive text for screen readers. The \u003ccode\u003ewidth\u003c/code\u003e sets the image width in pixels.\u003c/p\u003e\",\"hints\":[{\"level\":1,\"hint\":\"The src attribute needs the image file name.\"},{\"level\":2,\"hint\":\"The alt text should describe the image for accessibility.\"}],\"common_mistakes\":[\"Leaving alt attribute empty or missing.\",\"Using incorrect file names in src.\",\"Not specifying width or using invalid values.\"],\"max_attempts\":3,\"time_limit_seconds\":180}],\"learning_checkpoint\":{\"after_task\":3,\"micro_summary\":\"\u003cp\u003eYou have learned how HTML structures a webpage with tags like \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, and how to add text, links, and images properly. This is the foundation of web development.\u003c/p\u003e\"},\"metadata\":{\"version\":\"5.0\",\"content_type\":\"markup\",\"total_tasks\":5,\"estimated_time_minutes\":10}}},\"subject\":\"html\",\"title\":\"Role of HTML in web development\"},\"syllabusData\":{\"subject\":\"html\",\"part\":\"part-1\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":7,\"total_patterns\":43,\"patterns_with_content\":43,\"created_at\":\"2026-02-28T20:17:17.741100Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Core Structure \u0026 Content\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p1_t1\",\"title\":\"HTML Basics \u0026 Web Fundamentals\",\"order\":1,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_html\",\"title\":\"What is HTML\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_role_of_html_in_web_development\",\"title\":\"Role of HTML in web development\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_how_browsers_read_html\",\"title\":\"How browsers read HTML\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_html_document_structure\",\"title\":\"HTML document structure\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_doctype_declaration\",\"title\":\"DOCTYPE declaration\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_head_and_body_sections\",\"title\":\"Head and body sections\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_first_html_page\",\"title\":\"First HTML page\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t2\",\"title\":\"HTML Elements \u0026 Tags\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_an_html_element\",\"title\":\"What is an HTML element\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_opening_and_closing_tags\",\"title\":\"Opening and closing tags\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_selfclosing_tags\",\"title\":\"Self-closing tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nested_elements\",\"title\":\"Nested elements\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_blocklevel_elements\",\"title\":\"Block-level elements\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_inline_elements\",\"title\":\"Inline elements\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_common_html_mistakes\",\"title\":\"Common HTML mistakes\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t3\",\"title\":\"Text Content \u0026 Formatting\",\"order\":3,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_headings_h1h6\",\"title\":\"Headings (h1–h6)\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_paragraphs\",\"title\":\"Paragraphs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_line_breaks_and_horizontal_rules\",\"title\":\"Line breaks and horizontal rules\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_bold_and_italic_text\",\"title\":\"Bold and italic text\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_strong_vs_b_tag\",\"title\":\"Strong vs b tag\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_em_vs_i_tag\",\"title\":\"Em vs i tag\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_preformatted_text\",\"title\":\"Preformatted text\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t4\",\"title\":\"Links \u0026 Navigation\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_anchor_tag_basics\",\"title\":\"Anchor tag basics\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_absolute_vs_relative_urls\",\"title\":\"Absolute vs relative URLs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_opening_links_in_new_tab\",\"title\":\"Opening links in new tab\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_linking_to_sections_using_ids\",\"title\":\"Linking to sections using IDs\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_email_and_phone_links\",\"title\":\"Email and phone links\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_navigation_structure_basics\",\"title\":\"Navigation structure basics\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t5\",\"title\":\"Images \u0026 Media\",\"order\":5,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_image_tag_usage\",\"title\":\"Image tag usage\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_image_source_and_alt_attribute\",\"title\":\"Image source and alt attribute\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_image_sizing_basics\",\"title\":\"Image sizing basics\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_audio_tag_basics\",\"title\":\"Audio tag basics\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_video_tag_basics\",\"title\":\"Video tag basics\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_media_formats_overview\",\"title\":\"Media formats overview\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t6\",\"title\":\"Lists\",\"order\":6,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_ordered_lists\",\"title\":\"Ordered lists\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_unordered_lists\",\"title\":\"Unordered lists\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_nested_lists\",\"title\":\"Nested lists\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_description_lists\",\"title\":\"Description lists\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_list_use_cases_in_layout\",\"title\":\"List use cases in layout\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p1_t7\",\"title\":\"Tables\",\"order\":7,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_table_structure\",\"title\":\"Table structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_table_rows_and_columns\",\"title\":\"Table rows and columns\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_table_headers\",\"title\":\"Table headers\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_cell_merging\",\"title\":\"Cell merging\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_table_accessibility_basics\",\"title\":\"Table accessibility basics\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"TMC\",\"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\":\"Role of HTML in web development - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Practice Role of HTML in web development with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"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-1/html-role-of-html-in-web-development/try\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Role of HTML in web development - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Practice Role of HTML in web development with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-1/html-role-of-html-in-web-development/try\"}],[\"$\",\"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\":\"Role of HTML in web development - Interactive Code Practice\"}],[\"$\",\"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\":\"Role of HTML in web development - Interactive Code Practice | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Practice Role of HTML in web development with interactive drag-and-drop exercises. Complete code by filling in the blanks. Instant feedback, hints \u0026 explanations. Free.\"}],[\"$\",\"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>