CLOSE

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>
Expand

Division elements are considered block elements.

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

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.
Expand

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>
Expand

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

Share This Tutorial

Link To This Tutorial

Tutorial URL
https://stepbystephtml.com/tutorial/16/html-advanced-tutorial

HTML Link

Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Amount

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.

HTML Link

Copyright 2019 Step By Step HTML. All Rights reserved.