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>
As mentioned above the formatting of div and span Elements can be done with CSS. There are the following options to do this:
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.