The <div> element is a block-level element that is a container that can be used to combine other HTML elements.
Instance: an area in the document will appear in blue;
<!DOCTYPE HTML><HTML><Body><P>This is some text.</P><Divstyle= "COLOR: #0000FF"> <H3>This was a heading in a DIV element</H3> <P>This is some the text in a DIV element.</P></Div><P>This is some text.</P></Body></HTML>
:
The <span> element is an inline element (used to group elements within a document) and can be used as a container for text;
Example: Use the <span> element to color a portion of the text;
<!DOCTYPE HTML><HTML><Body><P>My mother has<spanstyle= "Color:blue;font-weight:bold">Blue</span>Eyes and my father has<spanstyle= "Color:darkolivegreen;font-weight:bold">Dark green</span>Eyes.</P></Body></HTML>
Effect:
Layout
How to add a layout using the <div> element:
<!DOCTYPE HTML><HTML><Body><DivID= "Container"style= "width:500px"><DivID= "header"style= "Background-color: #FFA500;"><H1style= "margin-bottom:0;">Main Title of Web Page</H1></Div><DivID= "Menu"style= "Background-color: #FFD700; height:200px;width:100px;float (floating): left;"><b>Menu</b><BR>HTML<BR>CSS<BR>JavaScript</Div><DivID= "Content"style= "Background-color: #EEEEEE; height:200px;width:400px;float (floating): left;">Content goes here</Div><DivID= "Footer"style= "Background-color: #FFA500; clear:both;text-align (text alignment): center;">copyright©w3cschool.cc</Div></Div> </Body></HTML>
Effect:
How to add a layout using the <table> element:
<!DOCTYPE HTML><HTML><Body><Tablewidth= "$"Border= "0"><TR><TDcolspan= "2"style= "Background-color: #FFA500;"><H1>Main Title of Web Page</H1></TD></TR><TR><TDstyle= "Background-color: #FFD700; width:100px;"><b>Menu</b><BR>HTML<BR>CSS<BR>JavaScript</TD><TDstyle= "Background-color: #eeeeee; height:200px;width:400px;">Content goes here</TD></TR><TR><TDcolspan= "2"style= "Background-color: #FFA500; text-align:center;">copyright©w3cschool.cc</TD></TR></Table></Body></HTML>
Effect:
HTML <div> and <span> and layout