본문으로 건너뛰기

<div> and <span> Tags

<div> and <span> Tags

The div and span tags wrap HTML elements to structure web pages.


div (division)

  • Purpose: Used to separate or group different sections of a web page.
  • Characteristic: It is a block-level element. That means a div typically takes up the full width available, starting on a new line.
  • Example:
    Example of div element
    <div>
    <p>This is a sentence inside a div element.</p>
    </div>

span

  • Purpose: Used to target a section within text or inline elements for styling or applying specific effects.
  • Characteristic: It is an inline-level element. That is, it appears in the flow of text without starting on a new line, occupying only the space necessary.
  • Example:
    Example of span element
    <p>This is a sentence with a <span>span element</span> inside it.</p>

Note: div and span have no visual style or functionality on their own. They are useful when combined with CSS (for styling) or JavaScript (for actions) to style or apply behavior to specific sections.

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

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

Follow the parts emphasized with asterisks in the code to try it out.