Recall & Review
beginner
What is the purpose of the
<!DOCTYPE html> declaration in an HTML document?It tells the browser that the document is an HTML5 document, ensuring proper rendering and standards compliance.
Click to reveal answer
beginner
Name the main sections inside a basic HTML document structure.
The main sections are
<head> and <body>. The <head> contains metadata and links, while the <body> contains the visible content.Click to reveal answer
beginner
What is the role of the
<meta charset="UTF-8"> tag in the <head> section?It sets the character encoding to UTF-8, which supports most characters and symbols, ensuring text displays correctly.
Click to reveal answer
beginner
Why should the
<title> tag be included inside the <head>?The
<title> sets the page title shown in the browser tab and helps with search engine results and accessibility.Click to reveal answer
intermediate
What semantic element is used to wrap the main content visible to users in an HTML document?
The
<main> element is used to wrap the main content, helping screen readers and improving page structure.Click to reveal answer
Which tag is used to define the start of an HTML document?
✗ Incorrect
The declaration tells the browser this is an HTML5 document and must be the very first line.
Where should the
<title> tag be placed in an HTML document?✗ Incorrect
The tag belongs inside the <head> section to set the page title.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">What does the <code><meta charset="UTF-8"></code> tag do?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Links to a stylesheet</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Sets the page language</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Defines character encoding</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Adds a script</span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">It defines the character encoding so text displays correctly.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">Which element 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"><body></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"><nav></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The <body> element holds all the content users see on the page.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">What is the correct order of tags at the start of a simple HTML document?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><html> → <!DOCTYPE html> → <head></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><body> → <html> → <head></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><head> → <html> → <body></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap"><!DOCTYPE html> → <html> → <head></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The document starts with <!DOCTYPE html>, then <html>, then <head>.</div></div></div></div><div class="recall-section "><div class="recall-prompt-card"><div class="recall-prompt-text">Describe the basic structure of an HTML document and explain the purpose of each main part.</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 browser needs to know first and what parts hold metadata vs visible content.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got <!-- -->/<!-- -->6<!-- --> concepts.<ul class="expected-elements-list"></ul></div></div></div><div class="recall-prompt-card"><div class="recall-prompt-text">Why is it important to include semantic elements like <main> and proper meta tags in your HTML document?</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 how different users and tools understand your webpage.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got <!-- -->/<!-- -->5<!-- --> 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-html-document-structure\",\"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-html-document-structure/review\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-html-document-structure\",\"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-html-document-structure\",\"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:T45f,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"HTML document structure - Cheat Sheet \u0026 Quick Revision\",\"description\":\"Quick revision of HTML document structure. 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-html-document-structure/review\",\"learningResourceType\":\"Tutorial\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"HTML document structure - 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\":\"HTML document structure - Cheat Sheet \u0026 Quick Revision\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-html-document-structure\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quick Review\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-html-document-structure/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_html_document_structure\",\"modeSlug\":\"review\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-1/html-html-document-structure/review\",\"active\":true}],\"isLoggedIn\":false,\"seoH1\":\"HTML document structure - Cheat Sheet \u0026 Quick Revision\",\"contentData\":{\"pattern_id\":\"html_html_document_structure\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"RMC\":{\"concept\":\"HTML document structure\",\"mode\":\"RMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"flashcards\":[{\"id\":\"f1\",\"front\":\"What is the purpose of the \u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e declaration in an HTML document?\",\"back\":\"It tells the browser that the document is an HTML5 document, ensuring proper rendering and standards compliance.\",\"difficulty\":\"beginner\",\"tags\":[\"doctype\",\"html5\",\"basics\"]},{\"id\":\"f2\",\"front\":\"Name the main sections inside a basic HTML document structure.\",\"back\":\"The main sections are \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e. The \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e contains metadata and links, while the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e contains the visible content.\",\"difficulty\":\"beginner\",\"tags\":[\"html structure\",\"head\",\"body\"]},{\"id\":\"f3\",\"front\":\"What is the role of the \u003ccode\u003e\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;\u003c/code\u003e tag in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section?\",\"back\":\"It sets the character encoding to UTF-8, which supports most characters and symbols, ensuring text displays correctly.\",\"difficulty\":\"beginner\",\"tags\":[\"meta\",\"charset\",\"accessibility\"]},{\"id\":\"f4\",\"front\":\"Why should the \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag be included inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e?\",\"back\":\"The \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e sets the page title shown in the browser tab and helps with search engine results and accessibility.\",\"difficulty\":\"beginner\",\"tags\":[\"title\",\"head\",\"seo\"]},{\"id\":\"f5\",\"front\":\"What semantic element is used to wrap the main content visible to users in an HTML document?\",\"back\":\"The \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e element is used to wrap the main content, helping screen readers and improving page structure.\",\"difficulty\":\"intermediate\",\"tags\":[\"semantic html\",\"main\",\"accessibility\"]}],\"micro_quiz\":[{\"id\":\"mq1\",\"question\":\"Which tag is used to define the start of an HTML document?\",\"options\":{\"A\":\"\u003c!DOCTYPE html\u003e\",\"B\":\"\u003chtml\u003e\",\"C\":\"\u003chead\u003e\",\"D\":\"\u003cbody\u003e\"},\"correct_answer\":[\"A\"],\"explanation\":\"The \u003c!DOCTYPE html\u003e declaration tells the browser this is an HTML5 document and must be the very first line.\"},{\"id\":\"mq2\",\"question\":\"Where should the \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag be placed in an HTML document?\",\"options\":{\"A\":\"Inside the \u003cbody\u003e\",\"B\":\"Inside the \u003chead\u003e\",\"C\":\"Outside \u003chtml\u003e\",\"D\":\"At the end of the document\"},\"correct_answer\":[\"B\"],\"explanation\":\"The \u003ctitle\u003e tag belongs inside the \u003chead\u003e section to set the page title.\"},{\"id\":\"mq3\",\"question\":\"What does the \u003ccode\u003e\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;\u003c/code\u003e tag do?\",\"options\":{\"A\":\"Links to a stylesheet\",\"B\":\"Sets the page language\",\"C\":\"Defines character encoding\",\"D\":\"Adds a script\"},\"correct_answer\":[\"C\"],\"explanation\":\"It defines the character encoding so text displays correctly.\"},{\"id\":\"mq4\",\"question\":\"Which element contains the visible content of a webpage?\",\"options\":{\"A\":\"\u003cbody\u003e\",\"B\":\"\u003cfooter\u003e\",\"C\":\"\u003chead\u003e\",\"D\":\"\u003cnav\u003e\"},\"correct_answer\":[\"A\"],\"explanation\":\"The \u003cbody\u003e element holds all the content users see on the page.\"},{\"id\":\"mq5\",\"question\":\"What is the correct order of tags at the start of a simple HTML document?\",\"options\":{\"A\":\"\u003chtml\u003e → \u003c!DOCTYPE html\u003e → \u003chead\u003e\",\"B\":\"\u003cbody\u003e → \u003chtml\u003e → \u003chead\u003e\",\"C\":\"\u003chead\u003e → \u003chtml\u003e → \u003cbody\u003e\",\"D\":\"\u003c!DOCTYPE html\u003e → \u003chtml\u003e → \u003chead\u003e\"},\"correct_answer\":[\"D\"],\"explanation\":\"The document starts with \u003c!DOCTYPE html\u003e, then \u003chtml\u003e, then \u003chead\u003e.\"}],\"recall_prompts\":[{\"id\":\"rp1\",\"prompt\":\"Describe the basic structure of an HTML document and explain the purpose of each main part.\",\"expected_elements\":[\"\u003c!DOCTYPE html\u003e\",\"\u003chtml\u003e element\",\"\u003chead\u003e section\",\"\u003cbody\u003e section\",\"meta charset\",\"title tag\"],\"hint\":\"Think about what the browser needs to know first and what parts hold metadata vs visible content.\"},{\"id\":\"rp2\",\"prompt\":\"Why is it important to include semantic elements like \u003cmain\u003e and proper meta tags in your HTML document?\",\"expected_elements\":[\"accessibility\",\"screen readers\",\"SEO\",\"correct text display\",\"page structure\"],\"hint\":\"Consider how different users and tools understand your webpage.\"}],\"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\":\"HTML document structure\"},\"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\":\"HTML document structure Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Quick revision of HTML document structure. 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-html-document-structure/review\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-html-document-structure/review\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-html-document-structure/review\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"HTML document structure Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Quick revision of HTML document structure. 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-html-document-structure/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\":\"HTML document structure 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\":\"HTML document structure Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Quick revision of HTML document structure. 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>