HTML: complete course

What you are learning

HTML is the document language of the web. Browsers parse your markup into a DOM tree, then use that structure for layout, accessibility, scripting and search. Learn elements, attributes, nesting, void elements, parsing errors and the difference between source HTML and the live DOM.

How it works

Use lowercase HTML, quote attribute values, nest elements correctly, and validate the structure. A tag is syntax; an element is the resulting node plus its content. The browser is forgiving, but forgiving parsing can hide mistakes.

Practical example

<main>
  <h1>Orbit Code</h1>
  <p>Learn to build for the web.</p>
</main>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a personal profile page
2. Build a complete semantic article page
3. Build a multi-section course homepage

What you are learning

A production document starts with <!doctype html>, then html, head and body. The head contains metadata and resources; the body contains what the document presents. Charset, viewport, title and description are foundational.

How it works

Keep metadata intentional. The viewport controls mobile layout; title identifies the page in browser UI and search; description can summarize the page. Canonical links help indicate the preferred URL when duplicates exist.

Practical example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Free programming lessons">
  <title>Orbit Code</title>
</head>
<body></body>
</html>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a production HTML document shell
2. Build a blog post with metadata
3. Build a reusable page template

What you are learning

Semantic elements communicate meaning: headings form an outline, paragraphs represent prose, strong/em convey importance or emphasis, and article/section/aside represent content relationships.

How it works

Do not choose an element because it looks right by default. Choose meaning first, then style it with CSS. Avoid using headings merely for bigger text or divs for every structure.

Practical example

<article>
  <h2>Semantic HTML</h2>
  <p>Use elements for their meaning, not just their appearance.</p>
  <strong>Important</strong> <em>concept</em>
  <blockquote>Structure first; styling comes later.</blockquote>
</article>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a semantic article
2. Build a news-style page
3. Audit an existing page for semantic misuse

What you are learning

Links connect documents and locations. Learn absolute vs relative URLs, fragments, URL encoding, target behavior, download semantics, and safe external-link practices.

How it works

Use descriptive link text. Relative URLs are useful inside a site; absolute URLs are useful for external destinations. A fragment such as #contact targets an element with a matching id.

Practical example

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/courses">Courses</a>
  <a href="#contact">Contact</a>
</nav>
<a href="https://example.com">External site</a>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a navigation bar
2. Build a multi-page course site
3. Build an accessible external-links section

What you are learning

Images need a source and useful alternative text. Learn width/height, responsive sizing, figure/figcaption, loading, decoding, picture/source and modern formats.

How it works

Always decide whether an image is informative or decorative. Informative images need meaningful alt text; decorative images can use empty alt. Width and height help the browser reserve space before the image loads.

Practical example

<figure>
  <img src="https://picsum.photos/600/300" alt="Example landscape" width="600" height="300">
  <figcaption>A responsive-media-ready image.</figcaption>
</figure>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a responsive image gallery
2. Build a figure/caption portfolio
3. Build a media-rich landing section

What you are learning

Lists represent grouped items; tables represent tabular relationships, not page layout. Learn ul/ol/dl, table sections, headers, captions, scopes and accessible table structure.

How it works

Use lists for navigation menus, steps and collections. Use th for headers and td for data. Complex tables may require explicit relationships, but simple tables should stay simple.

Practical example

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<table>
  <thead><tr><th>Course</th><th>Level</th></tr></thead>
  <tbody><tr><td>HTML</td><td>Beginner</td></tr></tbody>
</table>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a course comparison table
2. Build a recipe/list page
3. Build a structured data table with captions

What you are learning

Semantic page architecture uses landmarks such as header, nav, main, section, article, aside and footer. Good architecture makes pages easier to understand and navigate.

How it works

A page should normally have one main content region. Sections should have meaningful headings when they represent distinct topics. Use article when content can stand on its own.

Practical example

<header><h1>Orbit Code</h1></header>
<nav>...</nav>
<main>
  <section><h2>Courses</h2><p>Learn by building.</p></section>
</main>
<footer>Copyright</footer>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a semantic news layout
2. Build a documentation page
3. Refactor a div-heavy page into semantic HTML

What you are learning

Forms connect user input to application logic. Learn labels, names, values, required, autocomplete, validation attributes, buttons, fieldsets, legends and form submission.

How it works

Input type changes the expected data and browser UI. The common types include text, email, password, number, date, checkbox, radio and file; also learn hidden, search, tel, url, time, month, week, datetime-local, range, color, submit, reset, button and image.

Practical example

<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Join</button>
</form>

Input types — know the family

<input type="text">       <!-- Text -->
<input type="email">      <!-- Email -->
<input type="password">   <!-- Password -->
<input type="number">     <!-- Number -->
<input type="date">       <!-- Date -->
<input type="checkbox">   <!-- Checkbox -->
<input type="radio">      <!-- Radio button -->
<input type="file">       <!-- File upload -->
<input type="submit">    <!-- Submit -->
<input type="search">    <!-- Search -->
<input type="tel">       <!-- Telephone -->
<input type="url">       <!-- URL -->
<input type="time">      <!-- Time -->
<input type="month">     <!-- Month -->
<input type="week">      <!-- Week -->
<input type="datetime-local"> <!-- Local date/time -->
<input type="range">     <!-- Range slider -->
<input type="color">     <!-- Color picker -->
<input type="hidden">    <!-- Hidden submitted value -->
<input type="reset">     <!-- Reset form -->
<input type="button">    <!-- Generic button -->
<input type="image">     <!-- Image submit button -->

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a registration form
2. Build a student feedback form
3. Build a validated contact form

