Your first page, in a plain text file

Take the sentence "My cat is very grumpy". Wrap it in <p> tags and the browser knows it is a paragraph. Wrap a word in <strong> and the browser knows it matters. That is the entire job: HTML marks up what things ARE, and everything else (looks, behavior) builds on that truth.

<h1>My first heading</h1>
<p>My cat is <strong>very</strong> grumpy.</p>

Why this matters to you

• Meaning is machine-readable. Search engines, screen readers, and AI assistants all navigate pages by these tags - good markup is how your page gets understood, not just seen.
• The browser is forgiving but literal. It renders exactly what the tags claim. Claim a heading with <h1> and you get one; fake it with big bold text and machines see nothing.

Attributes are name="value" pairs that live in the opening tag and configure the element: where a link goes (href), which file an image shows (src), what a screen reader says about it (alt). Rules: space before the attribute, value in quotes, never inside the content.

<p>My favorite reference is
  <a href="https://developer.mozilla.org">MDN</a>.
</p>

Elements go inside other elements - a <strong> inside a <p> inside the page. The one law: close inner elements before outer ones. <p><strong>text</strong></p> is nested; <p><strong>text</p></strong> is overlapped, and the browser has to guess what you meant.

• Indent nested elements two spaces - the browser doesn't care, the next human (you, next month) does.
• Void elements have no content and no closing tag: <img>, <br>, <hr>, <meta>. They are settings-only elements - all attributes, no text.

Every element has one of two default behaviors, and knowing which is which explains most "why is it on a new line?" surprises:

• Block elements claim a full row and stack downward: <h1>-<h6>, <p>, <ul>, <div>, and the structural elements from Session 3.
• Inline elements flow inside a line of text without breaking it: <strong>, <em>, <a>, <code>, <span>.

<h2>A block claims the row</h2>
<p>But <strong>inline</strong> elements like
<em>emphasis</em> and <code>code</code>
flow inside the text.</p>

One consequence worth knowing early: nesting a block inside an inline (a <div> inside an <a>'s text) is usually a smell. Blocks hold inlines, not the reverse.

• <!DOCTYPE html> - a historical handshake that now just means "render this in modern standards mode". Always line 1, exactly like this.
• <html lang="en"> - the root element wrapping everything. The lang attribute tells screen readers which voice to use and translators which language they're leaving.
• <head> - metadata: the browser-tab title, character encoding, favicon, CSS. Visitors never see the head directly.
• <body> - everything visible. All of today's work after this line.
• <meta charset="utf-8"> - first line inside the head. Declares the character encoding so names, accents, emoji and every non-English character survive. Skip it and "Phoebe's café" can render as garbage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>This shows in the browser tab</title>
  </head>
  <body>
    <h1>This shows on the page</h1>
    <p>The head is the label. The body is the box.</p>
  </body>
</html>

Browsers are heroically forgiving: forget a closing tag, skip the doctype, misspell an attribute - something still renders. That's a design choice from 1995 (never punish the reader for the author's mistakes), and it cuts both ways:

• Good: your learning pages never explode with error messages. Experimentation is safe.
• Bad: mistakes hide. The page "works" while the structure underneath is quietly wrong - until a style, a screen reader, or another edit exposes it.

The professional habit: don't rely on forgiveness. Session 6 introduces the W3C validator, which reads your file with zero mercy and lists every technical sin. Until then: close what you open, quote your attributes, nest cleanly.

<h1> to <h6> are an outline, not a font-size menu. Three rules cover professional use:

• One <h1> per page - the page's own title. Everything else nests under it.
• Never skip levels going down. h1 → h2 → h3. Jumping h1 → h4 because "it looks right" breaks the outline; size is a Session 5 problem.
• Headings label the section that follows - if nothing follows it, it wasn't a heading.

<h1>Phoebe Fu</h1>
<p>Data and AI person. This page is my corner of the internet.</p>

<h2>Projects</h2>
<p>Things I have built and shipped.</p>

<h2>Now</h2>
<p>What I am learning this season.</p>

Each <p> is one thought. The browser adds the spacing between paragraphs - you never add blank lines for layout. And a surprise for every beginner: whitespace collapses. Ten spaces, five newlines - the browser renders one space.

<p>This    sentence      has
wild        spacing
in the source.</p>
<p>New thought? New paragraph element.</p>

• <br> forces a line break INSIDE a paragraph - for poems and addresses, not for spacing between blocks.
• <hr> draws a thematic break - a scene change between paragraphs.

Anything between <!-- and --> is invisible to visitors: <!-- TODO: add photo here -->. Use comments to leave notes for future-you, to label sections of a long file, or to temporarily hide an element while testing ("comment it out"). One caution: comments are visible to anyone who views source - no secrets in them.