HTML elements can be grouped together
with <div> and <span>.
Html-div elements:
For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element. Group together text elements within a <div> tag to slice up HTML documents.
HTML Block Elements:
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>
HTML Inline Elements:
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 <table>
elements for layout is not the correct use of <table>. The purpose of the
<table> element is to display tabular data.
DIV layout:
01.<div id="menu"
align="left" >
02.<a
href="/">HOME</a> |
03.<a href="/">CONTACT</a>
|
04.<a
href="/">ABOUT</a>
05.</div>
06.<div id="content"
align="left" bgcolor="white">
07.<h5>Content
Articles</h5>
08.<p>This paragraph would be
your content paragraph with all of your
readable material.</p>
09.</div>
Display:
HOME | CONTACT | ABOUT
Content Articles
This paragraph would be your content paragraph with all of your
readable material.
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.
01.<div id="menu"
align="left" >
02.<a
href="/">HOME</a> |
03.<a
href="/">CONTACT</a> |
04.<a
href="/">ABOUT</a> |
05.<a
href="/">LINKS</a>
06.</div>
07.<div id="content"
align="left" >
08.<h5>Content Articles</h5>
09.<p>This paragraph would be
your content
10.paragraph with all of your
readable material.</p>
11.<h5 >Content Article
Number Two</h5>
12.<p>Here's another content
article right here.</p>
13.</div>
HOME | CONTACT | ABOUT | LINKS
Content Articles
This paragraph would be your content paragraph with all of your
readable material.
Content Article Number Two
Here's
another content article right here.
When
used together with CSS, the <span> element can be used to set style
attributes to parts of the text.
HTML Grouping Tags:
HTML <div> Tag
Example
A
section in a document that will be displayed in blue:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Definition and Usage
The
<div> tag defines a division or a section in an HTML document.
The
<div> tag is used to group block-elements to format them with CSS.
Tips and Notes
Tip: The <div> element is very often
used together with CSS, to layout a web page.
Note: By default, browsers always place a line
break before and after the <div> element. However, this can be changed
with CSS.
HTML <span> Tag
Example
A
<span> element used to color a part of a text:
<p>My
mother has <span style="color:blue">blue</span>
eyes.</p>
Definition and Usage
The
<span> tag is used to group inline-elements in a document.
The
<span> tag provides no visual change by itself.
The
<span> tag provides a way to add a hook to a part of a text or a part of
a document.
Tips and Notes
Tip: When a text is hooked in a <span>
element, you can style it with CSS, or manipulate it with JavaScript.
HTML Div Element Code:
<div
id="myDiv" name="myDiv" title="Example Div
Element">
<h5>Subtitle</h5>
<p>This paragraph would be your content
paragraph...</p>
<p>Here's another content article right
here.</p>
</div>
With
these text elements now grouped together under a <div> element, we can
alter the appearance of each underlying element collectively by applying astyle attribute to the <div> tag.
HTML Div Element Code:
<div
id="myDiv" name="myDiv" title="Example Div
Element" style="color: #0900C4; font: Helvetica 12pt;border: 1px
solid black;">
<h5>Subtitle</h5>
<p>This paragraph would be your content
paragraph...</p>
<p>Here's another content article right
here.</p>
</div>
HTML Div Element in Action:
Subtitle
This
paragraph would be your content paragraph...
Here's
another content article right here.
|
Elements
housed within a <div> tag acquire any styles or properties applied to the
master div element. Therefore the paragraph and heading elements should now be
rendered blue in a Helvetica font. In addition, we've applied a
border to the <div> element just to help visualize the grouping of
elements together.
Html-div inside of div:
HTML Div Subdivision:
<div
id="myDiv" name="myDiv" title="Example Div
Element" style="font-family: Helvetica; font-size: 12pt; border: 1px
solid black;">
<div id="subDiv1"
name="subDiv1" title="Subdivision Div Element"
style="color: #FF0000; border: 1px dotted black;">
<h5>Section 1</h5>
<p>This paragraph would be your
content paragraph...</p>
<p>Here's another content article
right here.</p>
</div>
<br />
<div id="subDiv2"
name="subDiv2" title="Subdivision Div Element"
style="color: #FF00FF;border: 1px dashed black;">
<h5>Section 2</h5>
<p>This paragraph would be your
content paragraph...</p>
<p>Here's another content article
right here.</p>
</div>
</div>
Divs Inside of Divs:
|
|
|
This
concept is the foundation of which most web pages are now built. HTML documents
that are properly divided and subdivided are easy to maintain and modify.
No comments:
Post a Comment