DIV HTML tags are very useful for use with Cascading Style Sheets. Many beginners use the two elements in a similar fashion, but they serve different purposes. Learn how to use these two elements effectively in your web pages.
DIV element defines logical divisions on your web page. It acts a lot like a
P element, by placing newlines or carriage returns before and after the division. A division can have multiple paragraphs in it.
To use the
DIV element, surround the area of your page that you want as a separate division with the
<p>contents of div</p>
If the area is unique on the page, you can add an
<div id="myDiv"> or if there are many similar areas onthe page, you can add a
DIV element allows you to define the style of entire sections of the HTML. You can define a division of your page as a callout and give that area a different style from the surrounding text. That area may have images, paragraphs, headlines, anything you wanted. The
DIV element also gives you the ability to identify unique areas of your documents.
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 what that content’s purpose is and why you need the
- If you need the element simply to add styles to that area of the page, you should use the
- If that area of the page has a specific semantic meaning or the contents can stand on its own like an article or or blog post, then you should use the
One thing to keep in mind when using the
DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a
DIV you can’t have a
DIV inside a paragraph.
The most important attributes of the
DIV element are:
Even if you don’t use style sheets or DHTML, you should get into the habit of using the
DIV element. This will give you more flexibility and future proof your HTML.
CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using
<div style="text-align: center;"> to center the text inside your
DIV elements instead.
Learn More About the
SPAN element has very similar properties to the
DIV element, in that it, along with CSS, can change the style of the text it encloses. But without any style attributes, the
SPAN element doesn’t change the enclosed text at all.
The main difference between the
DIV elements is that
SPAN doesn’t do any formatting of it’s own. As mentioned above, the
DIV element includes a paragraph break. The
SPAN element simply tells the browser to apply the style rules to whatever is within the
To use the
SPAN element, simply surround the text that you want to add styles to with the
<p><span>Highlighted text</span> and non-highlighted text.</p>
Then add the
class="highlight" or other class to the
SPAN element to style the text with CSS. e.g.
SPAN element has no required attributes, but the three that are the most useful are the same as for the
SPAN when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (
H3) that you wanted the second word to be red, you could surround that word with
<span style="color: #f00;">2ndWord</span> and it would still be a part of the
H3 tag, just red. For example:
<h3>This is My <span style="color: red;">Awesome</span> Headline</h3>
Learn More About the