HTML Foundations

Did Zuckerberg use magic? Start with the browser.

Ever wondered how Facebook was made? What about WhatsApp, Telegram or YouTube? They can feel like magic, but every web interface begins with a browser reading a structure it understands. That first layer is HTML.

HTML means HyperText Markup Language. It is a markup language—not a programming language—and it describes the content and structure of a web page. Every website uses HTML, whether it is a small portfolio, an online shop or a large web application.

No account or special compiler is needed to begin. A text editor and a web browser are enough: save a file as index.html, then open it in the browser. HTML tells the browser what each piece of content is; CSS changes how it looks, and JavaScript changes what it does.

Did you know?HTML already provides native links, forms, audio, video, disclosure widgets and dialogs. Good HTML often removes JavaScript you would otherwise have to build and maintain.

A dependable starting document

<!doctype html>
<html lang="en-KE">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nairobi Dev Meetup</title>
  </head>
  <body>
    <h1>Nairobi Dev Meetup</h1>
    <p>Build, learn and meet other developers.</p>
  </body>
</html>

<!doctype html> selects modern HTML behaviour.
lang tells tools how to pronounce and interpret the page.
charset supports ordinary text and symbols reliably.
The viewport line lets the layout use a phone's real width.
A specific title identifies the tab and search result.

Two-minute check

I can explain the different jobs of HTML, CSS and JavaScript. I can create and open an index.html file. My page has one clear h1 describing its main purpose.

Use the element that matches the job.

Semantic elements communicate purpose. A <button> performs an action; an <a> goes somewhere. A heading introduces a section; it should not be chosen only because its default size looks right.

<header>
  <nav aria-label="Primary">
    <a href="/events/">Events</a>
    <a href="/projects/">Projects</a>
  </nav>
</header>

<main>
  <article>
    <h1>How we run a code clinic</h1>
    <p>Bring one bug and explain what you already tried.</p>
  </article>
</main>

Four habits with a large payoff

Keep heading levels logical: an h2 section belongs under the page's h1.
Write link text that makes sense alone—“Read the CSS guide” is clearer than “click here”.
Give useful images concise alternative text; use empty alt="" for decoration.
Connect every form control to a visible <label>. Placeholder text is not a label.

<form>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <button type="submit">Join the meetup</button>
</form>

Why use native elements instead of clickable divs?

Native links, buttons and form controls already provide keyboard behaviour, focus handling and meaning. Rebuilding all of that correctly with generic elements creates avoidable work and accessibility bugs.

A short loop beats passive reading.

For every lesson, spend about ten minutes reading, twenty minutes typing and changing the example, then five minutes explaining the idea without looking. Use the browser inspector and the HTML validator to catch nesting and attribute mistakes.

45 min

Learning profile

Structure a complete page with headings, lists and useful links.

Create my copy View repo · star if it helped

60 min

Recipe article

Use landmarks, a figure, useful alternative text and ordered steps.

Create my copy View repo · star if it helped

75 min

Event schedule

Mark up related timetable data with a caption and clear headers.

Create my copy View repo · star if it helped

75 min

Community signup

Build a labelled, grouped and keyboard-usable native form.

Create my copy View repo · star if it helped

Ready to move into CSS?

The page works with styles disabled. I can reach every control using the keyboard. Images have appropriate alt text and inputs have labels. I validated the HTML and fixed the first error, not just the symptoms after it.

Recall: what makes HTML “semantic”?

The selected element describes the role of its content, not merely its visual appearance. Meaningful structure helps people and software understand the page.

Did Zuckerberg use magic? Start with the browser.

A dependable starting document

Two-minute check

Use the element that matches the job.

Four habits with a large payoff

A short loop beats passive reading.

Learning profile

Recipe article

Event schedule

Community signup

Ready to move into CSS?

The complete note goes deeper.