Elements & Tags

Every piece of content on a web page — a heading, a paragraph, an image, a button — is wrapped in an element. Think of an element as a labeled box. The label tells the browser (and screen readers, and search engines) what kind of content is inside.

You write an element using tags: a pair of angle-bracket labels that wrap your content. Most elements have an opening tag and a closing tag (the closing tag adds a forward slash). Some special elements, like images, are self-closing — they hold no text content, so there is nothing to wrap.

Tags and attributes

<tagname attribute="value">Content goes here</tagname>

The opening tag can carry extra information called attributes — think of them as settings or properties for that element. For example, a link needs to know where to go, and an image needs to know where the file is. Those values live in attributes.

<a href="https://example.com">Visit this site</a>
<img src="photo.jpg" alt="A description of the photo" />

Notice the image tag ends with /> — it is self-closing because it has no text content to wrap.

The page skeleton

Every HTML document follows a standard structure. It is like a design file template — the same outer frames every time, then your unique content inside.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page title shown in the browser tab</title>
  </head>
  <body>
    Everything visible goes here.
  </body>
</html>

<!doctype html> — a one-line instruction that tells the browser “this is a modern HTML file”. Always the very first line.
<html> — the outermost container, like the canvas in Figma.
<head> — invisible metadata: the page title, character encoding, links to CSS files. Think of it as the “document settings” panel.
<body> — everything the user actually sees goes here.

Nesting

Elements can live inside other elements — this is called nesting. The rule is simple: always close the inner element before closing the outer one. In Figma terms: a text layer must be fully inside its parent frame; you cannot let it partially overlap.

<div>
  <h2>My design portfolio</h2>
  <p>I create <strong>bold</strong> and <em>elegant</em> interfaces.</p>
</div>

Try changing <h2> to <h3>, or add another <p> below the first one. Notice how the browser stacks block elements one below the other, just like auto-layout in a vertical frame.

Common mistakes designers run into

Using a <div> instead of a meaningful element — for example, a div for a button instead of a real <button>
Opening a tag but forgetting to close it
Nesting elements illegally (e.g. a <p> inside another <p>)

The developer’s perspective

👨‍💻 What developers actually see

Designers see “a rectangle,” but developers see that the right tag gives you default behavior for free (a button responds to Enter, receives keyboard focus) without writing any extra code.

💡 Real-world example

A real <button> element is keyboard-operable (Enter/Space, tab focus) the moment it’s on the page — a <div> styled to look like a button needs extra JavaScript and ARIA just to reach the same baseline.