What you are learning

Embedded content includes audio, video, iframe, source, track and fallbacks. Learn controls, captions, dimensions, loading and security considerations for embedded documents.

How it works

Do not depend on autoplay. Provide controls and useful fallback text. For iframes, use a descriptive title and consider sandboxing or restrictive permissions when appropriate.

Practical example

<video controls width="320">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support video.
</video>
<iframe title="Embedded page" src="https://example.com"></iframe>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a media lesson page
2. Build an embedded documentation page
3. Build a video course section with fallbacks

What you are learning

Native interactive elements include details/summary, dialog, progress, meter and button. These give browsers semantics and behavior without recreating everything in JavaScript.

How it works

Use native controls when they match the job. A details element can create disclosure UI; dialog can represent a modal or non-modal conversation; progress communicates task completion.

Practical example

<details>
  <summary>Show answer</summary>
  <p>HTML describes structure and meaning.</p>
</details>
<dialog open>Hello from a dialog.</dialog>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build an FAQ with details
2. Build a dialog-based help panel
3. Build an interactive disclosure page

What you are learning

Accessibility starts in HTML: labels, headings, landmarks, alt text, button semantics, keyboard reachability and language metadata.

How it works

Prefer native elements before ARIA. ARIA can enhance semantics, but it does not magically add keyboard behavior. A correctly labeled native button is usually better than a div with role="button".

Practical example

<button aria-label="Open menu">☰</button>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build an accessible form
2. Keyboard-test a navigation page
3. Audit headings, labels and landmarks

What you are learning

Discoverability depends on useful titles, descriptions, headings, canonical URLs, crawlable links and meaningful content. HTML alone cannot guarantee rankings.

How it works

Write for people first. Keep one clear page topic, use descriptive headings, and ensure important content is present in HTML rather than hidden behind an interaction that crawlers cannot use.

Practical example

<link rel="canonical" href="https://example.com/courses/html">
<meta name="description" content="Learn HTML from fundamentals to advanced topics">

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build an SEO-ready course page
2. Create metadata for a project
3. Build a crawl-friendly site structure

What you are learning

Maintainable HTML is consistent, lean and predictable. Avoid unnecessary wrappers, duplicated attributes and huge inline styles. Image dimensions, lazy loading and sensible document structure can improve loading.

How it works

Performance is partly about what you send and partly about how the browser processes it. Keep critical markup simple and avoid adding JavaScript for behavior HTML already provides.

Practical example

<img src="hero.jpg" alt="Course hero" width="1200" height="600" loading="lazy">
<link rel="preload" as="image" href="hero.jpg">

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Optimize a media-heavy page
2. Build a lean article page
3. Measure and improve page loading

What you are learning

Advanced forms combine constraints, file controls, autocomplete, validation messaging and correct button types. Client-side validation improves UX but is never a replacement for server-side validation.

How it works

Treat every submitted value as untrusted. The browser can validate expected shapes, but the server must enforce security and business rules.

Practical example

<form>
  <input type="text" name="q" required minlength="3" maxlength="50">
  <input type="date" name="start">
  <input type="file" name="avatar" accept="image/*">
  <button>Submit</button>
</form>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a production-grade signup form
2. Build file-upload UI
3. Build client/server-friendly form markup

What you are learning

Web Components combine custom elements, templates and shadow DOM. They let you package reusable UI without requiring a framework.

How it works

Learn lifecycle callbacks, custom-element naming, template cloning and encapsulation. Do not build a custom element when a native element already solves the problem.

Practical example

<template id="card-template">
  <article class="card"><slot></slot></article>
</template>
<script>
class CourseCard extends HTMLElement { connectedCallback(){ this.innerHTML = "<h2>Course</h2>"; } }
customElements.define("course-card", CourseCard);
</script>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a custom course-card element
2. Build a reusable Web Component
3. Create a small component-based HTML system

What you are learning

Real applications combine semantic HTML with CSS, JavaScript, forms, URLs, accessibility, metadata and backend contracts. HTML is the stable layer that the other systems build upon.

How it works

Design the document first. Decide what content and interactions must exist even if CSS and JavaScript fail, then progressively enhance.

Practical example

<main id="app">
  <section aria-labelledby="courses-title">
    <h1 id="courses-title">Courses</h1>
    <article><h2>HTML</h2><p>17 chapters.</p></article>
  </section>
</main>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build a complete course page
2. Build a student dashboard shell
3. Build a multi-page learning site

What you are learning

A production-ready page has correct document structure, useful metadata, responsive media, accessible controls, sensible forms and clean semantics.

How it works

Before shipping, test keyboard navigation, small screens, missing images, invalid input, slow connections and no-JavaScript behavior where practical. Build pages that remain understandable under failure.

Practical example

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Production Page</title></head>
<body><header><h1>Orbit Code</h1></header><main><section><h2>Learn</h2><p>Build accessible, semantic pages.</p></section></main><footer><p>Built for learners.</p></footer></body></html>

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

1. Build and audit a production-ready site
2. Make the site responsive and accessible
3. Deploy a polished multi-page website