Tags, block elements, and inline elements

The structure of an HTML element

Most HTML elements use an opening tag, such as <p>, and a closing tag, such as </p>, with content between them. The tags and content together form the element. Some elements, such as img, are void elements and have no closing tag.

Block and inline elements

The original lesson introduces these terms using MDN's explanation:

• Block-level elements create a block in the page layout. They typically start on a new line and are useful for structures such as paragraphs, lists, navigation, and footers.
• Inline elements participate in the surrounding text rather than starting a new block. They often mark up smaller pieces of content, such as a link or emphasized words.

Examples of inline elements include a for links, em for emphasis, and strong for strong importance.

Open the original block/inline example on CodePen.

In the example, a block such as p uses the available width, while an inline element such as span occupies the space its content needs. Blocks ordinarily stack vertically. Inline content flows along the line. Width and height declarations do not behave on ordinary non-replaced inline elements as they do on blocks.

Editorial note: the original text made absolute claims about which elements may nest inside others and whether inline elements can be sized. HTML content models and CSS display behavior are separate concepts, and exceptions exist. CSS can also change an element's display mode. The description above reflects the simple layout shown by the lesson.

Source reference retained from the original: MDN on inline elements.