Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element
The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.
The HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
HTML Layout
Web page layout is very important to make your website look good.Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
HTML Layouts - Using <div> Elements
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#0000FF;height:200px;width:100px;float:left;">
<b>Menu</b><br>
JAVA<br>
HTML<br>
Android</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#00FFFF;clear:both;text-align:center;">
Copyright © futureX</div>
</div>
</body>
</html>
