Inline Element Summary
Inline elements fit within a line of content instead of starting a new block on the page.
<p>Read the <a href="guide.html">guide</a> before you start.</p>The link is inside the paragraph. It does not force the text after it onto a new line.
Inline Elements Flow With Text
Inline elements usually take only the space their content needs. They can sit beside text or other inline elements in the same line.
<p>This sentence has <strong>important</strong> text and a <a href="more.html">link</a>.</p>The paragraph is the larger block. The strong text and link are inline pieces inside that block.
Common Inline Elements
- Links move users to another page, file, or location.
- Images place image files on the page.
- Inputs collect information in forms.
- Buttons create controls for actions.
- Formatting elements add meaning or emphasis to small pieces of text.
Inline And Block Elements Are Different
Block elements usually start on a new line and create larger page boxes. Inline elements usually stay inside those boxes.
CSS can change how an element is displayed, but knowing the default behavior helps you predict what simple HTML will do before styling is added.