HTML Inline Elements vs Block Elements
HTML Inline Elements vs Block Elements
When working with HTML, elements are generally divided into two categories:
Inline Elements Block ElementsUnderstanding the difference between them will help you structure your webpages properly.
What Are Block Elements?
Block elements always start on a new line and take up the full width available by default.
Think of them as building blocks that stack on top of each other.
Examples of Block Elements
<h1>Heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<section>This is a section.</section>
Example Output
Heading
This is a paragraph.
This is a div.
This is a section.
What Are Inline Elements?
Inline elements do not start on a new line.
They only take up as much width as necessary and can sit beside other elements on the same line.
Examples of Inline Elements
<span>Hello</span>
<a href="#">Link</a>
<strong>Bold Text</strong>
<em>Italic Text</em>
Example Output
Hello Link Bold Text Italic Text
Notice that all the elements appear on the same line.
Common Block Elements
<h1> to <h6>
<p>
<div>
<section>
<header>
<footer>
<nav>
<ul>
<ol>
<li>
Common Inline Elements
<span>
<a>
<img>
<strong>
<em>
<label>
<input>
Key Takeaway
Block elements start on a new line and take up the full available width. Inline elements stay on the same line and only take up the space they need.As a beginner, remember:
Use block elements to structure your webpage. Use inline elements for text, links, images, and small pieces of content within a block element.Code With Fadheelah
Labels:
News
