The Skeleton of the Web: Understanding HTML Tags and Elements

If you strip away the colors, the animations, and the interactive buttons from any website, what you are left with is a plain, top-to-bottom document of text and images.

This underlying structure is HTML (HyperText Markup Language).

HTML is not a programming language. It doesn't calculate math, and it doesn't execute logic. It is a markup language. Its only job is to take raw content and give it meaning. It tells the web browser: "This piece of text is a heading," "This piece of text is a paragraph," or "This link goes to another page."

If building a website is like building a house, HTML is the framing and the drywall. It is the skeleton. And to build that skeleton, you only need to understand two core concepts: tags and elements.

Tags vs. Elements

Beginners (and even experienced developers) often use the words "tag" and "element" interchangeably. While people will understand what you mean, they are technically two different things.

A tag is a label enclosed in angle brackets. You use tags to wrap around your content. An element is the entire package: the opening tag, the content inside, and the closing tag.

Think of it like moving into a new apartment. You have a cardboard box. You put a book inside the box, tape it shut, and write "BOOKS" on the outside with a marker.

• The marker writing is the tag (it labels what is inside).

• The book is the content.

• The fully packed, taped, and labeled box is the element.

Here is what that looks like in code:

[ Breakdown of an HTML Element ]

  <p>    Hello, World!    </p>
  ---    -------------    ----
   |           |           |
Opening     Content     Closing
  Tag                     Tag
  
  |__________________________|
               |
      The whole thing is 
      the HTML Element

1. Opening Tag: <p> tells the browser, "A paragraph is starting right here."

2. Content: Hello, World! is what the user actually sees on the screen.

3. Closing Tag: </p> tells the browser, "The paragraph ends here." Notice the forward slash (/). That is what makes it a closing tag.

Self-Closing (Void) Elements

Most HTML elements wrap around text, which is why they need an opening and a closing tag. But what if you want to display an image? An image isn't wrapping text; it is just embedding a file directly onto the page.

Because there is no text content to wrap, there is no need for a closing tag. These are called self-closing or void elements.

<!-- An image element -->
<img src="profile.jpg" alt="A photo of me">

<!-- A line break element -->
<br>

You just open the tag, provide any necessary information (like the image source), and you're done. No </img> required.

Block vs. Inline Elements

Even without writing a single line of CSS for styling, HTML has rules about how elements should physically sit on the page. Every HTML element defaults to one of two display behaviors: block-level or inline.

Understanding this difference early will save you hours of CSS frustration later.

1. Block-Level Elements

Block elements are greedy. They take up the entire width of whatever container they are in, regardless of how much text is inside them. They always start on a new line, pushing everything else down.

Common block elements: <h1> through <h6> (headings), <p> (paragraphs), and <div> (generic dividers).

2. Inline Elements

Inline elements are polite. They only take up exactly as much width as their content needs. They do not force a new line; they sit comfortably side-by-side with other inline elements, like words in a sentence.

Common inline elements: <a> (links), <strong> (bold text), and <span> (generic text wrappers).

[ Browser Layout Behavior ][ Block Element (<h1>) ========================= ]
[ Block Element (<p>) ========================== ]
[ Inline (<a>) ][ Inline (<span>) ]
[ Block Element (<div>) ======================== ]

If you put a block element inside a paragraph of text, it will shatter the sentence, forcing the text before it up, and the text after it down.

Common Tags in HTML

There are over 100 HTML tags available, but you will build 90% of your websites using the same handful of tags. Here are the daily drivers:

• <h1> to <h6>: Headings. <h1> is the most important (the main title), and <h6> is the least.

• <p>: Paragraphs. Used for standard blocks of text.

• <a>: The anchor tag. This is what creates hyperlinks to other pages.

• <ul>, <ol>, and <li>: Lists. <ul> creates an unordered (bulleted) list. <ol> creates an ordered (numbered) list. <li> is used for the actual list items inside them.

• <div>: The Swiss Army knife of HTML. It is a block-level container with no inherent meaning. You use it to group other elements together so you can style them as a unit later.

• <span>: The inline equivalent of a div. Used to wrap a specific piece of text (like a single word) inside a paragraph so you can change its color or font.

Go Look at the Skeleton

You don’t need to memorize every tag. HTML is a vocabulary, and like any vocabulary, you will learn the words by using them.

The best way to solidify this mental model is to look under the hood of the web. Open a new tab, go to any website, right-click anywhere on the page, and select Inspect (or Inspect Element).

A panel will open showing the raw HTML of the website. As you hover over the tags, your browser will highlight the corresponding elements on the screen. You will see the <div> blocks stacking on top of each other, and the <span> and <a> elements sitting nicely inline.

Every complex web application in the world—from Netflix to Gmail—is built out of these same basic boxes. Once you know how to stack the boxes, you can build anything.