Elements

An element is one piece of your page. Elements usually have an opening tag, some content, and a closing tag:

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

The anatomy of an element

<h1>Big heading</h1>

• <h1> — the opening tag, in angle brackets
• Big heading — the content
• </h1> — the closing tag, with a slash

Together they form one h1 element: a top-level heading.

Nesting elements

Elements live inside other elements. That nesting is what gives a page its structure:

<main>
  <h1>My hobbies</h1>
  <p>I am learning web development.</p>
</main>

The <p> is a child of <main>. Nesting must be balanced: close tags in the reverse order you opened them. <p><strong>text</p></strong> is broken; browsers will guess — and sometimes guess wrong.

Empty elements

Some elements have no content and no closing tag:

<br />
<hr />

<br> makes a line break; <hr> draws a divider. You will meet more of these (like images) soon.

Common elements you will use constantly

| Element | Meaning | | -------------- | --------------------------------- | | <h1>–<h6> | Headings, most to least important | | <p> | Paragraph | | <ul>, <li> | Unordered list and its items | | <strong> | Strong importance (usually bold) | | <em> | Emphasis (usually italic) |

What you learned

• Elements = opening tag + content + closing tag
• Elements nest; nesting must be balanced
• Some elements are empty and self-closing