Website, Web App, and Web vs Internet

Build the mental model

Many people treat "Web" and "Internet" as synonyms, but they aren't the same thing. The Internet is the underlying network infrastructure, and the Web is just one service running on top of it.

• Web — the system of browsing pages and resources through a browser
• Email — sending/receiving messages between mail servers
• Messaging — real-time chat and instant messaging services
• File transfer — moving files directly between systems
• Online games — game clients talking directly to game servers

A website is a collection of pages and resources accessible through a browser, usually centered on content. A web application leans more interactive, working with user accounts, state, and actions.

• Closer to "website" — blog, documentation site, online store
• Closer to "web application" — dashboard, SaaS product, social network

A static site serves prebuilt files exactly as written. A dynamic site generates or fetches content on the fly, based on the user, database, the request itself, or auth state.

INTERNET vs WEB, STATIC vs DYNAMIC
----------------------------------
INTERNET (the network)
  |-- Web (browser + pages/resources)
  |-- Email
  |-- Messaging
  |-- File transfer
  `-- Online games

STATIC              DYNAMIC
Browser             Browser
  |                   |
  v                   v
Static Files        Server
(same every time)      |
                        v
                    App Logic
                        |
                        v
                    Database

Connect it to a real scenario

The code example takes an object describing a site and classifies it two separate ways: website-like versus web-application-like, and static versus dynamic.

• The Internet is network infrastructure; the Web is just one service running on top of it
• Website vs web application is a spectrum, not a strict boundary
• Static means serving prebuilt files; dynamic means generating content per request

Try the working example

function classifySite(site) {
  const { hasUserAccounts, hasDatabase, contentChangesPerUser } = site;

  const interactivityScore =
    (hasUserAccounts ? 1 : 0) +
    (hasDatabase ? 1 : 0) +
    (contentChangesPerUser ? 1 : 0);

  const nature = interactivityScore >= 2 ? "web application" : "website";
  const behavior =
    hasDatabase || contentChangesPerUser ? "dynamic" : "static";

  return { nature, behavior };
}

const personalBlog = {
  hasUserAccounts: false,
  hasDatabase: false,
  contentChangesPerUser: false,
};

const newsSite = {
  hasUserAccounts: false,
  hasDatabase: true,
  contentChangesPerUser: false,
};

const dashboardApp = {
  hasUserAccounts: true,
  hasDatabase: true,
  contentChangesPerUser: true,
};

for (const [name, site] of [
  ["Personal blog (hand-written HTML)", personalBlog],
  ["News site (loads articles from a database)", newsSite],
  ["Analytics dashboard (per-user data)", dashboardApp],
]) {
  const result = classifySite(site);
  console.log(`${name} -> ${result.nature}, ${result.behavior}`);
}

Personal blog (hand-written HTML) -> website, static
News site (loads articles from a database) -> website, dynamic
Analytics dashboard (per-user data) -> web application, dynamic

Wikipedia — World Wide Web — How the Web Works