Prev Next

HTML Block & Inline

HTML elements are often categorized as either block-level or inline. Block-level elements, like <div> or <p>, start on a new line and stretch to fill available width. Inline elements, like <span> or <a>, flow with surrounding text and only take up as much width as needed.

Key Topics

Block Elements

Example: A block-level element (e.g., <div>) starts on a new line.

<div>This is a block element.</div>
<p>Another block element here.</p>

Inline Elements

Example: Inline elements (e.g., <span>) stay within the same line as surrounding text.

<p>This is a paragraph with a <span>highlighted word</span> inside.</p>

Example

This example demonstrates both block and inline elements together. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Block and Inline</title>
</head>
<body>
    <div style="background:#f0f0f0; padding:10px;">
        <p>This is a block-level paragraph.</p>
        <p>Another block-level paragraph with an <span style="color:red;">inline element</span> inside it.</p>
    </div>
</body>
</html>

Explanation: The <div> and <p> elements create distinct blocks, while the <span> is inline, integrated seamlessly into the text.

Key Takeaways

  • Block-level elements start on a new line and span the full width available.
  • Inline elements flow within the line of text, taking only required space.
  • Understanding these categories helps structure content and control layout.
  • Use block elements for sections, paragraphs, and divisions of content.
  • Use inline elements for emphasizing or modifying portions of text within a line.
Prev Next