Challenge - 5 Problems

🎖️

Indentation Mastery

Get all challenges correct to earn this badge!

Test your skills under time pressure!

📝 Syntax

intermediate

2:00remaining

Identify the correct indentation in HTML

Which option shows the properly indented HTML code for a simple webpage structure?

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Welcome&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Attempts:

2 left

✗ Incorrect

Proper indentation means child elements are indented inside their parent tags. Option A correctly indents the inside <head> and the <h1> and <p> inside <body> with 4 spaces.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge rendering">❓ rendering</span></div><span class="task-difficulty intermediate">intermediate</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Effect of improper indentation on HTML rendering</div><div>What will be the visual output in a browser for the following HTML code with inconsistent indentation? <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <h1>Hello</h1> <p>Paragraph</p> </body> </html></div></div><div class=""><div class="code-block"><div class="code-header"><span class="code-title">HTML</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><<span>!DOCTYPE</span> html> <<span>html</span>> <<span>head</span>> <<span>title</span>>Test</<span>title</span>> </<span>head</span>> <<span>body</span>> <<span>h1</span>>Hello</<span>h1</span>> <<span>p</span>>Paragraph</<span>p</span>> </<span>body</span>> </<span>html</span>></pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The page shows only the heading 'Hello' because the paragraph is ignored due to indentation.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The page shows a heading 'Hello' and a paragraph 'Paragraph' with normal spacing.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">The page shows a heading 'Hello' and a paragraph 'Paragraph' but the paragraph is indented with extra space visible.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">The page shows an error message because of improper indentation.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2 left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Browsers ignore whitespace indentation in HTML rendering.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>HTML ignores indentation spaces when rendering. So even if indentation is inconsistent, the browser shows all elements normally. Option B is correct.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge selector">❓ selector</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">CSS selector specificity with indentation</div><div>Given this CSS code with indentation, which selector has the highest specificity? body { background: white; } nav ul li { color: blue; } #main-content { font-size: 1.2rem; } .container > p { margin: 1rem; }</div></div><div class=""><div class="code-block"><div class="code-header"><span class="code-title">HTML</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content">body { background: white; } nav ul li { color: blue; } #main-content { font-size: 1.2rem; } .container > p { margin: 1rem; }</pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">#main-content</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">nav ul li</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">body</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">.container > p</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2 left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">ID selectors have higher specificity than class or element selectors.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The selector <code>#main-content</code> uses an ID, which has higher specificity than element selectors like <code>body</code> or <code>nav ul li</code>, or class selectors like <code>.container > p</code>. Indentation does not affect specificity.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge layout">❓ layout</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Indentation and readability in Flexbox layout CSS</div><div>Which CSS snippet shows the best indentation for a Flexbox container and its children for readability?</div></div><div class="d-none"></div><div class="task-options"><div class="task-option task-option-code "><span class="task-option-key">A</span><pre class="option-code">.container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .container > div { flex: 1; }</pre></div><div class="task-option task-option-code "><span class="task-option-key">B</span><pre class="option-code">.container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .container > div { flex: 1; }</pre></div><div class="task-option task-option-code "><span class="task-option-key">C</span><pre class="option-code">.container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .container > div { flex: 1; }</pre></div><div class="task-option task-option-code "><span class="task-option-key">D</span><pre class="option-code">.container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .container > div { flex: 1; }</pre></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2 left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Consistent indentation with 4 spaces is a common standard for readability.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>Option C uses consistent 4-space indentation for all properties inside the selector blocks, making it easy to read and maintain. Other options have inconsistent or excessive indentation.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge accessibility">❓ accessibility</span></div><span class="task-difficulty expert">expert</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Indentation impact on screen reader accessibility</div><div>How does proper indentation in HTML affect screen reader accessibility?</div></div><div class="d-none"></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Screen readers require indentation to identify heading levels correctly.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Proper indentation improves screen reader output by creating pauses between elements.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Improper indentation causes screen readers to skip some elements.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Proper indentation has no effect on screen reader accessibility because screen readers rely on semantic HTML, not whitespace.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2 left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Think about what screen readers use to understand content structure.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>Screen readers use semantic HTML tags and attributes to understand content, not indentation or whitespace. Proper indentation helps developers read code but does not affect screen reader behavior.</p></div></div></div></div></div></article><div class="confetti-container"></div></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-proper-indentation\",\"d\"]\nd:[\"mode\",\"challenge\",\"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-proper-indentation/challenge\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"html-proper-indentation\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"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-proper-indentation\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"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,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Proper indentation in HTML Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Solve Proper indentation in HTML coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"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-proper-indentation/challenge\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation/challenge\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation/challenge\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Proper indentation in HTML Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Solve Proper indentation in HTML coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation/challenge\"}],[\"$\",\"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\":\"Proper indentation in HTML Practice Problems - Coding Exercises\"}],[\"$\",\"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\":\"Proper indentation in HTML Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Solve Proper indentation in HTML coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"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><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:T473,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Proper indentation in HTML - Practice Problems \u0026 Coding Challenges\",\"description\":\"Solve Proper indentation in HTML coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation/challenge\",\"learningResourceType\":\"Quiz\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Proper indentation in HTML - Practice Problems \u0026 Coding Challenges\",\"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\":\"Proper indentation in HTML - Practice Problems \u0026 Coding Challenges\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Challenge\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-proper-indentation/challenge\"}]}}"])</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_proper_indentation\",\"modeSlug\":\"challenge\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/challenge\",\"active\":true},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-2/html-proper-indentation/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Proper indentation in HTML - Practice Problems \u0026 Coding Challenges\",\"contentData\":{\"pattern_id\":\"html_proper_indentation\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"CMC\":{\"topic\":\"Proper indentation\",\"mode\":\"CMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"challenges\":[{\"id\":\"c1\",\"type\":\"syntax\",\"difficulty\":\"intermediate\",\"title\":\"Identify the correct indentation in HTML\",\"prompt\":\"Which option shows the properly indented HTML code for a simple webpage structure?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n \u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003ch1\u003eWelcome\u003c/h1\u003e\\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"B\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003ch1\u003eWelcome\u003c/h1\u003e\\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"C\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003ch1\u003eWelcome\u003c/h1\u003e\\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"D\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n \u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003ch1\u003eWelcome\u003c/h1\u003e\\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Look for consistent indentation inside the \u003chead\u003e and \u003cbody\u003e sections.\",\"explanation\":\"\u003cp\u003eProper indentation means child elements are indented inside their parent tags. Option A correctly indents the \u003ctitle\u003e inside \u003chead\u003e and the \u003ch1\u003e and \u003cp\u003e inside \u003cbody\u003e with 4 spaces.\u003c/p\u003e\",\"solution\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n \u003ctitle\u003ePage Title\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003ch1\u003eWelcome\u003c/h1\u003e\\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"tags\":[\"indentation\",\"html\",\"syntax\"]},{\"id\":\"c2\",\"type\":\"rendering\",\"difficulty\":\"intermediate\",\"title\":\"Effect of improper indentation on HTML rendering\",\"prompt\":\"What will be the visual output in a browser for the following HTML code with inconsistent indentation?\\n\\n\u0026lt;!DOCTYPE html\u0026gt;\\n\u0026lt;html\u0026gt;\\n\u0026lt;head\u0026gt;\\n\u0026lt;title\u0026gt;Test\u0026lt;/title\u0026gt;\\n\u0026lt;/head\u0026gt;\\n\u0026lt;body\u0026gt;\\n\u0026lt;h1\u0026gt;Hello\u0026lt;/h1\u0026gt;\\n \u0026lt;p\u0026gt;Paragraph\u0026lt;/p\u0026gt;\\n\u0026lt;/body\u0026gt;\\n\u0026lt;/html\u0026gt;\",\"code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\u003ctitle\u003eTest\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003ch1\u003eHello\u003c/h1\u003e\\n \u003cp\u003eParagraph\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"The page shows only the heading 'Hello' because the paragraph is ignored due to indentation.\",\"B\":\"The page shows a heading 'Hello' and a paragraph 'Paragraph' with normal spacing.\",\"C\":\"The page shows a heading 'Hello' and a paragraph 'Paragraph' but the paragraph is indented with extra space visible.\",\"D\":\"The page shows an error message because of improper indentation.\"},\"correct_answer\":[\"B\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Browsers ignore whitespace indentation in HTML rendering.\",\"explanation\":\"\u003cp\u003eHTML ignores indentation spaces when rendering. So even if indentation is inconsistent, the browser shows all elements normally. Option B is correct.\u003c/p\u003e\",\"solution\":\"The page shows a heading 'Hello' and a paragraph 'Paragraph' with normal spacing.\",\"tags\":[\"rendering\",\"html\",\"indentation\"]},{\"id\":\"c3\",\"type\":\"selector\",\"difficulty\":\"advanced\",\"title\":\"CSS selector specificity with indentation\",\"prompt\":\"Given this CSS code with indentation, which selector has the highest specificity?\\n\\nbody {\\n background: white;\\n}\\n\\nnav ul li {\\n color: blue;\\n}\\n\\n#main-content {\\n font-size: 1.2rem;\\n}\\n\\n.container \u003e p {\\n margin: 1rem;\\n}\",\"code\":\"body {\\n background: white;\\n}\\n\\nnav ul li {\\n color: blue;\\n}\\n\\n#main-content {\\n font-size: 1.2rem;\\n}\\n\\n.container \u003e p {\\n margin: 1rem;\\n}\",\"ordering_targets\":[],\"options\":{\"A\":\"#main-content\",\"B\":\"nav ul li\",\"C\":\"body\",\"D\":\".container \u003e p\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"ID selectors have higher specificity than class or element selectors.\",\"explanation\":\"\u003cp\u003eThe selector \u003ccode\u003e#main-content\u003c/code\u003e uses an ID, which has higher specificity than element selectors like \u003ccode\u003ebody\u003c/code\u003e or \u003ccode\u003enav ul li\u003c/code\u003e, or class selectors like \u003ccode\u003e.container \u0026gt; p\u003c/code\u003e. Indentation does not affect specificity.\u003c/p\u003e\",\"solution\":\"#main-content\",\"tags\":[\"css\",\"selector\",\"specificity\",\"indentation\"]},{\"id\":\"c4\",\"type\":\"layout\",\"difficulty\":\"advanced\",\"title\":\"Indentation and readability in Flexbox layout CSS\",\"prompt\":\"Which CSS snippet shows the best indentation for a Flexbox container and its children for readability?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\".container {\\ndisplay: flex;\\nflex-direction: row;\\nalign-items: center;\\njustify-content: space-between;\\n}\\n\\n.container \u003e div {\\nflex: 1;\\n}\",\"B\":\".container {\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.container \u003e div {\\n flex: 1;\\n}\",\"C\":\".container {\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.container \u003e div {\\n flex: 1;\\n}\",\"D\":\".container {\\n display: flex;\\nflex-direction: row;\\n align-items: center;\\njustify-content: space-between;\\n}\\n\\n.container \u003e div {\\n flex: 1;\\n}\"},\"correct_answer\":[\"C\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Consistent indentation with 4 spaces is a common standard for readability.\",\"explanation\":\"\u003cp\u003eOption C uses consistent 4-space indentation for all properties inside the selector blocks, making it easy to read and maintain. Other options have inconsistent or excessive indentation.\u003c/p\u003e\",\"solution\":\".container {\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.container \u003e div {\\n flex: 1;\\n}\",\"tags\":[\"css\",\"layout\",\"flexbox\",\"indentation\",\"readability\"]},{\"id\":\"c5\",\"type\":\"accessibility\",\"difficulty\":\"expert\",\"title\":\"Indentation impact on screen reader accessibility\",\"prompt\":\"How does proper indentation in HTML affect screen reader accessibility?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"Screen readers require indentation to identify heading levels correctly.\",\"B\":\"Proper indentation improves screen reader output by creating pauses between elements.\",\"C\":\"Improper indentation causes screen readers to skip some elements.\",\"D\":\"Proper indentation has no effect on screen reader accessibility because screen readers rely on semantic HTML, not whitespace.\"},\"correct_answer\":[\"D\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Think about what screen readers use to understand content structure.\",\"explanation\":\"\u003cp\u003eScreen readers use semantic HTML tags and attributes to understand content, not indentation or whitespace. Proper indentation helps developers read code but does not affect screen reader behavior.\u003c/p\u003e\",\"solution\":\"Proper indentation has no effect on screen reader accessibility because screen readers rely on semantic HTML, not whitespace.\",\"tags\":[\"accessibility\",\"html\",\"indentation\",\"screen readers\"]}],\"achievement_badge\":{\"name\":\"Indentation Mastery\",\"condition\":\"complete_all_5\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"markup\",\"total_challenges\":5,\"estimated_time_minutes\":20}}},\"subject\":\"html\",\"title\":\"Proper indentation\"},\"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\":\"CMC\",\"productId\":\"codefly\"}]]\n"])</script></body></html>