Block And Inline in HTML
? Block vs ? Inline Elements in HTML
In HTML, elements are broadly categorized into two types:
Block-level elements
Inline elements
Understanding the difference is essential for layout and styling.
? Block-Level Elements
What they do:
Start on a new line
Take up the full width of their container
Often used for structuring sections of content
? Examples:
<div><p><h1>to<h6><ul>,<ol>,<li><table><section>,<article>,<nav>,<header>,<footer>
? Example:
<p>This is a paragraph.</p><p>This is another paragraph.</p>Each paragraph appears on a new line.
? Inline Elements
What they do:
Do not start on a new line
Only take up as much width as necessary
Used to style parts of content within block elements
? Examples:
<span><a><strong>,<em><img><input>,<label><br>
? Example:
<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>All the text appears on the same line inside the paragraph.
? Comparison Table
| Feature | Block Element | Inline Element |
|---|---|---|
| Starts on new line | ? Yes | ? No |
| Takes full width | ? Yes | ? No |
| Can contain block elements | ? Yes (in most cases) | ? No |
| Common tags | <div>, <p>, <h1> | <span>, <a>, <strong> |
? Tip:
You can change an element’s display type using CSS:
/* Make a div behave like inline */div { display: inline;}/* Make a span behave like block */span { display: block;}Would you like a live demo code showing how block and inline elements behave?
