❓What is HTML
HTML stands for Hyper Text Markup Language, and it's the foundation of every website you see on the internet.
Think of HTML as the skeleton of a web page — it gives your content structure and meaning. Without it, a web page would just be a blank screen.
🧠 Importance of HTML
It tells the browser what each part of a page is (headings, paragraphs, links, images, buttons, etc.)
HTML doesn't make things look pretty (that’s CSS) — it simply organizes the content
Every other web technology (like CSS or JavaScript) is built on top of HTML
<div class="infographic-htmlimportance">
<style>
.infographic-htmlimportance {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-deep: #1942a8;
--accent-soft: #e3ebfd;
--line: #ddd6c9;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
--mono-font: 'IBM Plex Mono', monospace;
background: transparent;
color: var(--ink);
font-family: var(--body-font);
}
.infographic-htmlimportance * { box-sizing: border-box; }
.hi-head { margin-bottom: 1.5rem; }
.hi-eyebrow {
font-family: var(--mono-font); font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent); margin: 0 0 0.45rem;
display: flex; align-items: center; gap: 0.4rem;
}
.hi-eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--accent); display: inline-block; }
.hi-title {
font-family: var(--display-font); font-size: clamp(1.5rem, 4vw, 2.3rem);
margin: 0 0 0.55rem; line-height: 1.12; letter-spacing: -0.01em;
}
.hi-sub { color: var(--ink-soft); font-size: 0.95rem; max-width: 560px; line-height: 1.55; margin: 0; }
.hi-points { list-style: none; margin: 1.1rem 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hi-points li {
font-size: 0.86rem; color: var(--ink-soft); display: flex; gap: 0.55rem; align-items: flex-start;
line-height: 1.5;
}
.hi-points li::before { content: "—"; color: var(--accent); flex-shrink: 0; font-weight: 600; }
.hi-points li b { color: var(--ink); font-weight: 600; }
/* ===== Tabs / stepper ===== */
.hi-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.hi-tab {
font: inherit; font-size: 0.78rem; font-weight: 600; font-family: var(--mono-font);
background: var(--paper-alt); border: 1.5px solid var(--line); border-radius: 100px;
padding: 0.45rem 1rem; cursor: pointer; color: var(--ink-soft);
transition: all 0.2s; display: flex; align-items: center; gap: 0.4rem;
}
.hi-tab .hi-tab-num {
width: 16px; height: 16px; border-radius: 50%; background: var(--line); color: #fff;
font-size: 0.65rem; display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.hi-tab:hover { border-color: var(--accent); color: var(--ink); }
.hi-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hi-tab.is-active .hi-tab-num { background: rgba(255,255,255,0.3); }
/* ===== Stage wrap ===== */
.hi-stage-wrap { width: 100%; }
.hi-stage {
position: relative; border-radius: 8px; overflow: hidden;
border: 2px solid var(--ink); transition: border-color 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 10px 24px -10px rgba(26,26,26,0.16);
}
/* ---- Stage 1: HTML only — bland, unstyled, browser-default look ---- */
.hi-page { background: #fff; font-family: Times, "Times New Roman", serif; color: #000; transition: all 0.4s ease; }
.hi-page * { transition: all 0.4s ease; }
.hi-h1 { font-size: 1.4rem; margin: 0.7rem 0.8rem 0.3rem; font-weight: bold; }
.hi-nav { margin: 0 0.8rem 0.6rem; display: flex; gap: 0.9rem; }
.hi-nav a { color: #0000EE; text-decoration: underline; font-size: 0.85rem; }
.hi-p { margin: 0 0.8rem 0.5rem; font-size: 0.88rem; line-height: 1.4; color: #000; }
.hi-img-box { margin: 0.6rem 0.8rem; width: 64px; height: 44px; border: 1px solid #000; background: #fff; }
.hi-btn-el {
display: inline-block; margin: 0.4rem 0.8rem 0.8rem; font-family: inherit; font-size: 0.85rem;
background: #efefef; border: 2px outset #ccc; border-radius: 0; padding: 0.25rem 0.7rem;
color: #000; cursor: pointer;
}
/* ---- Stage 2: + CSS — colorful, spaced, brand-styled ---- */
.hi-stage[data-stage="2"] .hi-page,
.hi-stage[data-stage="3"] .hi-page {
font-family: var(--body-font); background: #fff; padding: 1.4rem; max-width: 560px; margin: 0 auto;
}
.hi-stage[data-stage="2"] .hi-h1,
.hi-stage[data-stage="3"] .hi-h1 {
font-family: var(--display-font); font-weight: 700; color: var(--accent-deep);
margin: 0 0 0.5rem; font-size: 1.5rem;
}
.hi-stage[data-stage="2"] .hi-nav,
.hi-stage[data-stage="3"] .hi-nav {
margin: 0 0 1rem; gap: 0.5rem;
}
.hi-stage[data-stage="2"] .hi-nav a,
.hi-stage[data-stage="3"] .hi-nav a {
color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.78rem;
background: var(--accent-soft); padding: 0.25rem 0.65rem; border-radius: 100px;
}
.hi-stage[data-stage="2"] .hi-p,
.hi-stage[data-stage="3"] .hi-p {
margin: 0 0 0.8rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft);
}
.hi-stage[data-stage="2"] .hi-img-box,
.hi-stage[data-stage="3"] .hi-img-box {
margin: 0 0 0.9rem; width: 100%; height: 90px; border: none; border-radius: 6px;
background: linear-gradient(135deg, var(--accent-soft), var(--accent));
}
.hi-stage[data-stage="2"] .hi-btn-el,
.hi-stage[data-stage="3"] .hi-btn-el {
display: inline-block; margin: 0; font-weight: 600; border-radius: 6px; border: none;
padding: 0.55rem 1.1rem; background: var(--accent); color: #fff; box-shadow: 0 4px 10px -2px rgba(37,99,235,0.4);
}
/* ---- Stage 3: + JS — same styled look, but the button now does something ---- */
.hi-stage[data-stage="3"] .hi-btn-el {
background: #f5c518; color: #1a1a1a; box-shadow: 0 4px 10px -2px rgba(245,197,24,0.5);
}
.hi-stage[data-stage="3"] .hi-btn-el { cursor: pointer; }
.hi-stage[data-stage="3"] .hi-btn-el:active { transform: scale(0.96); }
.hi-stage:not([data-stage="3"]) .hi-btn-el { cursor: default; }
/* dark mode — only meaningful on stage 3, toggled by JS */
.hi-stage[data-stage="3"] .hi-page[data-dark="true"] {
background: #15171c;
}
.hi-stage[data-stage="3"] .hi-page[data-dark="true"] .hi-h1 { color: #7fa8ff; }
.hi-stage[data-stage="3"] .hi-page[data-dark="true"] .hi-nav a {
color: #cfe0ff; background: #232735;
}
.hi-stage[data-stage="3"] .hi-page[data-dark="true"] .hi-p { color: #a7adba; }
.hi-stage[data-stage="3"] .hi-page[data-dark="true"] .hi-img-box {
background: linear-gradient(135deg, #232735, var(--accent-deep));
}
.hi-stage-label {
font-family: var(--mono-font); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--ink-soft); text-align: center; margin: 0.8rem 0 0;
}
.hi-stage-label b { color: var(--accent); }
@media (max-width: 500px) {
.hi-tabs { gap: 0.35rem; }
.hi-tab { padding: 0.4rem 0.75rem; font-size: 0.72rem; }
}
.hi-takeaway {
margin-top: 1.6rem; padding: 0.95rem 1.2rem; background: var(--accent-soft);
border-left: 3px solid var(--accent); border-radius: 4px;
font-size: 0.9rem; color: var(--ink); line-height: 1.5;
}
.hi-takeaway b { color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) {
.infographic-htmlimportance *, .infographic-htmlimportance *::before, .infographic-htmlimportance *::after {
transition-duration: 0.001ms !important; animation-duration: 0.001ms !important;
}
}
</style>
<div class="hi-tabs" id="hiTabs">
<button class="hi-tab is-active" data-stage="1"><span class="hi-tab-num">1</span> HTML only</button>
<button class="hi-tab" data-stage="2"><span class="hi-tab-num">2</span> + CSS</button>
<button class="hi-tab" data-stage="3"><span class="hi-tab-num">3</span> + CSS + JS</button>
</div>
<div class="hi-stage-wrap">
<div class="hi-stage" id="hiStage" data-stage="1">
<div class="hi-page">
<div class="hi-h1">My Page</div>
<div class="hi-nav"><a>Home</a><a>About</a><a>Contact</a></div>
<div class="hi-img-box"></div>
<p class="hi-p">This paragraph is just content — HTML says "this is a paragraph," nothing about how it should look.</p>
<button class="hi-btn-el" id="hiTryBtn">🌙 Toggle dark mode</button>
</div>
</div>
<p class="hi-stage-label" id="hiStageLabel">Structure only — every browser renders this the same dull way <b>by default</b></p>
</div>
</div>
<script>
(function() {
var roots = document.querySelectorAll('.infographic-htmlimportance');
var root = roots[roots.length - 1];
if (!root) return;
var tabs = root.querySelectorAll('.hi-tab');
var stage = root.querySelector('#hiStage');
var stageLabel = root.querySelector('#hiStageLabel');
var tryBtn = root.querySelector('#hiTryBtn');
var page = root.querySelector('.hi-page');
var labels = {
'1': 'Structure only — every browser renders this the same dull way <b>by default</b>',
'2': 'Same HTML, now <b>styled</b> — colors, spacing, type all came from CSS',
'3': 'Same HTML + CSS, now <b>alive</b> — click the button, JS is doing that'
};
function setStage(num) {
stage.dataset.stage = num;
stageLabel.innerHTML = labels[num];
tabs.forEach(function(t) { t.classList.toggle('is-active', t.dataset.stage === num); });
if (num !== '3') {
page.dataset.dark = 'false';
tryBtn.textContent = '🌙 Toggle dark mode';
}
}
tabs.forEach(function(tab) {
tab.addEventListener('click', function() { setStage(tab.dataset.stage); });
});
tryBtn.addEventListener('click', function() {
if (stage.dataset.stage !== '3') return; // button only "works" once JS stage is active
var isDark = page.dataset.dark === 'true';
page.dataset.dark = isDark ? 'false' : 'true';
tryBtn.textContent = isDark ? '🌙 Toggle dark mode' : '☀️ Toggle light mode';
});
})();
</script>
</div>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});🧰 What HTML Actually Does
<div class="infographic-htmlstruct">
<style>
.infographic-htmlstruct {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-deep: #1942a8;
--accent-soft: #e3ebfd;
--line: #ddd6c9;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
--mono-font: 'IBM Plex Mono', monospace;
background: transparent;
color: var(--ink);
font-family: var(--body-font);
}
.infographic-htmlstruct[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-deep: #8fb3ff;
--accent-soft: #202942;
--line: #2c313d;
}
.infographic-htmlstruct * { box-sizing: border-box; }
.hs-head { margin-bottom: 1.5rem; }
.hs-eyebrow {
font-family: var(--mono-font); font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent); margin: 0 0 0.45rem;
display: flex; align-items: center; gap: 0.4rem;
}
.hs-eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--accent); display: inline-block; }
.hs-title {
font-family: var(--display-font); font-size: clamp(1.5rem, 4vw, 2.3rem);
margin: 0 0 0.55rem; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink);
}
.hs-sub { color: var(--ink-soft); font-size: 0.95rem; max-width: 540px; line-height: 1.55; margin: 0; }
.hs-tasks {
display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 1.75rem;
}
.hs-task {
background: var(--paper-alt); border: 1px solid var(--line); border-radius: 100px;
padding: 0.35rem 0.85rem; font-size: 0.8rem; color: var(--ink-soft);
}
.hs-task b { color: var(--ink); font-weight: 600; }
/* ===== Wireframe — blank by default, sections reveal in place ===== */
.hs-wireframe-wrap { max-width: 480px; margin: 0 auto; }
.hs-wireframe {
border: 2px solid var(--ink); border-radius: 8px; background: var(--paper);
overflow: hidden; box-shadow: 0 10px 24px -10px rgba(26,26,26,0.16);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.infographic-htmlstruct[data-theme="dark"] .hs-wireframe {
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
}
.hs-block {
position: relative; border-bottom: 1px solid var(--line);
transition: background 0.3s ease, border-color 0.3s ease;
}
.hs-block:last-child { border-bottom: none; }
.hs-block.is-revealed { background: var(--accent-soft);}
.hs-block .hs-tag-chip {
position: absolute; top: 0.20rem; right: 0.55rem;
display: inline-block; width: max-content; white-space: nowrap;
font-family: var(--mono-font); font-size: 0.65rem; color: #fff;
background: var(--accent); border-radius: 3px;
padding: 0.1rem 0.5rem; font-weight: 600;
opacity: 0; transform: translateY(-4px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
z-index: 2;
}
.hs-block.is-revealed .hs-tag-chip { opacity: 1; transform: translateY(0); height: 15px; }
.hs-header-block { padding: 0.95rem 0.85rem 0.75rem; }
.hs-header-block .hs-fake-line { height: 9px; background: var(--ink); opacity: 0.25; width: 36%; border-radius: 2px; transition: opacity 0.3s, background 0.3s; }
.hs-header-block .hs-fake-nav { display: flex; gap: 0.45rem; margin-top: 0.55rem; }
.hs-header-block .hs-fake-nav span { width: 30px; height: 6px; background: var(--ink-soft); opacity: 0.15; border-radius: 2px; transition: opacity 0.3s, background 0.3s; }
.hs-header-block.is-revealed .hs-fake-line { opacity: 0.85; }
.hs-header-block.is-revealed .hs-fake-nav span { opacity: 0.45; }
.hs-hero-block { padding: 1.05rem 0.85rem; }
.hs-hero-block .hs-fake-line { height: 12px; background: var(--ink); opacity: 0.25; width: 68%; border-radius: 2px; margin-bottom: 0.45rem; transition: opacity 0.3s, background 0.3s; }
.hs-hero-block .hs-fake-line.sub { height: 7px; width: 46%; opacity: 0.12; margin-bottom: 0; }
.hs-hero-block.is-revealed .hs-fake-line { opacity: 0.85; }
.hs-hero-block.is-revealed .hs-fake-line.sub { opacity: 0.4; }
.hs-main-block { padding: 1.05rem 0.85rem; display: flex; gap: 0.55rem; }
.hs-main-block .hs-fake-para { flex: 1; }
.hs-main-block .hs-fake-para span { display: block; height: 6px; background: var(--ink-soft); opacity: 0.1; border-radius: 2px; margin-bottom: 0.4rem; transition: opacity 0.3s, background 0.3s; }
.hs-main-block .hs-fake-para span:nth-child(1) { width: 100%; }
.hs-main-block .hs-fake-para span:nth-child(2) { width: 90%; }
.hs-main-block .hs-fake-para span:nth-child(3) { width: 72%; }
.hs-main-block .hs-fake-img { width: 64px; height: 46px; background: var(--paper-alt); border: 1px dashed var(--line); border-radius: 4px; flex-shrink: 0; transition: background 0.3s, border-color 0.3s; }
.hs-main-block.is-revealed .hs-fake-para span { opacity: 0.32; }
.hs-main-block.is-revealed .hs-fake-img { background: var(--accent-soft); border-color: var(--accent); }
.hs-aside-block { padding: 1.05rem 0.85rem; }
.hs-aside-block .hs-fake-line { height: 6px; background: var(--ink-soft); opacity: 0.1; border-radius: 2px; margin-bottom: 0.45rem; transition: opacity 0.3s, background 0.3s; }
.hs-aside-block .hs-fake-line:nth-child(1) { width: 78%; }
.hs-aside-block .hs-fake-line:nth-child(2) { width: 58%; }
.hs-aside-block .hs-fake-line:last-child { margin-bottom: 0; }
.hs-aside-block.is-revealed .hs-fake-line { opacity: 0.4; }
.hs-footer-block { padding: 1.1rem 0.85rem; display: flex; gap: 1.1rem; }
.hs-footer-block span { display: block; width: 36px; height: 6px; background: var(--ink-soft); opacity: 0.1; border-radius: 2px; transition: opacity 0.3s, background 0.3s; }
.hs-footer-block.is-revealed span { opacity: 0.35; }
/* ===== Caption strip below wireframe — shows current step's explanation ===== */
.hs-caption {
margin-top: 1.1rem; min-height: 3.6rem;
display: flex; align-items: center; gap: 0.7rem;
padding: 0.7rem 1rem; border-radius: 6px;
background: var(--paper-alt); border: 1px solid var(--line);
opacity: 0; transform: translateY(-6px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.hs-caption.is-active { opacity: 1; transform: translateY(0); }
.hs-caption .hs-elem-tag {
font-family: var(--mono-font); font-size: 0.85rem; color: var(--accent); font-weight: 700;
flex-shrink: 0;
}
.hs-caption .hs-elem-desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; margin: 0; }
/* ===== Progress + controls ===== */
.hs-progress { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; }
.hs-progress-dots { display: flex; gap: 0.4rem; }
.hs-progress-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--line);
transition: background 0.3s;
}
.hs-progress-dot.is-done { background: var(--accent); }
.hs-progress-text { font-family: var(--mono-font); font-size: 0.72rem; color: var(--ink-soft); margin-left: 0.3rem; }
.hs-controls { display: flex; gap: 0.55rem; margin-top: 0.9rem; flex-wrap: wrap; }
.hs-btn {
font: inherit; font-size: 0.8rem; background: var(--paper-alt); border: 1px solid var(--line);
border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; color: var(--ink); transition: all 0.15s;
}
.hs-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hs-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hs-btn.primary:hover:not(:disabled) { background: var(--accent-deep); color: #fff; }
.hs-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hs-takeaway {
padding: 0.95rem 1.2rem; background: var(--accent-soft);
border-left: 3px solid var(--accent); border-radius: 4px;
font-size: 0.9rem; color: var(--ink); line-height: 1.5;
opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, background 0.3s ease, border-color 0.3s ease;
}
.hs-takeaway.is-shown { opacity: 1; max-height: 200px; margin-top: 1.75rem; }
.hs-takeaway b { color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) {
.infographic-htmlstruct *, .infographic-htmlstruct *::before, .infographic-htmlstruct *::after {
transition-duration: 0.001ms !important; animation-duration: 0.001ms !important;
}
}
</style>
<div class="hs-tasks">
<div class="hs-task"><b>Breaks</b> a page into sections</div>
<div class="hs-task"><b>Labels</b> each piece of content</div>
<div class="hs-task">Helps browsers <b>render</b> it right</div>
<div class="hs-task">Essential for <b>accessibility</b>, <b>SEO</b>, and <b>performance</b> </div>
</div>
<div class="hs-wireframe-wrap">
<div class="hs-wireframe" id="hsWireframe">
<div class="hs-block hs-header-block" data-part="header">
<span class="hs-tag-chip"><header></span>
<div class="hs-fake-line"></div>
<div class="hs-fake-nav"><span></span><span></span><span></span></div>
</div>
<div class="hs-block hs-hero-block" data-part="hero">
<span class="hs-tag-chip"><h1></span>
<div class="hs-fake-line"></div>
<div class="hs-fake-line sub"></div>
</div>
<div class="hs-block hs-main-block" data-part="main">
<span class="hs-tag-chip"><main></span>
<div class="hs-fake-para"><span></span><span></span><span></span></div>
<div class="hs-fake-img"></div>
</div>
<div class="hs-block hs-aside-block" data-part="aside">
<span class="hs-tag-chip"><aside></span>
<div class="hs-fake-line"></div>
<div class="hs-fake-line"></div>
</div>
<div class="hs-block hs-footer-block" data-part="footer">
<span class="hs-tag-chip"><footer></span>
<span></span><span></span><span></span>
</div>
</div>
</div>
<div class="hs-caption" id="hsCaption">
<span class="hs-elem-tag" id="hsCaptionTag"></span>
<p class="hs-elem-desc" id="hsCaptionDesc"></p>
</div>
<div class="hs-progress">
<div class="hs-progress-dots" id="hsDots">
<span class="hs-progress-dot" data-part="header"></span>
<span class="hs-progress-dot" data-part="hero"></span>
<span class="hs-progress-dot" data-part="main"></span>
<span class="hs-progress-dot" data-part="aside"></span>
<span class="hs-progress-dot" data-part="footer"></span>
</div>
<span class="hs-progress-text" id="hsProgressText">0 / 5 sections labeled</span>
</div>
<div class="hs-controls">
<button class="hs-btn primary" id="hsNextBtn">▶ Label next section</button>
<button class="hs-btn" id="hsReset" disabled>↺ Reset</button>
</div>
<div class="hs-takeaway" id="hsTakeaway">
Every <b>semantic tag</b> tells the browser, screen readers, and search engines what a section of the page actually means — not just how it looks.
</div>
</div>
<script>
(function () {
var wrapper = document.currentScript.closest('.infographic-htmlstruct')
|| document.querySelector('.infographic-htmlstruct');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function() {
var roots = document.querySelectorAll('.infographic-htmlstruct');
var root = roots[roots.length - 1];
if (!root) return;
var blocks = root.querySelectorAll('.hs-block');
var dots = root.querySelectorAll('.hs-progress-dot');
var nextBtn = root.querySelector('#hsNextBtn');
var resetBtn = root.querySelector('#hsReset');
var caption = root.querySelector('#hsCaption');
var captionTag = root.querySelector('#hsCaptionTag');
var captionDesc = root.querySelector('#hsCaptionDesc');
var progressText = root.querySelector('#hsProgressText');
var takeaway = root.querySelector('#hsTakeaway');
var steps = [
{ part: 'header', tag: '<header>', desc: 'Logo and primary navigation — where the page introduces itself.' },
{ part: 'hero', tag: '<h1>', desc: 'The single most important heading — only one per page.' },
{ part: 'main', tag: '<main>', desc: 'The actual reason someone came — the real text and images.' },
{ part: 'aside', tag: '<aside>', desc: 'Supporting info beside the main flow — links, a sidebar.' },
{ part: 'footer', tag: '<footer>', desc: 'Copyright, contact links — where the page wraps up.' }
];
var i = 0;
function getBlock(part) {
var found = null;
blocks.forEach(function(b) { if (b.dataset.part === part) found = b; });
return found;
}
function getDot(part) {
var found = null;
dots.forEach(function(d) { if (d.dataset.part === part) found = d; });
return found;
}
function showStep(index) {
var step = steps[index];
var block = getBlock(step.part);
block.classList.add('is-revealed');
getDot(step.part).classList.add('is-done');
captionTag.textContent = step.tag;
captionDesc.textContent = step.desc;
caption.classList.add('is-active');
progressText.textContent = (index + 1) + ' / ' + steps.length + ' sections labeled';
}
nextBtn.addEventListener('click', function() {
if (i >= steps.length) return;
showStep(i);
i++;
resetBtn.disabled = false;
if (i >= steps.length) {
nextBtn.disabled = true;
nextBtn.textContent = '✓ All sections labeled';
takeaway.classList.add('is-shown');
}
});
resetBtn.addEventListener('click', function() {
i = 0;
blocks.forEach(function(b) { b.classList.remove('is-revealed'); });
dots.forEach(function(d) { d.classList.remove('is-done'); });
caption.classList.remove('is-active');
captionTag.textContent = '';
captionDesc.textContent = '';
progressText.textContent = '0 / ' + steps.length + ' sections labeled';
nextBtn.disabled = false;
nextBtn.textContent = '▶ Label next section';
resetBtn.disabled = true;
takeaway.classList.remove('is-shown');
});
})();
</script>
</div>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});♦Basic Structure of an HTML Document
Here's what the skeleton of an HTML page looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Document Anatomy</title>
<style>
.infographic-htmlanatomy {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-htmlanatomy[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ha-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin: 0 0 0.35rem;
}
.ha-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.3rem; }
.ha-sub { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.ha-layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Code block — always black, regardless of light/dark page mode */
.ha-code {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
padding: 1rem 0.5rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.86rem;
line-height: 1.85;
overflow-x: auto;
}
.ha-line {
display: block;
padding: 0.1rem 0.6rem;
border-radius: 6px;
white-space: pre;
cursor: default;
color: #8a8a8a;
transition: background 0.15s ease, color 0.15s ease;
}
.ha-line.ha-clickable {
cursor: pointer;
color: #e5e5e5;
}
.ha-line.ha-clickable:hover {
background: #1c2333;
}
.ha-line.ha-active {
background: #1c2333;
color: #ffffff;
box-shadow: inset 3px 0 0 #5b8def;
}
.ha-tag { color: #60a5fa; font-weight: 700; }
/* Browser mockup */
.ha-browser {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.ha-browser-bar {
background: var(--paper-alt);
padding: 0.5rem 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.ha-tab {
background: var(--paper);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
padding: 0.25rem 0.6rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.ha-tab-title { transition: color 0.15s ease, font-weight 0.15s ease; }
.ha-tab-title.ha-lit { color: var(--accent); font-weight: 700; }
.ha-urlrow {
background: var(--paper-alt);
padding: 0.35rem 0.7rem 0.6rem;
font-size: 0.72rem;
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
}
.ha-screen {
background: #ffffff;
color: #111;
padding: 1.3rem 1.4rem 1.6rem;
min-height: 130px;
}
.ha-out-h1 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.7rem;
font-weight: 700;
margin: 0 0 0.6rem;
border-radius: 6px;
padding: 0.1rem 0.3rem;
margin-left: -0.3rem;
transition: background 0.2s ease, outline 0.2s ease;
}
.ha-out-p {
font-family: Georgia, "Times New Roman", serif;
font-size: 0.95rem;
margin: 0;
border-radius: 6px;
padding: 0.1rem 0.3rem;
margin-left: -0.3rem;
transition: background 0.2s ease, outline 0.2s ease;
}
.ha-out-lit {
background: var(--accent-soft);
outline: 2px solid var(--accent);
}
.ha-footer {
margin-top: 1.4rem;
font-size: 0.85rem;
color: var(--ink-soft);
border-top: 1px solid var(--line);
padding-top: 0.9rem;
}
.ha-footer b { color: var(--ink); }
.ha-footer code {
font-family: "SFMono-Regular", Consolas, monospace;
background: var(--paper-alt);
padding: 0.05rem 0.3rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="infographic-htmlanatomy" id="ha-root">
<div class="ha-inner">
<div class="ha-layout">
<div class="ha-code" id="ha-code">
<span class="ha-line ha-clickable" data-part="doctype"><!DOCTYPE <span class="ha-tag">html</span>></span><span class="ha-line ha-clickable" data-part="html"><<span class="ha-tag">html</span>></span><span class="ha-line ha-clickable" data-part="head"> <<span class="ha-tag">head</span>></span><span class="ha-line ha-clickable" data-part="title"> <<span class="ha-tag">title</span>>My First Page</<span class="ha-tag">title</span>></span><span class="ha-line" data-part="head"> </<span class="ha-tag">head</span>></span><span class="ha-line ha-clickable" data-part="body"> <<span class="ha-tag">body</span>></span><span class="ha-line ha-clickable" data-part="h1"> <<span class="ha-tag">h1</span>>Hello, world!</<span class="ha-tag">h1</span>></span><span class="ha-line ha-clickable" data-part="p"> <<span class="ha-tag">p</span>>This is my first web page.</<span class="ha-tag">p</span>></span><span class="ha-line" data-part="body"> </<span class="ha-tag">body</span>></span><span class="ha-line" data-part="html"></<span class="ha-tag">html</span>></span>
</div>
<div class="ha-browser">
<div class="ha-browser-bar">
<span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
<div class="ha-tab">🌐 <span class="ha-tab-title" id="ha-tabtitle">My First Page</span></div>
</div>
<div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
<div class="ha-screen">
<p class="ha-out-h1" id="ha-out-h1">Hello, world!</p>
<p class="ha-out-p" id="ha-out-p">This is my first web page.</p>
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ha-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const outputMap = {
doctype: null,
html: "all",
head: "tab",
title: "tab",
body: "all",
h1: "h1",
p: "p"
};
const tabTitle = document.getElementById('ha-tabtitle');
const outH1 = document.getElementById('ha-out-h1');
const outP = document.getElementById('ha-out-p');
const lines = document.querySelectorAll('.ha-line.ha-clickable');
function clearOutput() {
tabTitle.classList.remove('ha-lit');
outH1.classList.remove('ha-out-lit');
outP.classList.remove('ha-out-lit');
}
lines.forEach(line => {
line.addEventListener('click', () => {
const part = line.getAttribute('data-part');
const target = outputMap[part];
document.querySelectorAll('.ha-line').forEach(l => {
l.classList.toggle('ha-active', l.getAttribute('data-part') === part);
});
clearOutput();
if (target === 'tab') tabTitle.classList.add('ha-lit');
if (target === 'h1') outH1.classList.add('ha-out-lit');
if (target === 'p') outP.classList.add('ha-out-lit');
if (target === 'all') { tabTitle.classList.add('ha-lit'); outH1.classList.add('ha-out-lit'); outP.classList.add('ha-out-lit'); }
});
});
})();
</script>
</body>
</html>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});🤝 How to Setup Environment to Run HTML CSS
💭 HTML is Not a Programming Language
HTML is not a language that “runs” or “executes” like Python or JavaScript. It’s a markup language — it marks up content with meaning and structure.