Css html elements,Using Span and Div HTML Elements with CSS in Web Design

Divs and spans are not interchangeable in web page building. Each serves different purposes, and knowing when to use each will help you develop clean, easy-to-manage websites.

Using the Div Element

Divs define logical divisions on your web page. A div—short for division—is basically a box in which you can place other HTML elements that belong together. A division can have multiple other elements in it, such as paragraphs, headings, lists, links, images, etc. It can even have other divisions inside of it to provide additional structure and organization.

To use the div element, place an open 

tag before the area of your page that you want as a separate division, and a closing 

 tag after it:

contents of div

If you'll be styling this area with CSS, you can add an ID selector to the opening div tag:

Or, you can add a class selector:

You can then work with these elements in CSS or JavaScript.

Current best practices lean toward using class selectors instead of IDs, in part because of how specific ID selectors are. Either one is acceptable, however, and you can even give a div both an ID and a class selector.

Divs or Sections?

The div element is different from the HTML5 section element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a div or a section, think about the purpose of the element and the content.

If you need the element simply to add styles to that area of the page, you should use the div element.

If the content has a distinct focus and could stand on its own, consider using the section element instead.

Ultimately, both divs and sections behave similarly, and you can give either of them attributes and style them with CSS. Both are block-level elements.

Using Spans

Span is an inline element by default, unlike div and section elements. The span element is typically used to wrap a specific piece of content such as text to give it an additional hook you can use to add styles. Without any style attributes, however, span has no effect on text at all.

Another difference between the span and div elements is that the div element includes a paragraph break, whereas the span element only tells the browser to apply associated CSS style rules to what is enclosed by the  tags:

Highlighted text  and non-highlighted text.

You might add

class="highlight"

or similar to the span element to style the text with CSS.

The span element has no required attributes, but the three that are the most useful are the same as those of the div element:

style

class

ID

Use span when you want to change the style of content without defining that content as a new block-level element in the document.

For example, if you want the second word of an h3 heading to be red, you could surround that word with a span element that would style that word as red text. The word still remains part of the h3 element, but will display in red.