HTML Span and Div Tags

HTML <span> and <div> tags are used along with CSS (Which will be learned later on).

HTML Div Element

<div> tags or division tags are used to divide sections of the page. They're mainly used for building layouts.

<div>This is a block of content</div>
<div>This is another block of content.</div>

Division elements are considered block elements.

Above <div>This is our div element</div> Below

You will notice with the code above, although everything is on the same line, the content in the division element is on its own line in the browser. The same applies to paragraph and heading elements which, by default, are also block elements.

HTML Span Element

The <span> element is an inline element. This means that unlike the division element, the span will not take it's own line in the document. The span element is used to give meaning to sections of text or code.

This will all be on <span>the same</span> line.

Division and span elements really become useful for layouts when you start applying styles to them with CSS. We'll cover that in later tutorials.

ID's and Class Names

You can give almost any element an ID and / or class name attribute. This will be useful for when we get into CSS and Javascript.

<div id="content-wrap">
    
    <div class="content">
        First content block
    </div>
    
    <div class="content">
        Second Content Block.
    </div>
    
</div>

Note: An ID should only be used on one element while a class name can be used on multiple elements.