How to Create a Clone Website (Fake Website) with HTML

The Ultimate Travel Companion: Top 5 Must-Have Apps For Your

April 17, 2025
Web Tutorials
Notification Show More
Latest News
code bloger facebook clone page coder

How to Create a Clone Website (Fake Website)

Mar 01, 2025
Top five app for travelling

The Ultimate Travel Companion: Top 5 Must-Have Apps

Jul 14, 2024

How to Create a...

The Ultimate Travel Companion:...

Understanding Div and Span In Html

<div> and <span> tag are very important in HTML to wrap content but their meaning is quite different. Let’s break that down a little and see what defines what to use when.

What is div ?

In simple terms, the <div> tag is used as a container to group larger parts of content. It’s a block level element, so it also takes up the entire width of its container and starts on a new line. The <div> tag is used as an organizing layout maker or a words section clothing tag for developers.

Key Points About div

  • it is a block level element.
  • It divides the page into sections.
  • It can be used to organize layouts or to apply styles to larger content areas.

Example

				
					<div style="background-color: lightgrey; padding: 20px;">
  <h2>Welcome Message</h2>
  <p>This is a paragraph inside a container.</p>
</div>

In the example, the <div> groups a heading and a paragraph into a single section with a background color and padding.

What is span ?

  • It’s an inline element, that basically means the text will go around it.
  • It’s an inline element, meaning it doesn’t disrupt text flow.
  • Ideal for targeting and styling specific parts of a sentence or word.

Key Points About span

  • The content stays on the same line as other content.
  • Has no width greater than the width of the content it contains.
  • It cannot have block elements inside it.

Example

				
					<p>
  This is a <span style="color: red;">highlighted</span> word.
</p>

Key Differences Between Block and Inline Elements

Here, we have applied red color over a sentence by using of <span> in order to color certain words in the sentence.

  • Inline Element: <span> is an inline element, meaning it stays inline with the text and doesn’t break the layout.
  • Purpose: It’s perfect for highlighting specific words or small text chunks within a paragraph.
  • Use Case: Best suited for styling specific words, applying custom effects, or emphasizing certain parts of the content.
  • Layout: Unlike <div>, <span> only takes up as much space as its content and doesn’t start on a new line.

Comparing div and span

Comparison: div vs span

Comparison of <div> vs <span>

Feature <div> <span>
Type Block-level element Inline element
Purpose Groups larger sections of content Highlights smaller text pieces
Effect on Layout Starts on a new line Stays inline with text
Use Case Layout or structure organization Styling specific words

When to Use Div

Use <div>: When dividing the webpage into larger sections such as headers, footers, or main content areas. It is ideal for creating containers, especially when working with CSS layout techniques like grid or flexbox.

Example

				
					<div class="wrapper">
  <div class="header">Site Header</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

When to Use Span

Use <span>: For smaller tasks like styling individual words or specific parts of a sentence. It’s useful for emphasizing text, applying custom effects, or targeting inline content without disrupting the flow of the text.

				
					<p>
  Learn <span style="font-weight: bold;">HTML</span> and <span style="font-style: italic;">CSS</span> for web development.
</p>

Try It Yourself

Share with friends