MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 9: Block & Inline Elements!
Have you ever wondered why, when you write an <h1> heading followed by a <p> paragraph, the paragraph automatically jumps down to a brand new line?
Yet, when you make a word <strong>bold</strong> or add an <a>anchor link</a> inside a sentence, it sits comfortably on the exact same line without breaking the sentence?
This happens because every single HTML element in the world belongs to one of two fundamental display families:
Understanding this difference is the secret key to mastering web layout, positioning, and CSS styling. Let's make it super simple!
Imagine your school classroom:
Imagine a big, wide wooden bench in your classroom.
In HTML, Block-level elements act just like those heavy desks:
Now, look at the surface of your classroom desk.
They don't push each other down to the floor! They sit side-by-side peacefully because they only take up as much space as their own size requires.
In HTML, Inline elements act just like your pencil box and bottle:
Let's run a quick experiment in your browser by adding bright background colors to a Block element (<p>) and an Inline element (<span>):
Here are the most common Block-level elements you will use every day:
| Tag | What It Does | Why It's Block |
|---|---|---|
<h1> to <h6> | Headings | Titles need their own dedicated line to stand out clearly. |
<p> | Paragraphs | Reading text requires separate paragraph blocks. |
<div> | Generic Block Container | Used to wrap cards, columns, and layout boxes. |
<ul> and <ol> | Lists | Lists require vertical stacking for easy reading. |
<li> | List Items | Every bullet or number gets its own separate line. |
<table> | Data Tables | Tables need their own horizontal space for grids. |
<form> | Interactive Forms | Form groups stack vertically by default. |
<header>, <footer> | Semantic Layout Sections | Top navigation and bottom footers claim the full page width. |
Here are the most common Inline elements that live smoothly inside sentences:
| Tag | What It Does | Why It's Inline |
|---|---|---|
<span> | Generic Inline Container | Used to style a single word without breaking the sentence. |
<a> | Hyperlink | Links flow naturally inside text paragraphs. |
<strong> / <b> | Bold text | Bolds words inside a flowing sentence. |
<em> / <i> | Italic text | Emphasizes words without jumping to a new line. |
<mark> | Yellow Highlighter | Highlights important exam terms inside a sentence. |
<code> | Code snippet | Displays code terms inline with regular text. |
<img> | Images | Small icons or pictures can sit inline next to words. |
<button> | Clickable Button | Buttons can sit side-by-side in toolbars. |
In HTML, you frequently put elements inside other elements (nesting). But there is an important law of physics you must obey:
| Feature | Block-Level Elements | Inline Elements |
|---|---|---|
| Starting Position | Always begins on a new line | Starts on the same line alongside neighbors |
| Default Width | Stretches to 100% of available width | Only takes width needed for its content |
| Line Break After | Yes, automatically pushes next content down | No, content continues on the same line |
| CSS Width & Height | Fully respects custom width & height | Ignores custom width and height properties |
| Margin & Padding | Full top, bottom, left, and right spacing | Left and right work; vertical top/bottom spacing is ignored or overlaps |
| Best Used For | Layout sections, cards, paragraphs, headings | Highlighting words, links, icons, text formatting |
width or height on an inline <span>Inline elements do not have a fixed box size; their size is dictated strictly by their text! If you write <span style="width: 300px;">, the browser will simply ignore your width!
<p> or <h1> inside an <a> or <span>Never wrap block-level tags inside an inline tag like <span>.
<br> tags to force inline elements into blocksIf you find yourself writing <br><br> after every link just to make them stack vertically, use a Block element like <p> or a list (<ul><li>...</li></ul>) instead!
<h1>-<h6>, <p>, <div>, <ul>, <ol>, <li>, <table>, and <section>.<span>, <a>, <strong>, <em>, <mark>, and <code>.width, height, and vertical margins; inline elements ignore them.Test your understanding with these multiple-choice questions:
Open VS Code and create a file named block-inline-demo.html.
Build a "School Notice Board" that demonstrates both display behaviors:
<h1> with a dark navy background (#0A2540) and white text. Notice how the background stretches across the full window!<p> with a soft yellow background.<strong> tag for the date "September 15th".<mark> tag highlighting "Annual Science Exhibition".<a> link saying "Register Your Project Here".Next Up: In Topic 9.2, we will master Div & Span Containers — the two most important grouping elements in web development!
In the next lesson, we will continue your web development journey with Div & Span Containers (Block & Inline).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Colspan & Rowspan | Div & Span Containers |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.