HTML Block vs Inline

🧱 Block Elements

Block elements take up the full width available (by default) and start on a new line. These elements are used to structure your webpage layout and can contain other elements inside them.

Examples:

• <div>: A generic container used to group content.
• <p>: A paragraph element used for text.
• <h1> to <h6>: Header tags used for titles of various importance.

Example of Block Elements:

<div>
  <h1>This is a Block Element</h1>
  <p>This paragraph is part of a block-level element.</p>
</div>

Key Features of Block Elements:

• Takes full width: Block elements stretch across the entire width of the page.
• Starts on a new line: These elements create a new line before and after.
• Can contain other block elements: Block elements can nest other block elements.

🔗 Inline Elements

Inline elements do not start on a new line and only take up as much width as needed. They are mostly used for styling smaller sections of content, like parts of text or links, within a block element.

Examples:

• <span>: Used for styling a section of text without breaking the flow.
• <a>: Anchor tag used to create links.
• <img>: Embeds an image within the content.

Example of Inline Elements:

<p>This is a <span>inline</span> element, and <a href="#">this is a link</a>.</p>

Key Features of Inline Elements:

• Does not take full width: Inline elements only take up as much width as required for their content.
• Does not start on a new line: Inline elements appear within the same line, continuing the flow of content.
• Cannot contain other block elements: Inline elements cannot wrap or contain block-level elements.

⚖️ Key Differences Between Block and Inline Elements

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

📝 Conclusion

Understanding the difference between block and inline elements helps you structure and style web pages more effectively. Use block elements for the main structure, and inline elements to handle small sections or content inside block elements.

📚 Resources