Lesson 6A - Div and Span

Text displayed on a web page can be categorized into Inline and Block elements. There are certain commands that work on Inline text, certain commands that work on block text and certain commands that work on both.

Inline text, as the name implies, is that which formats one word, or even one letter at a time. Block text formats elements of text (words, sentences, paragraphs), usually by inserting something before or after the element, or by positioning the element.

<b></b>, <i></i> and <u></u> are examples of Inline text formatting. The words surrounded by the tags are formatted. Nothing happens to the words before or after, and the affected words are not repositioned out of the line. <p></p>, <center></center> and <H1></H1>, on the other hand, add a line break before and after the affected text, thus moving the text, and are considered to be Block formatting.

The Division tag is the generic Block element; the Span tag is the generic inline element. If you want to group several words or sentences or paragraphs together to format them, use these tags. If you are grouping block elements, or if you want to make the group a block element, use <div> tags Try it. If you want to group inline elements, use <span> tags Try it. You can make an inline element into a block element by enclosing it in a <div> tag, but you cannot make a block element into an inline element just by using <span> tags. Both of these tags will prove more useful when we study Style starting with Lesson 8.

<div></div> tags group text into Block elements.
<span></span> tags group text into Inline elements.

In this lesson, we learned about these HTML tags:
<div> and </div> and
<span> and </span>

Lesson 5 Lists   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 6B View Source

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,972 different visits in the last 30 days.
435,447 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson06A.php
This page was last modified on our server on 25 Sep 2013
and last refreshed on our server at 12:28 pm, MST
This file took 0.0195 seconds to process.