• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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;).

HTML Block & Inline Quiz

Q1: Which of the following is a block-level element?

A. <span>
B. <strong>
C. <div>
D. <em>

Q2: Which element is inline by default?

A. <p>
B. <table>
C. <h1>
D. <a>

Q3: What does a block-level element do?

A. Occupies only text width
B. Always contains inline elements
C. Starts on a new line and takes full width
D. Renders in italics

Q4: Which of the following is NOT an inline element?

A. <img>
B. <label>
C. <div>
D. <span>

Q5: Can an inline element contain a block-level element?

A. Yes
B. No
C. Only in CSS3
D. Only with <iframe>

Q6: Which tag is commonly used to group inline text for styling?

A. <b>
B. <mark>
C. <span>
D. <table>

Q7: Which tag is commonly used to group block elements for layout?

A. <div>
B. <abbr>
C. <i>
D. <span>

Q8: What is the default display type of <p>?

A. inline
B. block
C. inline-block
D. flex

Q9: What HTML tag is suitable for adding bold styling in an inline manner?

A. <div>
B. <strong>
C. <h4>
D. <li>

Q10: Which CSS property can change a block element to behave like inline?

A. float
B. display: flex;
C. display: inline;
D. text-align: left;
← Previous Next →
Login
Go Back Top