HTML BLOG LAB · 01

Build a blog page with HTML.

HTML gives every idea a home. Today we will turn a blog idea into a clear, welcoming page — one meaningful element at a time.

✦

Everyone can contribute: sketch, talk, type, point, ask a question, or pair up.

01PlanChoose what readers need first.

02BuildUse tags to shape the page.

03CareMake it usable for more people.

HTML
+
IDEAS

A page is a conversation with a reader.

STEP 1 · STRUCTURE

Start with the skeleton.

HTML tags describe the job of each part. A semantic skeleton helps browsers, screen readers, and classmates understand your page.

Try thisPoint to each tag and say what it is responsible for.

blog.htmlHTML

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Field Notes</h1>
      <nav>About · Archive</nav>
    </header>
    <main>
      <article>
        <h2>What makes a good page?</h2>
      </article>
    </main>
  </body>
</html>

Meaningful tags make the page easier to navigate.

STEP 2 · CONTENT

Give the page a voice.

Tags hold content, but people bring the point of view. Add a title, a useful link, and an image with words that tell the story.

✓A title that sets expectations

✓A paragraph with one clear idea

✓A link that says where it goes

Pair promptRead your headline aloud. Does it invite someone in?

our-blog.local / journal•••

A SHARED JOURNAL

What does a good
web page feel like?

A collection of small observations, from our studio to yours.

Read the entry↗

STEP 3 · CARE & ACCESS

Make room for everyone.

Good HTML is not only about looking right. It gives more people a fair chance to read, understand, and join the conversation.

AaHeadingsCreate a clear path.

↗LinksDescribe the destination.

▧ImagesAdd helpful alt text.

Your turnSketch one blog section, then choose the HTML tag that gives it a home.

I notice…

I wonder…

I can try…

Build a blog page with HTML.

Start with the skeleton.

Give the page a voice.

What does a goodweb page feel like?

Make room for everyone.

What does a good
web page feel like?