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.