Theory
The Portfolio Layout Disaster
Imagine you are coding the 'About Me' page for your college portfolio. You write your name, then a short bio, and then you want to insert a profile photo. But when you look at the browser, everything is jammed into a single messy line! Your name, your bio, and your photo are bumping into each other like a crowded bus in Mumbai. Why does HTML ignore your neat paragraphs and line breaks, and how do you fix it?
Theory
Bricks vs Stickers
Think of HTML elements as two kinds of items: bricks and stickers. Some elements act like heavy concrete bricks. When you place a brick, it occupies the full width of the wall, forcing anything else to sit on top or underneath it. Other elements act like small stickers. You can stick multiple stickers side by side on the same line until there is no room left. Knowing which tag is a brick and which is a sticker controls your layout structure completely.
Theory
Block vs Inline and Container vs Non-Container
In web architecture, tags are classified by display behavior and structural role:
- Block-level elements start on a new line and take up the full available width. Examples include
<div>(generic division) and<p>(paragraph).
- Inline elements do not start on a new line and only take up as much width as necessary. An example is
<span>.
- Non-container tags (also called empty or self-closing tags) do not wrap content and have no closing tag. Examples include
<br>(line break),<hr>(horizontal rule), and<img>(image).
At a glance
Comparison of core HTML layout and structural elements.
| Tag Type | Tags | Starts New Line? | Closes? |
|---|---|---|---|
| Block Container | div, p | Yes | Yes, with closing tag |
| Inline Container | span | No | Yes, with closing tag |
| Non-Container (Empty) | br, hr | br: force break, hr: full width line | No, self-closing |
| Non-Container (Asset) | img | No (Inline flow) | No, needs src attribute |
Practical
The Correct Portfolio Structure
<div>
<h2>My Portfolio</h2>
<hr>
<p>
Hello! I am a <span>BCA student</span> specializing in web development.
<br>
Check out my profile below:
</p>
<img src="profile.jpg" alt="My Photo">
</div>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Deconstructing the Layout
Let us break down how the browser renders this example:
- The
<div>creates a major block container holding the entire section together.
- The
<hr>draws a full-width line below the heading, acting as a block-like structural break.
- The
<p>block groups the text and automatically pushes the text down onto a fresh line.
- The
<span>applies custom grouping to the words 'BCA student' without breaking the line.
- The
<br>forces 'Check out my profile' onto a new line within the same paragraph.
- The
<img>inserts the image inline right after the text.
Quiz
An exam question asks you to insert a horizontal line divider between two portfolio sections. Which code fragment is structurally valid and accurate?
- Section 1 <hr></hr> Section 2
- <hr>Section 2, writing the next section as the hr tag's content
- Section 1 <div></div> Section 2
- Section 1 <hr> Section 2
Show the answer
Section 1 <hr> Section 2
<hr> is a non-container tag: it has no closing tag and cannot contain text. Writing </hr> is a severe syntax error in university exams. Treating it as an open tag holding content is equally wrong, and an empty div is a generic container, not a horizontal line divider. The bare <hr> placed between the sections is the only structurally valid form.
Think first
Predicting Inline and Block Behavior
Mentally predict the output: If you write two <div> blocks consecutively, and then two <span> blocks consecutively, how many lines will be created on the screen? Think before tapping.
Show the answer
Three lines will be created. The first <div> takes line 1. The second <div> is a block element, so it forces itself onto line 2. The first <span> sits on line 3. Because <span> is an inline element, the second <span> sits right next to it on line 3 as well. Total: 3 lines.
Watch out
The Paragraph and Break Abuse Trap
A very common mistake among university students is using a massive chain of <br><br><br> tags to create vertical spacing, or nesting a <div> inside a <p> tag. In HTML5 rules, a paragraph <p> can only contain phrasing content (inline elements). Nesting a block element like <div> inside a <p> causes the browser to automatically close your paragraph early, creating broken layouts and invalid HTML. For spacing, rely on CSS margins later, not <br> text hacks!
Formula
Exam Answer Recipe: Distinguishing Block vs Inline
When asked to differentiate Block and Inline tags in your semester exam, write these 3 points for maximum marks:
- 1. Line behavior: Block elements always begin on a new line: Inline elements stay within the current flow.
- 2. Dimensions: Block elements expand to 100% width of their container: Inline elements wrap tightly around content.
- 3. Content limits: Block elements can contain other block or inline elements: Inline elements can only contain other inline elements or text.
Summary
Key takeaways
- Block elements like div and p always start on a fresh line and stretch across the full available width.
- Inline elements like span live inside existing lines and take up only the exact width of their text content.
- Non-container tags like br and hr have no closing tags and cannot contain children or wrapping text.
- The img tag is a unique non-container tag that loads external visual assets in an inline flow.
- Never nest a block-level tag like div inside a paragraph tag p as it breaks HTML validation rules.
- Think of block tags as layout bricks and inline tags as text stickers.