HTML and CSS Foundations

July 16, 2026 · View on GitHub

HTML describes the meaning and structure of a page. CSS controls presentation. JavaScript can add behavior, but a useful first website does not require it.

Learning Objectives

After this chapter, you should be able to:

  • Explain the roles of HTML and CSS.
  • Recognize elements, attributes, headings, links, and landmarks.
  • Create a valid document structure.
  • Link a stylesheet with a relative URL.
  • Inspect a page without exposing private files.

Anatomy of an HTML Element

<a href="about.html">About this site</a>
  • <a> is the opening tag.
  • href is an attribute.
  • about.html is the link destination.
  • About this site is the link text.
  • </a> is the closing tag.

Choose link text that describes the destination. Repeated “click here” links are harder to scan and understand.

Document Structure

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <header>
    <nav aria-label="Primary navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <h1>One clear page heading</h1>
    <p>Page content belongs here.</p>
  </main>
  <footer>
    <p>Site information belongs here.</p>
  </footer>
</body>
</html>

Use semantic elements for meaning, not merely for appearance. A button performs an action; a link navigates to another resource.

Headings

Use one descriptive h1 for the page's main topic, then nest subsections logically:

<h1>Project Documentation</h1>
<h2>Installation</h2>
<h3>Linux</h3>
<h3>macOS</h3>
<h2>Configuration</h2>

Do not choose heading levels because of font size. CSS controls size.

Images

<img src="assets/team-at-work.jpg" alt="Two volunteers assembling a community network kit">

The alt text communicates the image's purpose when it cannot be seen. Decorative images may use an empty alt attribute. Never place passwords, private addresses, account dashboards, or unrelated browser content in public screenshots.

Relative and Absolute URLs

Relative URL:

<a href="about.html">About</a>

Root-relative URL:

<a href="/about/">About</a>

Absolute URL:

<a href="https://example.dpdns.org/about/">About</a>

Relative URLs make a small static site easier to test in different environments. Root-relative URLs are useful when the site is always served from the domain root.

CSS Selectors and the Cascade

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.card {
  max-width: 42rem;
  padding: 2rem;
}

.card a {
  color: #075985;
}
  • body selects the element by name.
  • .card selects elements with class="card".
  • .card a selects links inside a card.

When multiple rules target the same property, origin, importance, specificity, and source order determine the result. Prefer simple class selectors over deeply nested selectors.

The Box Model

Every rendered element has:

margin -> border -> padding -> content

Use this rule in new projects:

*,
*::before,
*::after {
  box-sizing: border-box;
}

It makes declared widths include padding and borders, which simplifies layout.

Responsive Design

Begin with a flexible narrow layout:

.page {
  width: min(68rem, calc(100% - 2rem));
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

Add media queries only when the content needs a different arrangement:

@media (min-width: 48rem) {
  .grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
}

Browser Developer Tools

Developer tools can inspect elements, applied CSS, network requests, console messages, and responsive layouts. Editing a rule in developer tools is temporary; update the source file after finding the correct change.

In the Network panel, look for:

  • 404 missing files
  • Wrong content types
  • Unexpected redirects
  • Large images
  • HTTP resources loaded by an HTTPS page

Mini Lab

Create practice.html with:

  1. A semantic header and navigation.
  2. One h1 and two h2 sections.
  3. A relative link.
  4. An image with useful alternative text.
  5. A linked stylesheet.

Serve it locally and resize the browser from narrow to wide. Record one layout problem and the CSS rule that fixes it.

Review Questions

  1. Why is HTML not a programming language in the same sense as a server application?
  2. When should an action use a button instead of a link?
  3. What does the viewport meta element accomplish?
  4. Why should a heading level not be selected for visual size?
  5. What evidence does the Network panel provide that the page itself cannot?

Continue to How a Website Request Works.