HTML Elements

An HTML element is one building block of a page, and most elements have three parts: an opening tag, the content inside it, and a closing tag. The opening tag starts the element, the closing tag ends it, and everything between them is the content those tags control. A paragraph element holds a paragraph, and a heading element holds a heading.

Elements come in sizes. One can wrap a single word, another can wrap a whole page section. When one element sits inside another, that is called nesting. The browser keeps track of how deep the nesting goes and uses that information to lay the page out. Nesting is everywhere in real HTML, so it is worth learning early.

A few elements break the pattern. Void elements like the image tag have no content and no closing tag. They describe themselves with attributes instead. That is not a mistake; it is how those tags are designed, and the browser expects them that way.

Nesting rules

When elements nest, order matters. The innermost tag must close before the tag around it. If you open a paragraph inside a div, you close the paragraph first and the div second. Browsers try to fix broken nesting, but they can guess wrong, and a wrong guess usually means text or layout ends up in the wrong place.

<div>
  <p>I close first.</p>
</div>

Block and inline elements

Elements fall into two broad groups. Block elements like headings and paragraphs start on a new line and stretch across the full width. Inline elements like links and bold text flow within a line and only take up as much room as their content needs. Knowing which group a tag belongs to explains most of how a page stacks up.

<p>This line has <strong>bold</strong> and <a href="#">a link</a> inside it.</p>

Syntax

<tagname>Content goes here</tagname>

<!-- BAD --><div /><p>this p is INSIDE div!</p>
<!-- GOOD --><div></div>