Structure with DIV and SPAN

DIV and SPAN

In the early years of the www the possibilities to structure and layout big websites where very limited. One technique was to split the browser window into multiple parts (frames). Earch of these frames comes from an own html file. The advantege of this approach was, that every page (for example the navigation) only need to exist once and does not have to be repeated on each page.

 

But when server side skripting and programming language get more popular (e.g. php, jsp, ...) it was possible to generated thos part automatically and using frames no longer had a real advantage. Also for search engines it was easier to interpret one page instead of multiple combined frames.



In the early days, where frames where no logger a practical approach and each page was generated from on file, HTML tables have been abused for layouting.


For structuring the div and the span tag are nowadays proposed. These div and span tag could be layouted with Cascading Style Sheets (CSS).

A DIV element is a block element by default (CSS property display: block), which mean that there is a linebreak after each div. It can be used to group larger parts of a website to one logical group. However, a span tag is an inline element, the intension behind is to group smaller part with it, for example inside of a text paragraph.

 

An inline element (e.g. span) is now allowed, to contain a block element (e.g. div). The other way around it's ok.

 

The following example show's a simple website with div and and a list:

<div id="main-menu">
   <ul>
      <li class="menu-item"></li>
   </ul>
</div> 


The HTML tag attributes style, id and class

As mentioned above the formatting of div and span Elements can be done with CSS. There are the following options to do this:

 

  1. Use the style Attribute to embbed this css directly into the tag
  2. Use the id Attribute of the tag to have a unique identifier.
  3. Use tha class Attribute to group elements with similary styling properties and style them with css.

 

Beside structure and styling, images can be used to make websites more intersting for the visitor.

On the next page you will learn, how to embbed images into your website.

 

Navigation