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. 1
    Open Notepad and type down the basic HTML structure. It basically contains body inside HTML.
  2. 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>.

  3. Advertisement

CSS markup

  1. 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. 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.
  2. Advertisement

CSS markup

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

Community Q&A

  • Question
    How do I get my web pages to auto-fit all web browsers?
    Baishakhee Mahali
    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.
Advertisement

Things You Need

  • Notepad
  • A web browser

About This Article

wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, volunteer authors worked to edit and improve it over time. This article has been viewed 32,142 times.
How helpful is this?
Co-authors: 6
Updated: October 21, 2021
Views: 32,142
Categories: Markup Languages
Advertisement