• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Block & Inline

← Previous Next →

🔹 What Are HTML Elements?

HTML elements are building blocks of a webpage. Based on their behavior, elements are broadly categorized into:

  • Block-level elements

  • Inline elements

🔹 Block-level Elements

Block elements start on a new line and take up the full width available.
They are used to structure content into sections, paragraphs, etc.

🔸 Common Block Elements:

  • <div>

  • <p>

  • <h1> to <h6>

  • <ul>, <ol>, <li>

  • <table>

  • <form>

  • <section>, <article>, <header>, <footer>

🔸 Example:
<p>This is a paragraph.</p>
<div>This is a block-level element.</div>

🔹 Inline Elements

Inline elements do not start on a new line. They take up only as much width as necessary and are usually used to style small parts of text.

🔸 Common Inline Elements:

  • <span>

  • <a>

  • <strong>

  • <em>

  • <img>

  • <label>

  • <input>

🔸 Example:
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>

🔹 Key Differences

Feature Block Element Inline Element
Line Break Starts on a new line Does not break line
Width Full width (by default) Only needed width
Use Case Layout and structure Formatting content

🔹 Mixing Block and Inline

You can use inline elements inside block elements, but not always vice versa.

✅ Allowed:

<p>This is <span>inline text</span> inside a paragraph.</p>

🚫 Not Allowed:

<span><div>This is invalid HTML</div></span>

Practice Questions

Q1. Create a <div> containing a paragraph and a heading.

Q2. Use an <h2> tag inside a <section> block.

Q3. Add a <span> to highlight a word inside a sentence.

Q4. Add a link (<a>) inside a paragraph.

Q5. Create a form with input fields (<input>) and labels (<label>).

Q6. Place multiple inline elements inside a block-level <div>.

Q7. Try placing a block element inside an inline element (and explain the result).

Q8. Use both <strong> and <em> to style a phrase.

Q9. Create a list of items inside a <section> block.

Q10. Use CSS to make a block element behave like inline (display: inline;).

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top