• 1
  • 2
Home > Tips

What is div? | Overview of the div Tag

 

What is div? | Overview of the div Tag

 

Web designers use div tag nearly every day, but not many actually know what the div tag means and where it should be used. This article aims to de-mystify the div tag, explain when and where it should be used and compare it with the similar span tag.

 The Short Answer to What div is

 

div - tag (or element), abbreviation of division. A generic container for blocks of content, such as images and paragraphs of text can be uniquely identified by an id to hook into a CSS style sheet.

 The Long Answer to What div is

 

div, an abbreviation for division, is an HTML tag (otherwise known as an element). Used to create containers around groups of content on Web pages, it is usually given a unique id to distinguish it from other div elements on the same page.

Example:

  <div id='header'>
  <img src='logo.png' alt='Company logo' />
  <h1>Welcome to Visit SliceMaker.com</h1>
</div>

The above example shows a simple site header, with a logo and introductory heading text. Notice that it is uniquely identified by the id, this is used to format the div using CSS, as shown by the following example.

Example:

 #header {
  width: 790px;
  background-color: #efefef;
}

This will make the header have a width of 790 pixels and with a light grey background color.

Handily, elements inside uniquely named div's can be targeted using CSS. For example we might want to make the header text smaller and indented so it lines up with the text of the logo.

Example: 

 #header h1 {
  text-indent: 10px;
  font-size: 1.4em;}

This only formats h1 tags inside the header area, not any other h1 elements on the same page. To format all of them remove the #header. div tags are the building blocks of a page, they are the foundation everything else rests on. We can expand the example above to create a simple, but complete, page using div's to create the structure.

Example:

 <div id='wrapper'>
  <div id='header'>
    <img src='logo.png' alt='Company logo' />
    <h1>Welcome to Visit SliceMaker.com</h1>
  </div>
  <div id='content'>
    <p> Founded in 2010, SliceMaker has expanded its business rapidly. This company is focused on providing consumers with innovative and comprehensive webpage making software for easier and efficient webpage making. </p>
   
<p> Since the foundation in 2010, the company has delivered its professional and innovative webpage making software to lots of satisfied customers all over the world. With an emphasis on research and development, the company is continuously extending its product family with award-winning software that addresses the needs of users. </p>
  </div>
  <div id='footer'>Footer information</div>
</div>

A div named content has been added, along with a footer, everything is wrapped in a div named wrapper. This makes it easier to add rules that apply to all the sections of the page, e.g. all elements could be constrained to a width by setting the width of just the wrapper.

 What's the Difference Between a span and a div?

 

The span tag is inline, whilst the div is a block level element. What that means for designers is span tags are used within text, whereas div tags are used to contain blocks of other elements like img or p.

Example:

 <p><span class='firstletter l'>L</span> SliceMaker has delivered its professional and innovative webpage making software to lots of satisfied customers all over the world.</p>


This could be used to replace the first letter of a paragraph with a fancy graphic, once again using CSS. Notice that the tag is embedded in the text.

 Looking Ahead to HTML5

 

In HTML5 div elements are declared too generic, the creators aim to replace them with tags like the following:

section;
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.

header;
The header element represents the header of a section.

nav;
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

This is just a small sample of what is to come, don't get too excited just yet though, browsers (most notably the infamous Internet Explorer) will have to support the new elements before they can be used. This will take a number of years, particularly since the specification is still in the draft stages.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0