HTML Essentials
10 elements every web page needs — what to understand, what to let AI handle.
Every snippet in this guide came directly from convQuestPoster.html — real code from a working page, not examples invented for a tutorial.
The approach: you build with AI. You describe what you want; AI writes the code. This guide helps you understand what HTML is doing at each step — not so you memorise syntax, but so you can recognise when AI is doing the right thing and when it’s not. Each entry answers two questions: what you must understand, and what AI reliably handles.
The 10 Elements
All 10 appear in the Conversation Quests Poster. Open it in another tab while you read.
<!DOCTYPE html>
The Document Declaration
The first line of every HTML file. It tells the browser: “this is HTML5 — use modern rendering mode.” Without it, browsers enter quirks mode and render pages as if it were 1999. Your layout may break in ways that are completely invisible in development but visible to some users. This line is not a tag; it’s a declaration. It has no closing counterpart.
In the Poster<!DOCTYPE html>
<!--
TNT | Conversation Quests — Poster Edition
Coder: klp and Copilot
Date: 07/09/2026
-->
You understand: It must be the absolute first line. Its absence causes unpredictable cross-browser layout bugs. This is not negotiable.
AI handles: Including it correctly on every page it generates. You will never need to type it yourself.
<html lang="">
The Root Element & Language
Every element on the page lives inside <html>.
The lang attribute tells browsers, search engines,
and screen readers what language the content is written in. Screen readers use
it to choose the correct pronunciation engine. Search engines use it to match
users searching in that language. On a Spanish page, this becomes
lang="es".
<html lang="en">
<head>
...
</head>
<body onload="myInit();">
...
</body>
</html>
You understand: The lang
attribute is not optional if you care about accessibility. Omitting it is an
accessibility error that automated validators will catch.
AI handles: Setting it correctly based on the language you’re writing in. If you’re building a multilingual page, tell AI the language explicitly.
<head>
<meta>
The Invisible Setup Layer
Everything in <head> is for browsers
and search engines — none of it renders visibly. The two most critical
<meta> tags are charset
(prevents garbled characters in non-English text) and viewport
(makes your page mobile-responsive). Without the viewport tag, a mobile browser
renders the page at desktop width and then shrinks it — text becomes
unreadable without zooming.
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="description"
content="All 15 friendship questions...">
</head>
You understand: width=device-width
sets the page width to the screen width. initial-scale=1
stops the browser from zooming out. Together they unlock every mobile layout feature.
AI handles: The complete head section. Tell AI the page’s purpose and it will write charset, viewport, description, Open Graph tags, and favicon links.
<title>
The Browser Tab & SEO Headline
The text inside <title> appears in the
browser tab, in bookmarks, and as the clickable headline in search results.
It’s the highest-value text on the page for SEO after the
<h1>. The Conversation Quests Poster
gives its title an id so JavaScript can
update it with the stage number — a pattern used across all TNT pages.
<title id="theTitle">
TNT | JS Apps | Conversation Quests | Poster
</title>
<!-- JavaScript sets it later via: -->
document.getElementById("theTitle").textContent =
"TNT | JS Apps | Conversation Quests | Poster";
You understand: The title should describe this specific page, not just the site. “TechNoviceTools” is a bad title; “TNT | Conversation Quests Poster” is a good one.
AI handles: Drafting the title. If content changes later, update the title — AI tends to leave stale titles in place when you edit other parts of the page.
<link rel="stylesheet">
Connecting CSS to HTML
The <link> element connects an external
resource to the page. When rel="stylesheet",
it connects a CSS file. The href is a path.
Relative paths are one of the most common sources of broken pages:
../styles/ means “go up one folder,
then into styles/.” If the path is wrong, CSS simply doesn’t
load and the page appears completely unstyled.
<!-- Shared TNT styles (one level up) -->
<link rel="stylesheet"
href="../styles/tnt-base-styles.css">
<!-- Page-specific styles (same folder) -->
<link rel="stylesheet"
href="styles/convQuestPosterStyles.css">
You understand: Relative paths. The
../ means “up one directory level.”
The two different paths in the poster show two different file locations.
AI handles: The syntax. AI may get paths wrong if it doesn’t know your folder structure — always tell it where your HTML file lives relative to the CSS.
<nav>
<main>
<section>
<footer>
Semantic Structure
HTML5 introduced elements that describe their content’s
purpose, not just its appearance. A <nav>
contains navigation links. A <main>
contains the primary content. A <section>
groups related content. Screen readers announce these landmarks:
“navigation,” “main content,” “footer.”
A <div> announces nothing.
<nav id="mainNav" aria-label="TNT main navigation">
...
</nav>
<main>
<section id="hero" aria-label="Poster hero">
<section id="posterSection" aria-label="Classroom poster">
</main>
<footer>
...
</footer>
You understand: When prompting AI, say
“use semantic HTML5 elements.” If you see
<div class="nav"> in AI output, that’s
wrong — ask AI to use <nav> instead.
AI handles: Choosing the correct element for each content type when prompted with semantic intent.
<h1>
<h2>
<h3>
—
<h6>
The Document Hierarchy
Headings define the page’s outline. There should be exactly one
<h1> per page. Never skip levels
(jumping from <h1> to
<h3>) — screen readers and SEO
tools read a missing level as a structural error. Heading level is about
document structure, not font size. CSS controls how large a heading looks;
HTML controls what it means.
<h1 class="hero-title">The Poster</h1>
<h2 class="poster-title">
Conversation Quests
</h2>
<h3 class="poster-tier-title">
Start With Curiosity
</h3>
You understand: If you want big text, use CSS. Don’t pick an h-level based on how large you want it to appear.
AI handles: Setting levels correctly when you describe the page hierarchy. Review AI output — it sometimes flattens headings when sections nest more deeply than expected.
<p>
<ul>
<ol>
<li>
Paragraphs & Lists
<p> wraps a block of text.
<ul> is an unordered list (bullets);
<ol> is an ordered list (numbers).
Both contain <li> items.
The poster uses <ul> for questions because
order is flexible — any question in a tier is equally valid to ask first.
If you were listing steps in a process, <ol>
would be correct.
<ul class="poster-qs"
aria-label="Level 1 questions">
<li data-num="01">What's the highlight
of your week so far?</li>
<li data-num="02">If you could relive
one day from the past year...</li>
</ul>
You understand: The distinction is semantic,
not visual. CSS can make either list look like the other. Ask: does sequence
matter? Yes → <ol>.
No → <ul>.
AI handles: Choosing the correct list type when
you describe the content. “Steps in a process” →
<ol>. “A collection of items” →
<ul>.
<a href="">
<img src="" alt="">
Links & Images
<a> creates a hyperlink;
href is the destination.
target="_blank" opens it in a new tab —
always pair it with rel="noopener noreferrer"
(a security requirement that prevents the linked page from accessing your
JavaScript context). The <img> element
embeds an image. The alt attribute is what
screen readers announce and what appears if the image fails to load.
It is not optional.
<a href="https://www.instagram.com/achievewithari/"
target="_blank"
rel="noopener noreferrer">achievewithari</a>
<img src="../images/np_dynamite_1426997_D81827.svg"
alt="TNT icon"
onerror="this.style.display='none'">
You understand: The alt
attribute on images is not decoration. Write it as if you’re describing
the image to someone who cannot see it. AI guesses at descriptions; you know
what the image actually communicates.
AI handles: Always adding
rel="noopener noreferrer" with
target="_blank". That’s AI doing the right
thing — never remove it.
class
id
aria-*
The Attribute System
Attributes are name-value pairs that attach information to elements.
class connects elements to CSS and can repeat
freely. id uniquely identifies one element for
JavaScript or anchor links — two elements with the same
id on one page is an HTML error.
aria-* attributes
(aria-label, aria-hidden)
provide information to accessibility tools.
The poster uses all three on nearly every element.
<div class="poster-tier poster-tier--curiosity">
<ul class="poster-qs"
aria-label="Level 1 questions">
<span class="poster-tier-icon"
aria-hidden="true">💬</span>
<section id="posterSection"
aria-label="Classroom poster">
You understand:
id must be unique per page.
aria-hidden="true" hides decorative elements
(like emoji icons) from screen readers so they don’t interrupt the
reading flow. aria-label provides a text name
when no visible label exists.
AI handles: Adding correct
aria-* attributes when you say “use
accessible HTML.” Review AI’s aria-labels — they should
describe the element’s purpose, not its appearance.