Recall & Review
beginner
What is the purpose of the <head> section in an HTML document?
The <head> section contains information about the page like its title, links to stylesheets, scripts, and metadata. It does not show content directly on the page.
Click to reveal answer
beginner
What kind of content goes inside the <body> section?
The <body> section holds all the visible content of the webpage, such as text, images, links, and other elements that users see and interact with.
Click to reveal answer
beginner
Why should the <title> tag be placed inside the <head> section?
The <title> tag sets the page title shown in the browser tab and search results. It must be inside <head> so browsers can find and display it properly.
Click to reveal answer
intermediate
Can scripts be placed in both <head> and <body>? What is the difference?
Yes, scripts can be in both. Scripts in <head> load before the page content, which can delay showing the page. Scripts in <body> usually load after content, improving user experience.
Click to reveal answer
beginner
What is metadata and where is it placed in an HTML document?
Metadata is information about the webpage like author, description, and character set. It is placed inside the <head> section and helps browsers and search engines.
Click to reveal answer
Where should the <title> tag be placed in an HTML document?
✗ Incorrect
The tag belongs inside the <head> section to set the page title shown in the browser tab.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">Which section contains the visible content of a webpage?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><meta></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><footer></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><head></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap"><body></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The <body> section holds all the visible content users see on the webpage.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">What is NOT typically found in the <head> section?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Links to CSS files</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Page title</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Paragraph text</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Metadata tags</span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Paragraph text is visible content and belongs in the <body>, not the <head>.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">Why might scripts be placed at the end of the <body> section?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">To improve page load speed and user experience</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Because scripts cannot be in <head></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">To load scripts before content</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">To hide scripts from search engines</span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Placing scripts at the end of <body> lets the page content load first, making the page appear faster.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">Which tag is used to specify the character encoding of the webpage?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><meta charset></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><head charset></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><encoding></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap"><charset></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The <meta charset="UTF-8"> tag inside <head> sets the character encoding.</div></div></div></div><div class="recall-section "><div class="recall-prompt-card"><div class="recall-prompt-text">Explain the roles of the <head> and <body> sections in an HTML document.</div><textarea class="recall-prompt-textarea" id="prompt-rp1" 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">Think about what the user sees versus what helps the browser.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got <!-- -->/<!-- -->4<!-- --> concepts.<ul class="expected-elements-list"></ul></div></div></div><div class="recall-prompt-card"><div class="recall-prompt-text">Describe why metadata is important and where it should be placed in HTML.</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">Metadata is like the webpage's ID card.</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></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-fd24bd8e19d2841a.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/b133bdac07c7940e.css\",\"style\"]\n2:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/caf3ca742c7945f9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\n10:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n12:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"html\",\"d\"]\nb:[\"part\",\"part-1\",\"d\"]\nc:[\"pattern\",\"html-head-and-body-sections\",\"d\"]\nd:[\"mode\",\"review\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b133bdac07c7940e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"hN8t5By7h5nzsrdSose07\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/html/part-1/html-head-and-body-sections/review\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-head-and-body-sections\",\"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-1\",\"d\"],{\"children\":[[\"pattern\",\"html-head-and-body-sections\",\"d\"],{\"children\":[[\"mode\",\"review\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$Lf\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-506edbde2b5b3f55.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-6b3bda54d2fd2e14.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-09ee572e3d7819a2.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8935\",\"static/chunks/8935-c1c159349bf7da40.js\",\"9663\",\"static/chunks/9663-fdcd080af3916e3e.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-1fc9c577a9450e06.js\"],\"default\"]\n16:T478,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Head and body sections in HTML - Cheat Sheet \u0026 Quick Revision\",\"description\":\"Quick revision of Head and body sections in 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-1/html-head-and-body-sections/review\",\"learningResourceType\":\"Tutorial\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Head and body sections in 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\":\"ListItem\",\"position\":2,\"name\":\"Head and body sections in HTML - Cheat Sheet \u0026 Quick Revision\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quick Review\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections/review\"}]}}"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",null,{\"subject\":\"html\",\"dbSubject\":\"html\",\"part\":\"part-1\",\"pattern\":\"html_head_and_body_sections\",\"modeSlug\":\"review\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-1/html-head-and-body-sections/review\",\"active\":true}],\"isLoggedIn\":false,\"seoH1\":\"Head and body sections in HTML - Cheat Sheet \u0026 Quick Revision\",\"contentData\":{\"pattern_id\":\"html_head_and_body_sections\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"RMC\":{\"concept\":\"Head and body sections\",\"mode\":\"RMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"flashcards\":[{\"id\":\"f1\",\"front\":\"What is the purpose of the \u003chead\u003e section in an HTML document?\",\"back\":\"The \u003chead\u003e section contains information about the page like its title, links to stylesheets, scripts, and metadata. It does not show content directly on the page.\",\"difficulty\":\"beginner\",\"tags\":[\"html\",\"head\",\"metadata\"]},{\"id\":\"f2\",\"front\":\"What kind of content goes inside the \u003cbody\u003e section?\",\"back\":\"The \u003cbody\u003e section holds all the visible content of the webpage, such as text, images, links, and other elements that users see and interact with.\",\"difficulty\":\"beginner\",\"tags\":[\"html\",\"body\",\"content\"]},{\"id\":\"f3\",\"front\":\"Why should the \u003ctitle\u003e tag be placed inside the \u003chead\u003e section?\",\"back\":\"The \u003ctitle\u003e tag sets the page title shown in the browser tab and search results. It must be inside \u003chead\u003e so browsers can find and display it properly.\",\"difficulty\":\"beginner\",\"tags\":[\"html\",\"title\",\"head\"]},{\"id\":\"f4\",\"front\":\"Can scripts be placed in both \u003chead\u003e and \u003cbody\u003e? What is the difference?\",\"back\":\"Yes, scripts can be in both. Scripts in \u003chead\u003e load before the page content, which can delay showing the page. Scripts in \u003cbody\u003e usually load after content, improving user experience.\",\"difficulty\":\"intermediate\",\"tags\":[\"html\",\"scripts\",\"head\",\"body\"]},{\"id\":\"f5\",\"front\":\"What is metadata and where is it placed in an HTML document?\",\"back\":\"Metadata is information about the webpage like author, description, and character set. It is placed inside the \u003chead\u003e section and helps browsers and search engines.\",\"difficulty\":\"beginner\",\"tags\":[\"html\",\"metadata\",\"head\"]}],\"micro_quiz\":[{\"id\":\"mq1\",\"question\":\"Where should the \u003ctitle\u003e tag be placed in an HTML document?\",\"options\":{\"A\":\"Inside the \u003cbody\u003e section\",\"B\":\"Inside the \u003chead\u003e section\",\"C\":\"Outside both \u003chead\u003e and \u003cbody\u003e\",\"D\":\"Inside a \u003cfooter\u003e tag\"},\"correct_answer\":[\"B\"],\"explanation\":\"The \u003ctitle\u003e tag belongs inside the \u003chead\u003e section to set the page title shown in the browser tab.\"},{\"id\":\"mq2\",\"question\":\"Which section contains the visible content of a webpage?\",\"options\":{\"A\":\"\u003cmeta\u003e\",\"B\":\"\u003cfooter\u003e\",\"C\":\"\u003chead\u003e\",\"D\":\"\u003cbody\u003e\"},\"correct_answer\":[\"D\"],\"explanation\":\"The \u003cbody\u003e section holds all the visible content users see on the webpage.\"},{\"id\":\"mq3\",\"question\":\"What is NOT typically found in the \u003chead\u003e section?\",\"options\":{\"A\":\"Links to CSS files\",\"B\":\"Page title\",\"C\":\"Paragraph text\",\"D\":\"Metadata tags\"},\"correct_answer\":[\"C\"],\"explanation\":\"Paragraph text is visible content and belongs in the \u003cbody\u003e, not the \u003chead\u003e.\"},{\"id\":\"mq4\",\"question\":\"Why might scripts be placed at the end of the \u003cbody\u003e section?\",\"options\":{\"A\":\"To improve page load speed and user experience\",\"B\":\"Because scripts cannot be in \u003chead\u003e\",\"C\":\"To load scripts before content\",\"D\":\"To hide scripts from search engines\"},\"correct_answer\":[\"A\"],\"explanation\":\"Placing scripts at the end of \u003cbody\u003e lets the page content load first, making the page appear faster.\"},{\"id\":\"mq5\",\"question\":\"Which tag is used to specify the character encoding of the webpage?\",\"options\":{\"A\":\"\u003cmeta charset\u003e\",\"B\":\"\u003chead charset\u003e\",\"C\":\"\u003cencoding\u003e\",\"D\":\"\u003ccharset\u003e\"},\"correct_answer\":[\"A\"],\"explanation\":\"The \u003cmeta charset=\\\"UTF-8\\\"\u003e tag inside \u003chead\u003e sets the character encoding.\"}],\"recall_prompts\":[{\"id\":\"rp1\",\"prompt\":\"Explain the roles of the \u003chead\u003e and \u003cbody\u003e sections in an HTML document.\",\"expected_elements\":[\"head contains metadata and links\",\"body contains visible content\",\"title tag in head\",\"scripts can be in both but placement affects loading\"],\"hint\":\"Think about what the user sees versus what helps the browser.\"},{\"id\":\"rp2\",\"prompt\":\"Describe why metadata is important and where it should be placed in HTML.\",\"expected_elements\":[\"metadata provides info about the page\",\"helps browsers and search engines\",\"placed inside the head section\"],\"hint\":\"Metadata is like the webpage's ID card.\"}],\"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\":\"Head and body sections\"},\"syllabusData\":{\"subject\":\"html\",\"part\":\"part-1\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":7,\"total_patterns\":43,\"patterns_with_content\":43,\"created_at\":\"2026-02-28T20:17:17.741100Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Core Structure \u0026 Content\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p1_t1\",\"title\":\"HTML Basics \u0026 Web Fundamentals\",\"order\":1,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_html\",\"title\":\"What is HTML\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_role_of_html_in_web_development\",\"title\":\"Role of HTML in web development\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_how_browsers_read_html\",\"title\":\"How browsers read HTML\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_html_document_structure\",\"title\":\"HTML document structure\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_doctype_declaration\",\"title\":\"DOCTYPE declaration\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_head_and_body_sections\",\"title\":\"Head and body sections\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_first_html_page\",\"title\":\"First HTML page\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t2\",\"title\":\"HTML Elements \u0026 Tags\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_an_html_element\",\"title\":\"What is an HTML element\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_opening_and_closing_tags\",\"title\":\"Opening and closing tags\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_selfclosing_tags\",\"title\":\"Self-closing tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nested_elements\",\"title\":\"Nested elements\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_blocklevel_elements\",\"title\":\"Block-level elements\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_inline_elements\",\"title\":\"Inline elements\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_common_html_mistakes\",\"title\":\"Common HTML mistakes\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t3\",\"title\":\"Text Content \u0026 Formatting\",\"order\":3,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_headings_h1h6\",\"title\":\"Headings (h1–h6)\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_paragraphs\",\"title\":\"Paragraphs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_line_breaks_and_horizontal_rules\",\"title\":\"Line breaks and horizontal rules\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_bold_and_italic_text\",\"title\":\"Bold and italic text\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_strong_vs_b_tag\",\"title\":\"Strong vs b tag\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_em_vs_i_tag\",\"title\":\"Em vs i tag\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_preformatted_text\",\"title\":\"Preformatted text\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t4\",\"title\":\"Links \u0026 Navigation\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_anchor_tag_basics\",\"title\":\"Anchor tag basics\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_absolute_vs_relative_urls\",\"title\":\"Absolute vs relative URLs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_opening_links_in_new_tab\",\"title\":\"Opening links in new tab\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_linking_to_sections_using_ids\",\"title\":\"Linking to sections using IDs\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_email_and_phone_links\",\"title\":\"Email and phone links\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_navigation_structure_basics\",\"title\":\"Navigation structure basics\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t5\",\"title\":\"Images \u0026 Media\",\"order\":5,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_image_tag_usage\",\"title\":\"Image tag usage\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_image_source_and_alt_attribute\",\"title\":\"Image source and alt attribute\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_image_sizing_basics\",\"title\":\"Image sizing basics\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_audio_tag_basics\",\"title\":\"Audio tag basics\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_video_tag_basics\",\"title\":\"Video tag basics\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_media_formats_overview\",\"title\":\"Media formats overview\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t6\",\"title\":\"Lists\",\"order\":6,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_ordered_lists\",\"title\":\"Ordered lists\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_unordered_lists\",\"title\":\"Unordered lists\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_nested_lists\",\"title\":\"Nested lists\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_description_lists\",\"title\":\"Description lists\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_list_use_cases_in_layout\",\"title\":\"List use cases in layout\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p1_t7\",\"title\":\"Tables\",\"order\":7,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_table_structure\",\"title\":\"Table structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_table_rows_and_columns\",\"title\":\"Table rows and columns\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_table_headers\",\"title\":\"Table headers\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_cell_merging\",\"title\":\"Cell merging\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_table_accessibility_basics\",\"title\":\"Table accessibility basics\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"RMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Head and body sections in HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Quick revision of Head and body sections in 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\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections/review\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections/review\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections/review\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Head and body sections in HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Quick revision of Head and body sections in HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-1/html-head-and-body-sections/review\"}],[\"$\",\"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\":\"Head and body sections in HTML Cheat Sheet - Quick Revision\"}],[\"$\",\"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\":\"Head and body sections in HTML Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Quick revision of Head and body sections in HTML. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>