HTML <span> and <div> tags are used along with CSS (Which will be learned later on).
<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.
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.
<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.
This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.
Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.
Copyright 2019 Step By Step HTML. All Rights reserved.