Home 〉 HTML Tutorials 〉 HTML div and span Tag Explained with Examples - Complete Guide

HTML div and span Tag Explained with Examples - Complete Guide !

HTML div and span Tag Explained with Examples - Complete Guide !

What are the 'div' and 'span' tags in HTML and how are they used?

This blog post explains both tags in detail, covering their syntax, type (block vs inline), attributes, and usage examples with CSS styling. You learned how to group content, apply styles, and work with common attributes like 'id', 'class', and 'style'. Understanding these foundational tags is key for structuring and designing any webpage. The detailed blog post on HTML div & span tag is as follows.

Introduction

In HTML, the 'div' and 'span' tags are essential for structuring and styling web content. They don't change how content looks by themselves but act as containers to group and style content using CSS or JavaScript. Understanding these tags is important for controlling the layout of your webpage and applying styles effectively.

Syntax and Explanation

HTML div tag

Syntax ✍

<div>Content goes here</div>

* The '<div>' tag is a block-level container used to group other HTML elements. It takes up the full width by default.

HTML span tag

Syntax ✍

<span>Inline content</span>

The '<span>' tag is an inline container. It doesn't start on a new line and is used to apply styles to small portions of text or inline elements.

Block, Inline, or Empty?

Attributes of div and span

These are the following 'attributes' of 'div' and 'span' tag

1. 'id' - Assigns a unique identifier

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

#mainSection {
width: 80%;
padding: 20px;
margin: 10px auto;
background-color: #abc;
border: 1px solid #ccc;
border-radius: 8px;
}

</style>
</head>
<body>

<div id="mainSection">Main content here</div>

</body>
</html>

output 📌

Main content here
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • You can use '#mainSection' in CSS or JavaScript to refer to this element.
  • Above example uses CSS Styling to '#mainSection'

2. 'class' - Assigns a class for styling

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.highlight {
background-color: yellow;
padding : 0px 20px;
}

</style>
</head>
<body>

<p>This paragraph contains <span class="highlight">Important Message</span>
<p>This is another paragraph which contains <span class="highlight">Important Message</span>

</body>
</html>

output 📌

This paragraph contains Important Message

This is another paragraph which contains Important Message

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The class 'highlight' can apply common styles to many elements.

3. 'style' - Adds inline CSS styles

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<div style="background-color: lightblue; padding: 10px;">Styled Div</div>

</body>
</html>

output 📌

Styled Div
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Applies a light blue background and padding of 10px directly to the div.

4. 'title' - Adds a tooltip

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<span title="More info">Hover here</span>

</body>
</html>

output 📌

Hover here
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

When hovered, a tooltip with "More info" appears.

5. 'hidden' - Hides the element from view

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<div>This content is not hidden</div>
<div hidden>This content is hidden</div>

</body>
</html>

output 📌

This content is not hidden
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This content will not be visible in the browser.

CSS Styling Examples

Styled div

Code : 6 📝

<!DOCTYPE html>
<html>
<body>

<div style="width: 80%; padding: 20px; margin: 10px auto; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 8px;">
This is a styled div container.
</div>

</body>
</html>

output 📌

This is a styled div container.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Styled span

Code : 7 📝

<!DOCTYPE html>
<html>
<body>

This is a <span style="color: red; font-size: 18px;"> styled span text.</span>

</body>
</html>

output 📌

This is a styled span text.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Conclusion

The HTML 'div' and 'span' tags are powerful tools to group and style content. 'div' structures the layout as a block container, while 'span' works inside text as an inline container. Understanding when and how to use them with attributes and CSS will improve both your webpage's design and structure.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is the difference between div and span?

'div' is a block-level element used to group block content, while 'span' is an inline element used for styling inline text.

Can I nest a span inside a div?

Yes, you can nest 'span' inside a 'div' as they serve different purposes.

How do I style div and span?

You can use the 'style' attribute for inline CSS or use external stylesheets with 'id' or 'class'.

Can div or span be self-closing?

No, both require a closing tag.

Why use div instead of other tags?

'div' is a generic container used when no other semantic element fits.

Previous Post Next Post