Recall & Review
beginner
What is SEO-friendly HTML?
SEO-friendly HTML means writing web pages so search engines can easily understand and rank them. It uses clear structure, meaningful tags, and good content.
Click to reveal answer
beginner
Why use semantic HTML tags for SEO?
Semantic tags like <header>, <nav>, <main>, <article>, and <footer> tell search engines what each part of the page means, helping them understand content better.
Click to reveal answer
beginner
How does the <title> tag affect SEO?
The <title> tag sets the page title shown in search results and browser tabs. A clear, descriptive title helps search engines and users know what the page is about.
Click to reveal answer
beginner
What role do heading tags (<h1> to <h6>) play in SEO?
Heading tags organize content by importance. The <h1> is the main title, and others break content into sections. Search engines use headings to understand page structure.
Click to reveal answer
beginner
How can alt attributes on images improve SEO?
Alt text describes images for search engines and users who can't see them. It helps search engines index images and improves accessibility.
Click to reveal answer
Which HTML tag is best for the main content of a page?
✗ Incorrect
The tag specifically marks the main content, helping search engines understand the page structure.
What should the <title> tag contain for good SEO?
✗ Incorrect
A clear and descriptive title helps both users and search engines understand the page topic.
Why use heading tags like <h1> and <h2>?
✗ Incorrect
Headings organize content and help search engines understand the page structure.
What is the purpose of the alt attribute in <img> tags?
✗ Incorrect
Alt text describes images for users who can't see them and helps search engines index images.
Which tag is NOT semantic and less helpful for SEO?
✗ Incorrect
is a generic container without meaning, so it doesn't help search engines understand content.
Explain how semantic HTML tags improve SEO and give three examples.
Think about tags that describe page parts clearly.
You got /3 concepts.
Describe the importance of the tag and alt attributes for SEO.</div><textarea class="recall-prompt-textarea" id="prompt-rp2" placeholder="Type your answer here..."></textarea><div class="recall-prompt-actions"><button class="recall-check-btn">Check Answer</button><button class="recall-hint-btn">💡 Hint</button></div><div class="recall-prompt-hint d-none">Consider what users and search engines see.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got <!-- -->/<!-- -->3<!-- --> concepts.<ul class="expected-elements-list"></ul></div></div></div></div></div></article></div><div><article class="content-card" id="practice"><div class="code-articles-card-header justify-content-between"><div class="d-flex align-items-center" style="gap:12px"><span class="card-icon nofill intro"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color site-fs-20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></span><h2 class="codefly-card-title mb-0 pb-0">Practice</h2></div><span class="site-fs-15">(<!-- -->1<!-- -->/<!-- -->5<!-- -->)</span></div><div class="code-articles-card-body" data-theme="light"><div class=""><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">1<!-- -->. <!-- -->Which HTML element is best for defining the main title of a webpage for SEO purposes?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><div></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><title></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><header></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><h1></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand the role of <code><h1></code> in SEO</h4>The <code><h1></code> tag defines the main heading of the page content, which search engines use to understand the page topic.</li><li><h4>Step 2: Differentiate from other tags</h4>The <code><title></code> tag sets the browser tab title but is not visible in the page body. <code><header></code> is a semantic container, and <code><div></code> is generic with no SEO meaning.</li><li><h4>Final Answer:</h4><strong><h1></strong> -> Option D</li><li><h4>Quick Check:</h4>Main page title = <h1> [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Main page title should be inside <h1> tag [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using <title> as visible page heading</li><li class="ph-mistake-item mb-0">Using <div> instead of semantic heading</li><li class="ph-mistake-item mb-0">Confusing <header> with heading tags</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">2<!-- -->. <!-- -->Which of the following is the correct way to add a meta description for SEO in HTML?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><meta content="This is my page" name="desc"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><meta description="This is my page"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><meta name="description" content="This is my page"></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><meta name="desc" content="This is my page"></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall correct meta tag syntax for description</h4>The meta description tag uses <code>name="description"</code> and a <code>content</code> attribute with the description text.</li><li><h4>Step 2: Check each option's correctness</h4><code><meta name="description" content="This is my page"></code> matches the correct syntax. Options A, B, and D use incorrect attribute names or order.</li><li><h4>Final Answer:</h4><strong><meta name="description" content="This is my page"></strong> -> Option C</li><li><h4>Quick Check:</h4>Meta description = name="description" [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Meta description uses name="description" and content="..." [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using wrong attribute names like 'desc'</li><li class="ph-mistake-item mb-0">Omitting the content attribute</li><li class="ph-mistake-item mb-0">Swapping attribute order incorrectly</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">3<!-- -->. <!-- -->What will be the visible heading structure in the browser from this HTML snippet?<br/><pre><section>
<h2>About Us</h2>
<article>
<h3>Our Mission</h3>
</article>
</section></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->A main heading 'About Us' and a subheading 'Our Mission' below it</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->Only one heading 'Our Mission' is visible</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->No headings are visible because they are inside section and article</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->Both headings appear but 'Our Mission' is above 'About Us'</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand semantic tags and heading display</h4>The <code><h2></code> and <code><h3></code> tags create visible headings with different sizes and importance.</li><li><h4>Step 2: Analyze the snippet structure</h4>The <code><h2>About Us</h2></code> is the main heading in the section, and <code><h3>Our Mission</h3></code> is a subheading inside the article, so both show in order.</li><li><h4>Final Answer:</h4><strong>A main heading 'About Us' and a subheading 'Our Mission' below it</strong> -> Option A</li><li><h4>Quick Check:</h4>Headings show in order and size [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Headings inside semantic tags still display visibly [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Thinking section/article hide headings</li><li class="ph-mistake-item mb-0">Assuming only one heading shows</li><li class="ph-mistake-item mb-0">Confusing heading order visually</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">4<!-- -->. <!-- -->Identify the error in this HTML snippet for SEO:<br/><pre><head>
<title>My Site</title>
<meta name="description" content="Welcome to my site">
<h1>Home Page</h1>
</head></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->Missing <code><meta charset></code> tag</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><h1></code> should not be inside <code><head></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><title></code> tag is empty</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><meta name="description"></code> is missing content</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Review correct placement of <code><h1></code></h4>The <code><h1></code> tag is for visible page content and must be inside the <code><body></code>, not <code><head></code>.</li><li><h4>Step 2: Check other tags</h4>The <code><title></code> is correctly filled, and the meta description has content. Missing charset is not an error for SEO but recommended.</li><li><h4>Final Answer:</h4><strong><h1> should not be inside <head></strong> -> Option B</li><li><h4>Quick Check:</h4>Visible content tags go in body, not head [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Keep <h1> inside <body>, not <head> [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Placing visible tags inside <head></li><li class="ph-mistake-item mb-0">Ignoring charset meta tag importance</li><li class="ph-mistake-item mb-0">Leaving meta description empty</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">5<!-- -->. <!-- -->You want to improve SEO by organizing content semantically. Which combination of tags best structures a blog post with a title, author info, main content, and footer notes?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">hard</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <code><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <code><div><h1>Title</h1><div>Content</div><div>Author</div></div></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <code><section><h1>Title</h1><footer>Author</footer></section><article>Content</article></code></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <code><header><h1>Title</h1></header><article>Content</article><footer>Author</footer></code></span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Identify semantic tags for blog structure</h4>The <code><article></code> tag wraps the whole blog post. Inside it, <code><header></code> holds the title, <code><section></code> contains main content, and <code><footer></code> includes author and notes.</li><li><h4>Step 2: Compare options for semantic correctness</h4><code><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></code> uses all correct semantic tags in proper order. <code><div><h1>Title</h1><div>Content</div><div>Author</div></div></code> uses generic <code><div></code> tags, which are less SEO-friendly. <code><section><h1>Title</h1><footer>Author</footer></section><article>Content</article></code> misplaces <code><article></code> outside main content. <code><header><h1>Title</h1></header><article>Content</article><footer>Author</footer></code> separates header and footer outside article, which is less clear.</li><li><h4>Final Answer:</h4><strong><article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article></strong> -> Option A</li><li><h4>Quick Check:</h4>Use semantic tags to organize content clearly [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Wrap blog post in <article> with header, section, footer [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using only <div> without semantic tags</li><li class="ph-mistake-item mb-0">Separating header/footer outside article</li><li class="ph-mistake-item mb-0">Misusing section and article tags</li></ul></div></div></div></div></div></div><div class="d-flex align-items-center justify-content-between mt-4"><button class="secondary-site-btn" disabled=""><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> Previous</button><div class="practice-question-toggles-wrapper"><button class="practice-question-toggle-btn active ">1</button><button class="practice-question-toggle-btn ">2</button><button class="practice-question-toggle-btn ">3</button><button class="practice-question-toggle-btn ">4</button><button class="practice-question-toggle-btn ">5</button></div><button class="secondary-site-btn">Next <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></button></div></div></article></div><div id="mock" class="mtc-wrapper"><div class="mtc-card-container"><div class="mtc-card pulse-effect"><span class="mtc-recommended-badge">Recommended</span><div class="mtc-icon-wrap"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" color="#fff" style="color:#fff" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></div><h4 class="mtc-heading">Ready to prove it?</h4><p class="mtc-sub">Pass the test and this pattern moves <span class="mtc-state-pill">unknown</span> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> <span class="mtc-state-pill good">strong</span> <span class="d-inline-block">while earning <span class="weight-800">+1 Grip</span></span> toward your certificate.</p><div class="mtc-pills"><span class="mtc-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>10 questions</span><span class="mtc-pill"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>~5 min</span><span class="mtc-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>easy <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> hard</span></div><div class="mtc-cta-wrap"><button type="button" class="mtc-cta-btn">Take the Test <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg></button></div></div></div></div></div></main><div class="rpi-float-wrap"><button type="button" class="rpi-float-btn" aria-label="Report an issue"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg><span class="rpi-float-label">Report Issue</span></button></div></div><div style="display:none"><div id="ad-management-config-settings" data-blocklist-all="1"></div></div> <script src="/_next/static/chunks/webpack-28170116499ad51b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/d071dca61fbb01bf.css\",\"style\"]\n2:HL[\"/_next/static/css/907864b6faf28c32.css\",\"style\"]\n3:HL[\"/_next/static/css/ada9a246b4e9c7f9.css\",\"style\"]\n4:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n5:HL[\"/_next/static/css/c478212c00f26f15.css\",\"style\"]\n6:HL[\"/_next/static/css/989afc350a4b3a28.css\",\"style\"]\n7:HL[\"/_next/static/css/ccfdf35169bd162c.css\",\"style\"]\n8:HL[\"/_next/static/css/417e7aee3e688b57.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"9:I[95751,[],\"\"]\nc:I[39275,[],\"\"]\n12:I[61343,[],\"\"]\n13:I[84080,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"\"]\n14:I[88726,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"Toaster\"]\n15:I[20154,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"3154\",\"static/chunks/3154-0aa2f15561902c10.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"4662\",\"static/chunks/4662-1ac1c089600dcc35.js\",\"9160\",\"static/chunks/app/not-found-b9aad74520590312.js\"],\"default\"]\n16:I[78598,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n17:I[56192,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n19:I[76130,[],\"\"]\nd:[\"lang\",\"en\",\"d\"]\ne:[\"subject\",\"html\",\"d\"]\nf:[\"part\",\"part-2\",\"d\"]\n10:[\"pattern\",\"html-seofriendly-html\",\"d\"]\n11:[\"mode\",\"review\",\"oc\"]\n1a:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d071dca61fbb01bf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/907864b6faf28c32.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"buildId\":\"leyaa-prod-build-id\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/html/part-2/html-seofriendly-html/review\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"html-seofriendly-html\",\"d\"],{\"children\":[[\"mode\",\"review\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"html-seofriendly-html\",\"d\"],{\"children\":[[\"mode\",\"review\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$La\",\"$Lb\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ada9a246b4e9c7f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/989afc350a4b3a28.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ccfdf35169bd162c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/417e7aee3e688b57.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$L13\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-18214378714\"}],[\"$\",\"$L13\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-18214378714');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$L13\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"$L13\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L15\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c478212c00f26f15.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L16\",null,{}],\" \",[\"$\",\"$L17\",null,{}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L18\"],\"globalErrorComponent\":\"$19\",\"missingSlots\":\"$W1a\"}]]\n"])</script><script>self.__next_f.push([1,"1c:I[43489,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6051\",\"static/chunks/795d4814-8b40e2eae05948ca.js\",\"5706\",\"static/chunks/9c4e2130-0ef90d15550fcb15.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7699\",\"static/chunks/8e1d74a4-d3c1e3cfb4eeea98.js\",\"7240\",\"static/chunks/53c13509-a3e4ac0640ae03f2.js\",\"9956\",\"static/chunks/ee560e2c-27ba7a66c659fa82.js\",\"2516\",\"static/chunks/f7333993-31ab72eb9b202e3d.js\",\"1779\",\"static/chunks/0e762574-cee3ec2351d97ca0.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"4889\",\"static/chunks/4889-de8d1c4f2ff2f134.js\",\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"7534\",\"static/chunks/7534-02c906a11e681445.js\",\"4220\",\"static/chunks/4220-e3c1264f6e3453a7.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"6857\",\"static/chunks/6857-f9121be732678b30.js\",\"2202\",\"static/chunks/2202-dad5d33fadc7ea73.js\",\"1786\",\"static/chunks/1786-7253d5c3df8362c5.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-b11550cd55444a64.js\"],\"default\"]\n1b:T432,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"SEO-friendly HTML - Cheat Sheet \u0026 Quick Revision\",\"description\":\"Quick revision of SEO-friendly HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\",\"learningResourceType\":\"Tutorial\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"SEO-friendly HTML - Cheat Sheet \u0026 Quick Revision\",\"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\":\"ListIt"])</script><script>self.__next_f.push([1,"em\",\"position\":2,\"name\":\"SEO-friendly HTML - Cheat Sheet \u0026 Quick Revision\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quick Review\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\"}]}}1d:T64e,\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Identify semantic tags for blog structure\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;article\u0026gt;\u003c/code\u003e tag wraps the whole blog post. Inside it, \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e holds the title, \u003ccode\u003e\u0026lt;section\u0026gt;\u003c/code\u003e contains main content, and \u003ccode\u003e\u0026lt;footer\u0026gt;\u003c/code\u003e includes author and notes.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Compare options for semantic correctness\u003c/h4\u003e\u003ccode\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/code\u003e uses all correct semantic tags in proper order. \u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;div\u0026gt;Content\u0026lt;/div\u0026gt;\u0026lt;div\u0026gt;Author\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e uses generic \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e tags, which are less SEO-friendly. \u003ccode\u003e\u0026lt;section\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u0026lt;/section\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u003c/code\u003e misplaces \u003ccode\u003e\u0026lt;article\u0026gt;\u003c/code\u003e outside main content. \u003ccode\u003e\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u003c/code\u003e separates header and footer outside article, which is less clear.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eUse semantic tags to organize content clearly [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e"])</script><script>self.__next_f.push([1,"b:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1b\"}}]],[\"$\",\"$L1c\",null,{\"subject\":\"html\",\"dbSubject\":\"html\",\"part\":\"part-2\",\"pattern\":\"html_seofriendly_html\",\"modeSlug\":\"review\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-2/html-seofriendly-html/review\",\"active\":true}],\"isLoggedIn\":false,\"seoH1\":\"SEO-friendly HTML - Cheat Sheet \u0026 Quick Revision\",\"contentData\":{\"pattern_id\":\"html_seofriendly_html\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"RMC\":{\"concept\":\"SEO-friendly HTML\",\"mode\":\"RMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"flashcards\":[{\"id\":\"f1\",\"front\":\"What is SEO-friendly HTML?\",\"back\":\"SEO-friendly HTML means writing web pages so search engines can easily understand and rank them. It uses clear structure, meaningful tags, and good content.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"HTML\",\"Basics\"]},{\"id\":\"f2\",\"front\":\"Why use semantic HTML tags for SEO?\",\"back\":\"Semantic tags like \u003cheader\u003e, \u003cnav\u003e, \u003cmain\u003e, \u003carticle\u003e, and \u003cfooter\u003e tell search engines what each part of the page means, helping them understand content better.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"Semantic HTML\"]},{\"id\":\"f3\",\"front\":\"How does the \u003ctitle\u003e tag affect SEO?\",\"back\":\"The \u003ctitle\u003e tag sets the page title shown in search results and browser tabs. A clear, descriptive title helps search engines and users know what the page is about.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"HTML\",\"Title Tag\"]},{\"id\":\"f4\",\"front\":\"What role do heading tags (\u003ch1\u003e to \u003ch6\u003e) play in SEO?\",\"back\":\"Heading tags organize content by importance. The \u003ch1\u003e is the main title, and others break content into sections. Search engines use headings to understand page structure.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"Headings\",\"HTML\"]},{\"id\":\"f5\",\"front\":\"How can alt attributes on images improve SEO?\",\"back\":\"Alt text describes images for search engines and users who can't see them. It helps search engines index images and improves accessibility.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"Accessibility\",\"Images\"]}],\"micro_quiz\":[{\"id\":\"mq1\",\"question\":\"Which HTML tag is best for the main content of a page?\",\"options\":{\"A\":\"\u003cmain\u003e\",\"B\":\"\u003cdiv\u003e\",\"C\":\"\u003csection\u003e\",\"D\":\"\u003cfooter\u003e\"},\"correct_answer\":[\"A\"],\"explanation\":\"The \u003cmain\u003e tag specifically marks the main content, helping search engines understand the page structure.\"},{\"id\":\"mq2\",\"question\":\"What should the \u003ctitle\u003e tag contain for good SEO?\",\"options\":{\"A\":\"A clear and descriptive page title\",\"B\":\"Only the website name\",\"C\":\"Random keywords\",\"D\":\"No content\"},\"correct_answer\":[\"A\"],\"explanation\":\"A clear and descriptive title helps both users and search engines understand the page topic.\"},{\"id\":\"mq3\",\"question\":\"Why use heading tags like \u003ch1\u003e and \u003ch2\u003e?\",\"options\":{\"A\":\"To create links\",\"B\":\"To organize content by importance\",\"C\":\"To add colors to text\",\"D\":\"To insert images\"},\"correct_answer\":[\"B\"],\"explanation\":\"Headings organize content and help search engines understand the page structure.\"},{\"id\":\"mq4\",\"question\":\"What is the purpose of the alt attribute in \u003cimg\u003e tags?\",\"options\":{\"A\":\"Change the image size\",\"B\":\"Make the image clickable\",\"C\":\"Add a border to the image\",\"D\":\"Describe the image for search engines and accessibility\"},\"correct_answer\":[\"D\"],\"explanation\":\"Alt text describes images for users who can't see them and helps search engines index images.\"},{\"id\":\"mq5\",\"question\":\"Which tag is NOT semantic and less helpful for SEO?\",\"options\":{\"A\":\"\u003cnav\u003e\",\"B\":\"\u003carticle\u003e\",\"C\":\"\u003cdiv\u003e\",\"D\":\"\u003cheader\u003e\"},\"correct_answer\":[\"C\"],\"explanation\":\"\u003cdiv\u003e is a generic container without meaning, so it doesn't help search engines understand content.\"}],\"recall_prompts\":[{\"id\":\"rp1\",\"prompt\":\"Explain how semantic HTML tags improve SEO and give three examples.\",\"expected_elements\":[\"Definition of semantic tags\",\"How they help search engines\",\"Examples like \u003cheader\u003e, \u003cmain\u003e, \u003carticle\u003e\"],\"hint\":\"Think about tags that describe page parts clearly.\"},{\"id\":\"rp2\",\"prompt\":\"Describe the importance of the \u003ctitle\u003e tag and alt attributes for SEO.\",\"expected_elements\":[\"Role of \u003ctitle\u003e in search results\",\"Why alt text is needed\",\"Benefits for accessibility and indexing\"],\"hint\":\"Consider what users and search engines see.\"}],\"spaced_repetition\":{\"initial_interval_hours\":24,\"multiplier\":2.5,\"max_interval_days\":30},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"markup\",\"total_flashcards\":5,\"total_quiz\":5,\"estimated_time_minutes\":5}}},\"subject\":\"html\",\"title\":\"SEO-friendly HTML\",\"puzzleDetails\":[{\"_id\":\"69b1785045baa2b585460070\",\"question_number\":1,\"question\":\"Which HTML element is best for defining the main title of a webpage for SEO purposes?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"D\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand the role of \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e in SEO\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e tag defines the main heading of the page content, which search engines use to understand the page topic.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Differentiate from other tags\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag sets the browser tab title but is not visible in the page body. \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e is a semantic container, and \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is generic with no SEO meaning.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;h1\u0026gt;\u003c/strong\u003e -\u003e Option D\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMain page title = \u0026lt;h1\u0026gt; [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Main page title should be inside \u003ch1\u003e tag [OK]\",\"common_mistakes\":[\"Using \u003ctitle\u003e as visible page heading\",\"Using \u003cdiv\u003e instead of semantic heading\",\"Confusing \u003cheader\u003e with heading tags\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"conceptual\",\"difficulty\":\"easy\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"conceptual\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-07-25T04:06:03.520Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460071\",\"question_number\":2,\"question\":\"Which of the following is the correct way to add a meta description for SEO in HTML?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;meta content=\\\"This is my page\\\" name=\\\"desc\\\"\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;meta description=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;meta name=\\\"desc\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"C\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall correct meta tag syntax for description\u003c/h4\u003eThe meta description tag uses \u003ccode\u003ename=\\\"description\\\"\u003c/code\u003e and a \u003ccode\u003econtent\u003c/code\u003e attribute with the description text.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check each option's correctness\u003c/h4\u003e\u003ccode\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/code\u003e matches the correct syntax. Options A, B, and D use incorrect attribute names or order.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;meta name=\\\"description\\\" content=\\\"This is my page\\\"\u0026gt;\u003c/strong\u003e -\u003e Option C\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMeta description = name=\\\"description\\\" [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Meta description uses name=\\\"description\\\" and content=\\\"...\\\" [OK]\",\"common_mistakes\":[\"Using wrong attribute names like 'desc'\",\"Omitting the content attribute\",\"Swapping attribute order incorrectly\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"syntax\",\"difficulty\":\"easy\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"syntax\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-08-07T01:55:17.299Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460072\",\"question_number\":3,\"question\":\"What will be the visible heading structure in the browser from this HTML snippet?\u003cbr\u003e\u003cpre\u003e\u0026lt;section\u0026gt;\\n \u0026lt;h2\u0026gt;About Us\u0026lt;/h2\u0026gt;\\n \u0026lt;article\u0026gt;\\n \u0026lt;h3\u0026gt;Our Mission\u0026lt;/h3\u0026gt;\\n \u0026lt;/article\u0026gt;\\n\u0026lt;/section\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"A main heading 'About Us' and a subheading 'Our Mission' below it\",\"B\":\"Only one heading 'Our Mission' is visible\",\"C\":\"No headings are visible because they are inside section and article\",\"D\":\"Both headings appear but 'Our Mission' is above 'About Us'\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand semantic tags and heading display\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;h3\u0026gt;\u003c/code\u003e tags create visible headings with different sizes and importance.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Analyze the snippet structure\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h2\u0026gt;About Us\u0026lt;/h2\u0026gt;\u003c/code\u003e is the main heading in the section, and \u003ccode\u003e\u0026lt;h3\u0026gt;Our Mission\u0026lt;/h3\u0026gt;\u003c/code\u003e is a subheading inside the article, so both show in order.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eA main heading 'About Us' and a subheading 'Our Mission' below it\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eHeadings show in order and size [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Headings inside semantic tags still display visibly [OK]\",\"common_mistakes\":[\"Thinking section/article hide headings\",\"Assuming only one heading shows\",\"Confusing heading order visually\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"rendering\",\"difficulty\":\"medium\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"rendering\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-07-06T07:05:26.889Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460073\",\"question_number\":4,\"question\":\"Identify the error in this HTML snippet for SEO:\u003cbr\u003e\u003cpre\u003e\u0026lt;head\u0026gt;\\n \u0026lt;title\u0026gt;My Site\u0026lt;/title\u0026gt;\\n \u0026lt;meta name=\\\"description\\\" content=\\\"Welcome to my site\\\"\u0026gt;\\n \u0026lt;h1\u0026gt;Home Page\u0026lt;/h1\u0026gt;\\n\u0026lt;/head\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"Missing \u003ccode\u003e\u0026lt;meta charset\u0026gt;\u003c/code\u003e tag\",\"B\":\"\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e should not be inside \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is empty\",\"D\":\"\u003ccode\u003e\u0026lt;meta name=\\\"description\\\"\u0026gt;\u003c/code\u003e is missing content\"},\"correct_answer\":[\"B\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Review correct placement of \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e tag is for visible page content and must be inside the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, not \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check other tags\u003c/h4\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e is correctly filled, and the meta description has content. Missing charset is not an error for SEO but recommended.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;h1\u0026gt; should not be inside \u0026lt;head\u0026gt;\u003c/strong\u003e -\u003e Option B\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eVisible content tags go in body, not head [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Keep \u003ch1\u003e inside \u003cbody\u003e, not \u003chead\u003e [OK]\",\"common_mistakes\":[\"Placing visible tags inside \u003chead\u003e\",\"Ignoring charset meta tag importance\",\"Leaving meta description empty\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"debug\",\"difficulty\":\"medium\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"debug\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":1,\"last_used_at\":\"2026-08-15T09:26:23.581Z\",\"topic_id\":\"html_p2_t5\"},{\"_id\":\"69b1785045baa2b585460074\",\"question_number\":5,\"question\":\"You want to improve SEO by organizing content semantically. Which combination of tags best structures a blog post with a title, author info, main content, and footer notes?\",\"options\":{\"A\":\"\u003ccode\u003e\u0026lt;article\u0026gt;\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;section\u0026gt;Content\u0026lt;/section\u0026gt;\u0026lt;footer\u0026gt;Author and notes\u0026lt;/footer\u0026gt;\u0026lt;/article\u0026gt;\u003c/code\u003e\",\"B\":\"\u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;div\u0026gt;Content\u0026lt;/div\u0026gt;\u0026lt;div\u0026gt;Author\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\",\"C\":\"\u003ccode\u003e\u0026lt;section\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u0026lt;/section\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u003c/code\u003e\",\"D\":\"\u003ccode\u003e\u0026lt;header\u0026gt;\u0026lt;h1\u0026gt;Title\u0026lt;/h1\u0026gt;\u0026lt;/header\u0026gt;\u0026lt;article\u0026gt;Content\u0026lt;/article\u0026gt;\u0026lt;footer\u0026gt;Author\u0026lt;/footer\u0026gt;\u003c/code\u003e\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"$1d\",\"quick_trick\":\"Wrap blog post in \u003carticle\u003e with header, section, footer [OK]\",\"common_mistakes\":[\"Using only \u003cdiv\u003e without semantic tags\",\"Separating header/footer outside article\",\"Misusing section and article tags\"],\"subject\":\"html\",\"pattern\":\"SEO-friendly HTML\",\"category\":\"Web Development\",\"question_format\":\"MCQ\",\"question_mode\":\"application\",\"difficulty\":\"hard\",\"topic\":\"HTML Best Practices\",\"type\":\"Web Development\",\"question_type\":\"application\",\"level\":\"hard\",\"test_type\":\"puzzle\",\"pattern_id\":\"html_seofriendly_html\",\"subjectTitle\":\"HTML\",\"part\":\"part-2\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"html_p2_t5\"}]},\"syllabusData\":{\"part\":\"part-2\",\"subject\":\"html\",\"difficulty\":\"intermediate\",\"metadata\":{\"total_topics\":5,\"total_patterns\":31,\"patterns_with_content\":31,\"created_at\":\"2026-02-28T20:17:21.804063Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Forms, Semantics \u0026 Accessibility\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p2_t1\",\"title\":\"Forms \u0026 Input Elements\",\"order\":1,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"html_purpose_of_forms\",\"title\":\"Purpose of forms\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_form_structure\",\"title\":\"Form structure\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_input_types_text_email_password_number\",\"title\":\"Input types (text, email, password, number)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_labels_and_placeholders\",\"title\":\"Labels and placeholders\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_radio_buttons_and_checkboxes\",\"title\":\"Radio buttons and checkboxes\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_select_dropdown\",\"title\":\"Select dropdown\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_textarea\",\"title\":\"Textarea\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"html_form_submission_basics\",\"title\":\"Form submission basics\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"html_p2_t2\",\"title\":\"HTML Attributes\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_are_attributes\",\"title\":\"What are attributes\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_global_attributes\",\"title\":\"Global attributes\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_id_attribute\",\"title\":\"ID attribute\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_class_attribute\",\"title\":\"Class attribute\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_title_attribute\",\"title\":\"Title attribute\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_data_attributes\",\"title\":\"Data attributes\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_attribute_best_practices\",\"title\":\"Attribute best practices\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p2_t3\",\"title\":\"Semantic HTML\",\"order\":3,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_why_semantic_html_matters\",\"title\":\"Why semantic HTML matters\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_header_footer_main\",\"title\":\"Header, footer, main\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_section_and_article\",\"title\":\"Section and article\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nav_element\",\"title\":\"Nav element\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_aside_element\",\"title\":\"Aside element\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_semantic_vs_nonsemantic_elements\",\"title\":\"Semantic vs non-semantic elements\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p2_t4\",\"title\":\"Accessibility Basics\",\"order\":4,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_why_accessibility_matters\",\"title\":\"Why accessibility matters\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_alt_text_for_images\",\"title\":\"Alt text for images\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_label_association\",\"title\":\"Label association\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_semantic_elements_and_screen_readers\",\"title\":\"Semantic elements and screen readers\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_keyboard_navigation_basics\",\"title\":\"Keyboard navigation basics\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p2_t5\",\"title\":\"HTML Best Practices\",\"order\":5,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_clean_html_structure\",\"title\":\"Clean HTML structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_proper_indentation\",\"title\":\"Proper indentation\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_avoiding_deprecated_tags\",\"title\":\"Avoiding deprecated tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_seofriendly_html\",\"title\":\"SEO-friendly HTML\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_html_validation_tools\",\"title\":\"HTML validation tools\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"RMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"SEO-friendly HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Quick revision of SEO-friendly HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"12\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Leyaa\"}],[\"$\",\"meta\",\"18\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:title\",\"content\":\"SEO-friendly HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Quick revision of SEO-friendly HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-2/html-seofriendly-html/review\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:alt\",\"content\":\"SEO-friendly HTML Cheat Sheet - Quick Revision\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"SEO-friendly HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Quick revision of SEO-friendly HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"35\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://leyaa.ai/Assets/Favicons/apple-touch-icon.png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script></body></html>