HTML

HTML is the skeleton of a webpage. It gives every piece of content a name and a container. The browser reads HTML top to bottom and shows exactly what the tags tell it to show.

A heading is a heading because it sits in an <h1>, not because it's big.

Anatomy of a Tag

Most HTML elements come as a "sandwich": an opening tag, content in the middle, and a closing tag.

<h1>Welcome to my site</h1>
Opening Tag Content Closing Tag
<h1> Welcome to my site </h1>

The closing tag has a forward slash (/). It tells the browser "the section I labelled h1 is now finished."

Some tags are self-closing — they don't take content. The most common is <img>:

<img src="cat.jpg" alt="A cat" />

Attributes

Tags can carry attributes — extra information inside the opening tag, written as name="value".

<a href="https://example.com">Click me</a>

Here <a> is the tag, href="..." is the attribute, and Click me is the content. Common attributes you'll see:

Tag Attribute Example Meaning
<a> href <a href="https://google.com"> Where the link points to.
<img> src <img src="cat.jpg"> The image file to display.
<img> alt <img alt="A cat"> Description for screen readers.
any class <p class="big-text"> A label for CSS to target.

Attributes always live in the opening tag, never the closing one.

The HTML Skeleton

Every HTML file starts with the same foundational structure. Don't worry about every line — focus on the two main parts: <head> and <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>
Tag What it is What it holds
<!DOCTYPE html> The declaration "This is an HTML5 document." You won't touch this.
<html> The wrapper Contains everything else.
<head> The brain Hidden info: the page title, links to CSS, etc. Not visible on the page.
<title> The tab name What appears in the browser tab.
<body> The body Everything visible on the actual page.

VS Code shortcut: type ! and press Tab and VS Code expands it into a full HTML skeleton. Saves typing.

When you save a file as index.html, the server treats it as the homepage — that's why every site has one.

Your Essential Toolbox

The handful of tags that do most of the work on a typical page:

Tag What it is Example
<h1>–<h6> Headings (biggest to smallest) <h2>Event Details</h2>
<p> Paragraph <p>Welcome to the party!</p>
<a> Link (anchor) <a href="https://example.com">Click me</a>
<ul> / <li> Unordered list / list item bullet points
<ol> / <li> Ordered (numbered) list numbered list
<img> Image (self-closing) <img src="cat.jpg" alt="A cat">
<section> A chunk of the page <section><h2>About</h2>...</section>
<header> The top of a page or section <header><h1>...</h1></header>
<footer> The bottom of a page or section <footer>© 2026</footer>
<strong> Bold (semantically important) <strong>important</strong>

A simple list:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Comments

Sometimes you want to leave a note for yourself (or your instructor) inside the code without it showing on the page. Comments do that — the browser ignores everything inside them.

<!-- TODO: Change this color later -->
<p>Welcome to the party!</p>

<!-- This section is for the RSVP link -->
<a href="...">RSVP</a>

Comments start with <!-- and end with -->.

When the Preview Looks Broken

Almost every HTML bug is one of these three:

  • A missing closing tag — <h1> somewhere with no </h1> further down.
  • A typo in a tag name — <h1 (missing >) or <sectoin> (transposed letters).
  • An unclosed attribute quote — <a href="https://example.com> is missing the closing ".

When the page looks wrong, scroll through the HTML and look for those three patterns first.

Start Your About Me Page

Create a folder called about-me inside your invent-the-future folder. Open it in VS Code and create two empty files: index.html and styles.css.

Use the HTML skeleton above as a starting point and fill in your own content:

  • Set the <title> to your name.
  • Add an <h1> with your name or a handle.
  • Add an intro paragraph.
  • Add a <ul> with three interests.
  • Add an <img> for an avatar — any image works for now, you can swap it later.

Don't link the stylesheet yet. Structure first.