Every HTML5 page begins with a doctype declaration, written as `` on the very first line. This single line tells the browser to render the document in standards mode, following the HTML5 specification. Without it, browsers fall back to quirks mode, emulating legacy behaviors that break modern CSS layouts and box-model handling. A minimal valid document then declares a language with the `lang` attribute on the `` element, sets the character encoding via a `` tag (typically UTF-8, which supports virtually every written language and emoji), and provides a `
` inside the `<head>`. The charset declaration must appear within the first 1024 bytes so the browser can correctly decode the page without re-parsing.</p><p>The `<head>` element is often confused with the visible `<header>` element, but they serve very different purposes. The `<head>` holds metadata about the document, including title, character set, viewport settings, linked stylesheets, scripts, and Open Graph tags, and is never rendered as visible content. The `<header>`, by contrast, is a semantic landmark that represents introductory content for its nearest sectioning ancestor, such as a page banner with a logo and main navigation. A page may contain many `<header>` elements (for example, one inside each `<article>`), but only one `<head>`. Other useful head-only elements include `<base>` for setting a default base URL for relative links, `<link rel="canonical">` for declaring the master URL when the same content is reachable via multiple addresses, which helps consolidate SEO ranking signals, and `<meta name="theme-color">` for setting the color of the browser chrome on supporting devices.</p><p>HTML5 semantic elements describe the role of their content rather than just its appearance, providing meaningful structure that improves accessibility, SEO, and code readability. Common landmarks include `<header>` for introductory content, `<nav>` for major navigation blocks (screen readers use it to determine what to skip or jump to directly), `<main>` for the dominant content of the page, `<article>` for self-contained compositions like blog posts or news articles that could be independently distributed, `<section>` for thematic groupings typically with a heading, and `<footer>` for closing content such as copyright or contact information. The `<figure>` and `<figcaption>` combination wraps self-contained media like images, diagrams, or code snippets and attaches a caption or legend to them. Choosing `<section>` over `<div>` signals meaning to assistive technology and search engines, while `<div>` should be reserved for purely stylistic containers with no inherent semantic role. Special text-level semantic elements include `<small>` for side comments and fine print like copyright notices, `<time>` for marking dates with a machine-readable `datetime` attribute, `<abbr>` for abbreviations with their full expansion in the `title` attribute, `<cite>` for work titles, `<address>` for contact information tied to a specific article or the whole page, and `<q>` for short inline quotations paired with `<blockquote>` for longer ones.</p><p>HTML elements are classified into content categories that describe how they may contain or be contained. Flow content includes most body content, phrasing content covers inline text-level elements like `<span>` and `<a>`, embedded content includes images and videos, interactive content encompasses links and form controls, and metadata content lives exclusively in `<head>`. These categories enforce rules about which elements can nest inside which and help developers reason about document structure. The `lang` attribute declares the primary language of the document or an element, helping screen readers pick the right voice, search engines geo-target results, and translation tools operate correctly. The `dir` attribute declares text direction (`ltr` or `rtl`) for Arabic, Hebrew, Persian, and Urdu content, with the browser mirroring layouts accordingly. Preferring semantic elements over generic presentational ones such as `<b>` and `<i>`, which carry no meaning beyond bold and italic, ensures that assistive technology can interpret content correctly.</p>
</article>
<details class="lg:hidden mt-6 bg-white rounded-xl border-2 border-lca-ink p-4">
<summary class="font-display font-bold uppercase text-sm text-lca-ink cursor-pointer">All chapters</summary>
<ol class="mt-3 space-y-1.5">
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/foundations-of-html-document-structure"
class="text-sm font-semibold text-lca-ink">
<span class="text-lca-terra mr-1.5">1</span>Foundations of HTML Document Structure
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/forms-validation-accessibility"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">2</span>Forms, Validation & Accessibility
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/css-selectors-the-cascade"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">3</span>CSS Selectors & the Cascade
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/the-box-model-display-positioning"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">4</span>The Box Model, Display & Positioning
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/flexbox-css-grid-layout"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">5</span>Flexbox & CSS Grid Layout
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/responsive-design-units-custom-properties"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">6</span>Responsive Design, Units & Custom Properties
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/animations-transforms-visual-effects"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">7</span>Animations, Transforms & Visual Effects
</a>
</li>
<li>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/performance-loading-advanced-html"
class="text-sm font-semibold text-lca-muted-2">
<span class="text-lca-terra mr-1.5">8</span>Performance, Loading & Advanced HTML
</a>
</li>
</ol>
</details>
<nav class="flex flex-wrap justify-between gap-3 mt-6" aria-label="Chapter navigation">
<a href="https://learncoachassist.com/topics/html_css_fundamentals/textbook/forms-validation-accessibility"
rel="next"
class="flex-1 min-w-[45%] bg-white rounded-xl border-2 border-lca-ink p-4 hover:bg-lca-tag transition-colors text-right">
<span class="block text-[11px] font-extrabold uppercase tracking-wide text-lca-muted-2 mb-1">Next →</span>
<span class="block text-sm font-bold text-lca-ink">Forms, Validation & Accessibility</span>
</a>
</nav>
<section class="mt-10">
<h2 class="font-display font-extrabold uppercase text-xl text-lca-ink mb-4">Drill it</h2>
<p class="text-sm text-lca-muted mb-4">Reading is not remembering. These come from the HTML CSS Fundamentals deck:</p>
<div class="grid gap-3 sm:grid-cols-2">
<div class="bg-white rounded-xl border-2 border-lca-ink p-4">
<p class="text-[11px] font-extrabold uppercase tracking-wide text-lca-terra-dark mb-1.5">Q</p>
<p class="text-sm font-semibold text-lca-ink mb-2">What is the purpose of HTML5 semantic elements?</p>
<p class="text-sm text-lca-muted">HTML5 semantic elements provide meaningful structure to web pages. They describe the role of their content rather than just its appearance. Examples include <...</p>
</div>
<div class="bg-white rounded-xl border-2 border-lca-ink p-4">
<p class="text-[11px] font-extrabold uppercase tracking-wide text-lca-terra-dark mb-1.5">Q</p>
<p class="text-sm font-semibold text-lca-ink mb-2">What is the difference between <section> and <div>?</p>
<p class="text-sm text-lca-muted"><section> is a semantic element that represents a thematic grouping of content, typically with a heading. <div> is a non-semantic generic container...</p>
</div>
<div class="bg-white rounded-xl border-2 border-lca-ink p-4">
<p class="text-[11px] font-extrabold uppercase tracking-wide text-lca-terra-dark mb-1.5">Q</p>
<p class="text-sm font-semibold text-lca-ink mb-2">What is the <article> element used for?</p>
<p class="text-sm text-lca-muted">The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:Blog postsNews articlesF...</p>
</div>
<div class="bg-white rounded-xl border-2 border-lca-ink p-4">
<p class="text-[11px] font-extrabold uppercase tracking-wide text-lca-terra-dark mb-1.5">Q</p>
<p class="text-sm font-semibold text-lca-ink mb-2">What is the purpose of the <nav> element?</p>
<p class="text-sm text-lca-muted">The <nav> element represents a section of a page that contains navigation links, either within the site or to other sites. It is intended for major naviga...</p>
</div>
</div>
<div class="flex flex-wrap gap-3 mt-5">
<a href="https://learncoachassist.com/study/html-css-fundamentals"
class="px-7 py-3.5 bg-lca-terra text-lca-cream font-extrabold uppercase tracking-wide text-sm rounded-md hover:bg-lca-terra-dark transition-colors">
Study all 170 cards →
</a>
<a href="https://learncoachassist.com/topics/html_css_fundamentals/export.apkg"
class="px-7 py-3.5 border-2 border-lca-ink text-lca-ink font-extrabold uppercase tracking-wide text-sm rounded-md hover:bg-lca-ink hover:text-lca-cream transition-colors">
Export to Anki
</a>
</div>
</section>
</div>
</div>
</div>
<footer class="bg-lca-ink text-lca-cream/80 mt-12 border-t-[3px] border-lca-ink">
<div class="max-w-7xl mx-auto px-4 py-10">
<div class="mb-10">
<div id="newsletter-signup-footer" class="bg-lca-cream-alt border-2 border-lca-ink rounded-lg p-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<div class="flex-1">
<h3 class="font-display font-extrabold uppercase text-base text-lca-ink">📬 Get new decks and study tips in your inbox</h3>
<p class="text-sm text-lca-muted mt-1">Short, practical emails with new flashcard decks, learning science, and better study workflows. No spam.</p>
</div>
<form class="newsletter-form flex w-full flex-col gap-2 sm:w-auto sm:flex-row shrink-0" data-source="footer">
<input type="hidden" name="_token" value="uokFhdfzuOu66C8eYxfS4DoL1dqopHLOUh0UAQyf" autocomplete="off"> <input type="email" name="email" required placeholder="you@email.com"
class="w-full flex-1 sm:w-56 px-4 py-2.5 border-2 border-lca-ink rounded-md bg-lca-cream text-sm text-lca-ink placeholder-lca-muted-3 focus:outline-none focus:ring-2 focus:ring-lca-terra"
aria-label="Email address">
<input type="text" name="hp" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;">
<button type="submit" class="w-full sm:w-auto px-5 py-2.5 bg-lca-terra text-lca-cream text-sm font-extrabold uppercase tracking-wide rounded-md hover:bg-lca-terra-dark transition-colors whitespace-normal">Get updates</button>
</form>
</div>
<p class="newsletter-success hidden mt-3 text-sm text-lca-olive font-bold">✅ Thanks for subscribing! Check your inbox.</p>
<p class="newsletter-error hidden mt-3 text-sm text-lca-terra-dark font-bold"></p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.newsletter-form').forEach(form => {
form.addEventListener('submit', async (e) => {
e.preventDefault();
const email = form.querySelector('input[name="email"]').value;
const source = form.dataset.source;
const container = form.closest('[id^="newsletter-signup"]');
const successEl = container.querySelector('.newsletter-success');
const errorEl = container.querySelector('.newsletter-error');
const btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
btn.textContent = "Joining...";
errorEl.classList.add('hidden');
try {
const res = await fetch('https://learncoachassist.com/api/newsletter/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
},
body: JSON.stringify({ email, source, hp: form.querySelector('input[name="hp"]')?.value || '' }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.message || "Something went wrong");
}
form.classList.add('hidden');
successEl.classList.remove('hidden');
} catch (err) {
errorEl.textContent = err.message || "Something went wrong. Please try again.";
errorEl.classList.remove('hidden');
btn.disabled = false;
btn.textContent = "Get updates";
}
});
});
});
</script>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<span class="text-lg font-display font-extrabold uppercase tracking-tight text-lca-cream flex items-center gap-2">
<span class="rounded-md bg-lca-terra text-lca-cream font-display shrink-0" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;line-height:1" aria-hidden="true">L</span>
LearnCoachAssist
</span>
<p class="mt-2 text-sm text-lca-cream/60 leading-relaxed">Free flashcards for any subject. Powered by spaced repetition to help you learn faster and retain more.</p>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Learn</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/topics" class="text-lca-cream/70 hover:text-lca-gold transition-colors">All Topics</a></li>
<li><a href="https://learncoachassist.com/packs" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Learning Packs</a></li>
<li><a href="https://learncoachassist.com/learn" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Learning Paths</a></li>
<li><a href="https://learncoachassist.com/compare" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Compare Topics</a></li>
<li><a href="https://learncoachassist.com" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Study Flashcards</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Product</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/blog" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Blog</a></li>
<li><a href="https://learncoachassist.com/changelog" class="text-lca-cream/70 hover:text-lca-gold transition-colors">What's New</a></li>
<li><a href="https://learncoachassist.com/about" class="text-lca-cream/70 hover:text-lca-gold transition-colors">About</a></li>
<li><a href="https://learncoachassist.com/faq" class="text-lca-cream/70 hover:text-lca-gold transition-colors">FAQ</a></li>
<li><a href="https://learncoachassist.com/contact" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Contact</a></li>
<li><a href="https://learncoachassist.com/sitemap" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Sitemap</a></li>
<li><a href="https://learncoachassist.com/ai/generate" class="text-lca-cream/70 hover:text-lca-gold transition-colors">AI Deck Generator</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Categories</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/topics/category/programming" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Programming</a></li>
<li><a href="https://learncoachassist.com/topics/category/mathematics" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Mathematics</a></li>
<li><a href="https://learncoachassist.com/topics/category/ai" class="text-lca-cream/70 hover:text-lca-gold transition-colors">AI</a></li>
<li><a href="https://learncoachassist.com/topics/category/business" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Business</a></li>
<li><a href="https://learncoachassist.com/topics/category/science" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Science</a></li>
<li><a href="https://learncoachassist.com/topics/category/psychology" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Psychology</a></li>
<li><a href="https://learncoachassist.com/topics/category/languages" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Languages</a></li>
<li><a href="https://learncoachassist.com/topics/category/marketing" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Marketing</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-6 border-t border-lca-cream/15 text-center text-xs text-lca-cream/50">
© 2026 LearnCoachAssist. Free flashcard learning for everyone.
·
<button type="button" onclick="window.gdprCookieConsent && window.gdprCookieConsent.openSettings()" class="text-lca-cream/60 hover:text-lca-cream underline bg-transparent border-0 p-0 cursor-pointer">Cookie settings</button>
</div>
</div>
</footer>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js" crossorigin="anonymous"
onload="renderMathInElement(document.body,{delimiters:[{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<style>
.lca-glossary-term { border-bottom: 1px dotted currentColor; cursor: help; }
#lca-glossary-popover {
position: fixed;
z-index: 80;
max-width: 260px;
background: var(--color-lca-ink, #241D15);
color: var(--color-lca-cream, #FBF4E6);
font-size: 0.75rem;
line-height: 1.35;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease-out;
}
#lca-glossary-popover.is-visible { opacity: 1; }
</style>
<div id="lca-glossary-popover" role="tooltip" aria-hidden="true"></div>
<script>
(function () {
function popover() { return document.getElementById('lca-glossary-popover'); }
function show(el) {
var definition = el.getAttribute('data-definition');
if (!definition) return;
var pop = popover();
if (!pop) return;
pop.textContent = definition;
pop.setAttribute('aria-hidden', 'false');
pop.classList.add('is-visible');
var rect = el.getBoundingClientRect();
var popRect = pop.getBoundingClientRect();
var top = rect.top - popRect.height - 8;
if (top < 8) top = rect.bottom + 8;
var left = rect.left;
if (left + popRect.width > window.innerWidth - 8) left = window.innerWidth - popRect.width - 8;
if (left < 8) left = 8;
pop.style.top = top + 'px';
pop.style.left = left + 'px';
}
function hide() {
var pop = popover();
if (!pop) return;
pop.classList.remove('is-visible');
pop.setAttribute('aria-hidden', 'true');
}
document.addEventListener('mouseover', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) show(el);
});
document.addEventListener('mouseout', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) hide();
});
document.addEventListener('focusin', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) show(el);
});
document.addEventListener('focusout', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) hide();
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') hide();
});
document.addEventListener('touchstart', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) {
e.preventDefault();
show(el);
setTimeout(hide, 3000);
}
}, { passive: false });
})();
</script>
<script>if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
<script src="/gdpr-cookie-consent.js?v=20260711" defer></script>
</body>
</html>