HTML Basics: The Skeleton of the Web

I'm teaching HTML fundamentals, and over the past week I revisited three key concepts that every web developer needs to nail down. These ideas explain how webpages actually work under the hood. I also threw in some practical tips from building sites myself. Here's what stood out.

HTML: The Frame That Holds Everything

You know how a house needs a frame before you add walls and paint? HTML is that frame for websites.

HTML (HyperText Markup Language) tells browsers what content to display and how to structure it. No HTML? No webpage. It's not about making things pretty—that's CSS's job. HTML just says "this is a heading," "this is a paragraph," "this is an image." The browser reads that structure and puts everything in place.

Here's the thing: you can build a functional website with just HTML. Won't win design awards, but it'll work. Try loading any site and disabling CSS—boom, you're looking at pure HTML. It's kinda ugly but readable.

Tags: The Building Blocks

So how does HTML structure content? Tags.

A tag is a label wrapped in angle brackets, like <p> or <h1>. Tags come in pairs most of the time—an opening tag and a closing tag. The closing one has a slash: </p>.

Here's what it looks like:

<p>This is a paragraph.</p>

The <p> says "start a paragraph," the text goes in the middle, and </p> says "end the paragraph." Simple.

Confession time: when I started, I kept forgetting closing tags. My early websites looked like chaos—paragraphs bleeding into headings, lists going rogue. Turns out, browsers are pretty forgiving, but you shouldn't rely on that. Close your tags.

Elements: Tags + Content

Here's where people trip up—tag vs element. They're not the same.

An element is the whole package: opening tag, content, closing tag. So <p>This is a paragraph.</p> is a paragraph element. The <p> by itself? Just a tag.

Think of it like a sandwich. The bread slices are tags. The filling is content. The sandwich is the element. You wouldn't call a piece of bread a sandwich, right?

Code works the same way. When you write HTML, you're creating elements—complete units the browser can understand and display.

Self-Closing Tags: The Lone Wolves

Not all tags need a partner. Some are self-closing (also called void elements).

Take the line break: <br>. No closing tag. Same with images: <img src="photo.jpg" alt="A photo">. These tags don't wrap content—they are the content.

You'll see two styles:

• <br> (standard)

• <br /> (self-closing with a slash)

Both work. The slash is technically optional in HTML5, but some devs still use it for clarity. Pick one style and stick with it.

When do you use them? Anytime the tag doesn't need content inside. Images, horizontal lines (<hr>), input fields—all void elements.

Block vs Inline: How Elements Behave

Elements have personalities. Some hog the whole line (block-level). Others share space (inline).

Block-level elements start on a new line and stretch the full width available. Think <div>, <p>, <h1>, <ul>. They stack vertically, like paragraphs in a document.

Inline elements sit within the flow of text. Think <span>, <a>, <strong>, <img>. They don't break the line—they fit inside.

Example time:

<p>This is a <strong>bold word</strong> in a paragraph.</p>

The <p> is block (takes the whole line). The <strong> is inline (sits inside the paragraph without breaking it).

Why does this matter? Because it affects layout. You can't put a <div> inside a <span>—browsers won't like that. Block elements need to be parents, inline elements are children.

Let's just say I learned this the hard way after trying to nest a full-width <div> inside a tiny <a> tag. The result? Zero lines of functioning layout code.

Common Tags You'll Actually Use

Here's a starter kit of tags you'll see everywhere:

• <p>: Paragraph. Bread and butter of text content.

• <h1> to <h6>: Headings. <h1> is the main title, <h6> is the smallest.

• <div>: Generic container. Organizes chunks of content.

• <span>: Generic inline container. Wraps small bits of text.

• <a>: Link. Takes you places.

• <img>: Image. Self-closing, needs src and alt attributes.

• <ul> and <li>: Unordered list (bullets) and list items.

• <strong> and <em>: Bold and italic, with semantic meaning.

Start here. Master these before diving into forms, tables, or semantic HTML.

Inspect, Tweak, Learn

Want to level up fast? Right-click any webpage and hit "Inspect" (or "Inspect Element"). You'll see the HTML behind the scenes.

Mess with it. Change text, delete elements, add new tags. Nothing breaks permanently—it's just your browser. This is how you learn what works and what doesn't.

I spent hours inspecting sites I liked, reverse-engineering their structure. Copy what's clever, avoid what's messy.

Block vs Inline: Visual Breakdown

┌─────────────────────────────────────┐
│ <div>Block element</div>            │  ← Takes full width
├─────────────────────────────────────┤
│ <p>Another block</p>                │  ← Starts on new line
├─────────────────────────────────────┤
│ Text with <span>inline</span> here  │  ← Inline stays in flow
└─────────────────────────────────────┘

Tag vs Element: The Difference

         Tag           Tag
          ↓             ↓
        <p>   Content   </p>
        └──────┬──────────┘
            Element

Opening tag + content + closing tag = one element.

These insights from revisiting HTML basics continue to shape how I approach web development. If you're learning to code, this is your foundation—nail it before moving on.

Bottom line: HTML is your skeleton. Master tags, understand elements, know the difference between block and inline. Inspect real sites. Build messy projects. You'll get it.