JSTAcademy
0 XP
Dashboard
Crash Courses
HTML Foundations — Structure & Semantics
10 min
Basic+150 XP
Crash Courses · Basic

HTML Foundations — Structure & Semantics

Write semantic HTML that browsers, screen readers, and search engines all understand.
10 min read+150 XP on completionCert: HTML & CSS Crash Course
Tap any word in the text below to start reading from there.

HTML Foundations

HTML is the skeleton of every web page. React generates HTML. Next.js generates HTML. Tailwind styles HTML. Understanding HTML structure means you can read and debug any web page.

Document Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content here -->
  </body>
</html>

Semantic Elements

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>Main Heading</h1>
    <p>Content.</p>
  </article>
  <aside><p>Sidebar</p></aside>
</main>
<footer><p>&copy; 2026 J Supreme</p></footer>

Why semantics matter: screen readers announce landmarks; Google understands primary vs secondary content; heading hierarchy is indexed for search ranking.

Headings

One h1 per page — the primary topic. h2 for major sections, h3 for subsections. Never skip levels for visual size — use CSS.

Images

<img src="/images/logo.png" alt="J Supreme Tech logo" width="200" height="60">
<!-- Decorative: empty alt so screen reader skips it -->
<img src="/divider.svg" alt="">

alt is required. Describe the image purpose, not appearance.

0%