Skip to main content
Practice

div, span Tags

The div and span tags are used in HTML to wrap and structure web pages.


div (division)​

  • Used to separate or group different sections of a web page.
  • It is a block-level element, which means that a div occupies the full width of its container and starts and ends in a new line.
  • Example usage:
    Example of div element
    <div>
      <p>Paragraph inside a div element</p>
    </div>

span​

  • Used to select part of the text or apply styles within inline elements.

  • It is an inline-level element, which means it appears within the text flow without starting a new line and only occupies as much width as necessary.

  • Example usage:

    Example of span element
    <p>This is a sentence with a <span>span element</span>.</p>

Note that div and span do not possess any inherent visual styles or functions. They are often used with CSS (styling) or JavaScript (behaviors) to style or add functionalities to specific sections.

For example, you can use the following CSS to change the text color inside a span element to red:

Applying style to span element
span {
  color: red;
}

Follow the emphasized parts in the code to input it correctly.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.