Inline elements are HTML elements that:
- Do not start on a new line — they appear in the same line as surrounding content.
- Take up only as much width as needed for their content.
- Are typically used to format parts of text or small content pieces inside block elements.
- Cannot contain block-level elements (only inline or text).
1. Characteristics of Inline Elements
- Flow within a line of text.
- Do not force a line break.
- Only take up space equal to their content.
- Can have padding and margins (but vertical spacing affects layout differently than block elements).
- Often used for styling or linking text, adding inline images, or marking parts of content.
2. Common Inline Elements
| Tag | Purpose |
|---|---|
<span> | Generic container for inline text styling |
<a> | Hyperlink |
<strong> | Bold importance |
<em> | Emphasis (italic by default) |
<b> | Bold (no semantic meaning) |
<i> | Italic (no semantic meaning) |
<u> | Underlined text |
<small> | Smaller text |
<mark> | Highlighted text |
<abbr> | Abbreviation with tooltip |
<code> | Inline code snippet |
<sub> | Subscript text |
<sup> | Superscript text |
<img> | Inline image |
<label> | Label for form elements |
<time> | Date/time value |
3. Example Usage
<p>This is a <strong>bold</strong> word and this is <em>italic</em>.</p>
<p>Visit <a href="https://example.com">this link</a> for more info.</p>
Output:
- bold and italic text appear in the same line.
- The link is inline with the sentence.
4. Visual Concept
[Block element: starts new line]
This text [inline element: in the same line] continues here.
5. CSS Display Property
You can make any element inline using:
display: inline;
Example:
<div style="display:inline;">Inline div 1</div>
<div style="display:inline;">Inline div 2</div>
