Comparison of div and span in HTML_PowerNode Java Academy

1. <div></div> and <span></span>

1. <div></div> tag

The <div></div> tags can define divisions or sections in a document, thereby dividing the document into independent and different parts. The <div></div> tag can be used as a strict organizational tool without any formatting associated with it, which embodies the idea of ​​separating HTML markup from presentation styles. In actual work, we usually specify id or class attributes for the <div></div> tag to make the tag more effective. <div></div> is a block-level element, which means its content automatically starts on a new line. And in fact line breaks are the only formatting behavior inherent in a <div>.

The following HTML simulates the structure of a news website. Each pair of <div></div> tags groups the title and summary of each news item together. In other words, <div></div> adds additional structure to the document. At the same time, since these <div></div> belong to the same type of elements, you can use the class="news" attribute to identify these <div></div> tags. This not only adds appropriate semantics to <div></div>, but also makes it easier to further format <div></div> using styles.

     <div class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </div>
     <div class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </div>

2. <span></span> tag

The <span> tag is used to group inline elements in a document.

  <span style="color: Red">Note:</span>

2. Block-level elements and inline elements

Block elements and inline elements are concepts in CSS. Elements like <div></div> and <h1></h1> are often called block elements. This is because these elements are displayed as one block of content, a "block box". In contrast, elements such as <span></span> and <strong></strong> are called "inline elements" because their content is displayed in a single line, or "inline box".

The concepts of block-level elements and inline elements are not fixed, but relative. We can change the type of box generated using the element's display property. This means that by setting the display property to block, you can make an inline element (such as an <a> element) behave like a block-level element; you can also make the resulting element an inline element by setting display to inline; you can even set the display property to none so that the element has no box at all. In this case, the box and all its contents are no longer displayed and do not take up space in the document.

     <div id="dv1" style="display: block">
         I am a block level element.
     </div>
     <div id="dv2" style="display: inline">
         I am an inline element.
     </div>
     <div id="div3" style="display: none">
         I am invisible</div>

3. Comparison between <div></div> and <span></span>

1. Similarities: The <div></div> tag and the <span></span> tag are both used to divide sections but have no actual semantics; both are mainly used to apply style sheets.

2. Differences: The <div></div> tag is a block-level element, and the browser will automatically add a line break tag before and after it; the <span></span> tag is an inline element, and no line break tags will be automatically added before and after it.

If you want to display two contents in the same line in the web page layout, the easiest way is to wrap them with <span></span> tags. For example, a page has two adjacent elements, one is <div></div> and the other is <span></span>. To display them on the same line, you can change this <div></div> to <span></span>. Of course, this can also be achieved by setting the display attribute of tags such as <div></div> to inline through CSS.