Scribd
Upload
5 views6 pages

HTML

The document explains the differences between block elements and inline elements in HTML, highlighting their characteristics, examples, and usage. Block elements take up the full width of their container and start on a new line, while inline elements only take up as much width as necessary and do not cause line breaks. It also covers the usage of <div> and <span> elements for grouping and styling content, emphasizing when to use them appropriately.

Uploaded by

farranedward
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views6 pages

HTML

The document explains the differences between block elements and inline elements in HTML, highlighting their characteristics, examples, and usage. Block elements take up the full width of their container and start on a new line, while inline elements only take up as much width as necessary and do not cause line breaks. It also covers the usage of <div> and <span> elements for grouping and styling content, emphasizing when to use them appropriately.

Uploaded by

farranedward
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Block Elements

Block elements take up the full width of their container and always start on a new line. They
create a “block” of content. These elements usually have a line break before and after them.

Key Characteristics:

 They take up the entire width available (unless you specify a width).
 They start on a new line and push other content below them.
 They can contain other block elements or inline elements.

Examples of block elements:

 <div>: Often used to group other elements.


 <p>: Paragraphs of text.
 <h1>, <h2>, <h3>, etc.: Headings.
 <ul>, <ol>, <li>: Unordered lists, ordered lists, and list items.
 <form>: A form element.

Example:

html
Copy code
<div>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</div>

In this example, the <div>, <h1>, and <p> are all block elements. Each will appear on a new line.

Inline Elements

Inline elements do not start on a new line. They only take up as much width as necessary,
meaning they fit within the flow of the surrounding content. They do not cause line breaks
before or after them.

Key Characteristics:

 They do not force line breaks; they flow inline with other elements.
 They only take up as much space as they need.
 They cannot contain block elements (but can contain other inline elements).

Examples of inline elements:

 <span>: A generic inline container (used for styling or grouping small pieces of content).
 <a>: Links.
 <img>: Images.
 <strong>: Text that is emphasized (usually bold).
 <em>: Text that is emphasized (usually italicized).

Example:

html
Copy code
<p>This is a <strong>bold</strong> word in a paragraph.</p>

In this example, <strong> is an inline element. It doesn't cause a line break and only takes up as
much space as the bolded text.

Key Differences Between Block and Inline Elements

Feature Block Elements Inline Elements


Take up the entire width of the Only take up as much space as their
Positioning
container. content.
Line Breaks Always start on a new line. Do not start on a new line.
Can contain both block and inline
Containment Can only contain other inline elements.
elements.
Examples <div>, <p>, <h1>, <ul>, <form> <a>, <span>, <img>, <strong>

Combining Block and Inline Elements

You can also combine block and inline elements within the same page. For example, you can
have a block element like a <div> that contains several inline elements like <span> or <a>.

Example:

html
Copy code
<div>
<p>This is a paragraph with <span>inline text</span> inside.</p>
<a href="https://example.com">Click here</a>
</div>

In this example, the <div> is a block element, but the <p>, <span>, and <a> inside it are inline
elements.

What is <div>?
The <div> tag in HTML stands for “division”. It’s a block-level container used to group other
elements together so you can style them or organize your webpage.

Think of <div> like a box you can use to hold other HTML elements. It doesn’t have any default
styling or visible borders—you have to add styles with CSS if you want it to look a certain way.

✅ Why do we use <div>?


We use <div> to:

1. Group related content together.


2. Apply CSS styles to a specific section of the page.
3. Layout a webpage into sections (header, footer, sidebar, etc.).

It’s especially useful when you want to control the layout and design of a webpage.

✅ Basic Example of <div>:


html
Copy code
<div>
<h1>Welcome to my website</h1>
<p>This is my first paragraph.</p>
</div>

👉 In this example, both the <h1> and <p> are inside the <div>.
👉 They are grouped together so you could style them together with CSS.

✅ Adding CSS to <div>:


You can style a <div> using class or id attributes.

Example with class:


html
Copy code
<div class="box">
<h2>About Me</h2>
<p>I love coding!</p>
</div>
And in CSS:

css
Copy code
.box {
background-color: lightblue;
padding: 20px;
border: 2px solid black;
}

👉 Now, the <div> will have a light blue background, padding, and a border.
👉 You can style everything inside the <div> by styling the container.

✅ Key things to know about <div>:


 It’s a block element → it takes up the full width and starts on a new line.
 It has no default appearance → it's invisible unless you style it.
 It’s mainly used for layout, grouping, and styling.

✅ When NOT to use <div>:


Try to avoid using <div> if there’s a more semantic tag available. For example:

 Use <header> for a page header.


 Use <nav> for navigation menus.
 Use <section> for sections of content.
 Use <article> for articles or blog posts.

But if you just need a general container with no specific meaning, <div> is perfect!

🎯 In short:

✅ <div> is like an invisible box that groups content.


✅ It helps organize the structure of a webpage.
✅ It’s very useful when working with CSS layouts.

What is <span> in HTML?


<span> is an inline element used to group small parts of text or inline content so you can
apply CSS styles or JavaScript actions to just that small part.

👉 Think of <span> like a highlighter:

 It doesn’t create a new line.


 It doesn’t add extra space.
 It’s invisible until you style it.

✅ Key characteristics:
 Inline element → it stays inside the line of text.
 Used for styling a part of text or inline content.
 Does not have any default style or appearance.

✅ Basic example:
html
Copy code
<p>This is a <span style="color: red;">red word</span> in a sentence.</p>

👉 Only the word “red word” will appear in red, because we wrapped it in <span> and styled it.

Without <span>, we’d have to style the whole paragraph.

✅ Why use <span>?


Use <span> when you want to:
✔️Style only part of a sentence or word.
✔️Apply a CSS class to a small section.
✔️Target something with JavaScript.

✅ Example with CSS class:


html
Copy code
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>

<p>I want to <span class="highlight">highlight this part</span> of the


sentence.</p>

👉 The text inside <span class="highlight"> will have a yellow background and be bold, but
the rest of the sentence stays normal.

✅ Difference from <div>:


Feature <div> (block element) <span> (inline element)
Starts on new line? ✅ Yes ❌ No
Takes full width? ✅ Yes ❌ No
Use for big sections? ✅ Yes ❌ No
Use inside sentences? ❌ No ✅ Yes

🎯 In short:

✅ Use <span> to style or target small parts inside a line of text without breaking the line.
✅ It's like a container for inline content.
✅ It won’t do anything visible until you style it with CSS.

You might also like