How to Use DIV and Span in HTML and CSS

Last Updated: October 21, 2021

This article will help you to understand and use the "div" and "span" in HTML and style them with CSS. The main purpose of using "div" is to divide the body into smaller divisions, while "span" is used to select a part of line.

Part 1

Part 1 of 2:

Using div

HTML markup

1
Open Notepad and type down the basic HTML structure. It basically contains body inside HTML.
2
Put the <div> tag inside the body tags. You must remember that div is a container tag so it must have a </div> after it, like <div> </div>
- <div> is used to make divisions on the page, so you can even use div tags inside a <div>.

CSS markup

1
In the <style>, give the <div> an ID and set its height, width, background-color, etc.
- You can use # for making an ID for your <div> or just simply write div and set its height, width, etc. But when you have many divs, its better to use an ID.

Part 2

Part 2 of 2:

Using span

HTML markup

1
Put the <span> tag and write some text and then close it with </span>. The span tag is generally used to select a part of line and apply some properties to it. However you can use it for selecting more than a single line.

CSS markup

1
Give you span an ID and set its properties. You can have multiple spans in a line.
2
Don't forget to enjoy! Coding is poetry, match the rhymes and have a long journey!

Community Q&A

Question

How do I get my web pages to auto-fit all web browsers?

Baishakhee Mahali

Community Answer

To apply fit to width to the web page you are viewing, go to the right of the status bar and click the arrow next to the zoom slider. Select “Fit to Width” and the page will be adjusted accordingly. To return to normal display mode and turn off fit to width, select this option again.