Docstoc

Chapter-5(HTML5)

Document Sample
Chapter-5(HTML5) Powered By Docstoc
					5. GROUPING CONTENT
       5.1.   The p element

The <p> element represents a paragraph.

Example:

The <p> element should not be used when a more specific element is more appropriate.

The following example is technically correct.

<section>

<! -- ……-->

<p>Last modified: 12-10-2001</p>

<p>Author: fred@example.com </p>

</section>

However it would be better marked up as:

<section>

<!--……-->

<footer>

<p>Last modified: 12-10-2001</p>

<address>Author: fred@example.com</address>

</footer>

</section>



       5.2. The hr element

The <hr> element represents a paragraph level thematic break, e.g. a scene change in the
story or a transition to another topic within a section of a reference book. In previous
versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule
in visual browsers, but is now defined in semantic terms, rather than presentational terms.

It doesn’t affect the document outline.

It is better to use images and decorate by using CSS. In the future it will be obsolete.

Example:
<section>

<h1>Communication</h1>

<p>There are various methods of communication such as mobile phone, computer, radio

and many more</p>

<hr>

<p>Communication stones seem to come in pair and have mysterious properties</p>

</section>

Output:




There is no need for <hr> element between the sections themselves, since the <section>
element and <h1> element imply thematic change themselves. This is followed by the given
example:

<section>

<h1>Communication</h1>

<p>There are various methods of communication such as mobile phone, computer, radio

and many more</p>

<p>Communication stones seem to come in pair and have mysterious properties</p>

</section>

Output:
       5.3. The pre element



This element represents preformatted text. Text within this element is typically displayed in a
non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are
displayed as typed.

Example:

The following example represents a block of computer code in which <pre> element are used
with <code> element.

<p>This is the <code>Panel</code> constructor:</p>

<pre><code>function Panel(element, canClose, closeHandler) {

 this.element = element;

 this.canClose = canClose;

 this.closeHandler = function () { if (closeHandler) closeHandler() };

}</code></pre>

Output:




       5.4. The blockquote element

The blockquote represent a section that is quoted from another source. Content inside the
<blockquote> must be quoted from another source, whose address, if it has one, may be
cited in cite attribute.

One does not have to use <p> element inside <blockquote>.

Example:

This example shows the use of cite with <blockquote>

<blockquote cite=”http://www.example.com/s/index”>

One should never assume that his side of
the issue will be recognized, let alone that it will

be conceded to have merits.

</blockquote>



        5.5. The ol element

The <ol> element represents an ordered list of items. Typically ordered list item are displayed
with a preceding number which can be of any form like numerals, letters or roman numbers.

Attributes support:

reversed:- This attribute specifies that the items of item are specified in the reverse order. i.e.
the least important element are listed first. Browser by default, numbered the item in reverse
order too.

start:- This attribute suggest that from which number the list be order. For e.g. <ol start=”3”>

Example:

<ol start=”7”>

<li>first item</li>

<li>second item</li>

<li>third item</li>

</ol>

Output:




This example shows the nesting lists

<ol>

<li>first item</li>

<li>second item       {look the closing </li> tag is not placed here}

<ol>

<li>second item one</li>
<li>second item two</li>

<li>second item three</li>

</ol>

</li>            {here is the closing tag}

<li>third item</li>

</ol>

Output:




        5.6. The li element

The <li> element represents a list item that can be placed in the <ol>, <ul> or <menu>
elements.

Attributes support:

value:- This attribute indicates the current ordinal value. This attribute only numbers, letters
or roman numerals. This has no meaning for <ul> or <menu> elements.

Example:

<ol>

<li value=”3”>First item</li>

<li value=”8”>second item</li>

<li value=”6”>third item</li>

</ol>

Output:
        5.7. The ul element

It represents unordered list item, namely a collection of items which do not have a numerical
ordering and their order in the list is meaningless. It can be circle, dot, square or a bullet
image.

Example:

The following example shows the nesting of <ul> into <ol> (reverse is also possible)

<ol>

<li>First item</li>

<li>Second item

<ul>

<li>second item number one</li>

<li>second item number two</li>

</ul>

</li>

<li>Third item</li>

</ul>

Output:




        5.8. The dl, dt and dd element

(dl:- defining list, dt:- defining term, dd:-defining description)

These three elements together used for encloses a list of terms with their one or more
definition. A common use for these elements is to implement a glossary.

NOTE:-
    • The element <dt> are the child of <dl> and the element <dd> are child of <dt> first
        followed by <dl>.

    • Do not use these elements (not <ul> element), to merely create indention on a page.
        Although it works, but this is bad practice and obscure the meaning of definition
        lists. To change the indention, use CSS margin property.

Example:

<dl>

<dt>spam</dt>

<dd>unsolicited email sent in the hope of increasing sales of some product, or simply for the
purpose of annoying people.</dd>

<dt>spammer</dt>

<dd>someone who sends out spam email and therefore deserves to develop a nasty incurable
disease of some kind.</dd>

<dt>spam filter</dt>

<dd>a tool used in email to filter out spam and placing them in junk folder.</dd>

</dl>

Output:




        5.9. The figure and figcaption element

The HTML Figure Element (<figure>) represents self-contained content, frequently with a
caption. While it is related to the main flow, its position is independent of the main flow.
Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is
referenced in the main text, but that can be moved to another page or to an appendix
without affecting the main flow.

The <figcaption> element represent caption for that figure.

Example:
In this example, we see that the figure has three images in it.

<figure>

<img src=”castle1423.jpg” title=”Etching anonymous” alt=”the castle has one tower, and a
tall wall around it”>

<img src=”castle1893.jpg” alt=”The castle has two tower”>

<img src=”castle1932.jpg” alt=”the castle has three tower”>

<figcaption>The castle through the ages: 1423, 1893 and 1932</figcaption>

<figure>

Here a part of poem is marked up using figure.

<figure>

<p>'Twas brillig, and the slithy toves<br>

Did gyre and gimble in the wabe;<br>

All mimsy were the borogoves,<br>

And the mome raths outgrabe.</p>

<figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>

</figure>



       5.10. The div element

This element has no special meaning at all. It can be used with the class, id or lang attribute
to group elements for styling purposes.

NOTE:- Authors are encouraged to use this element, where no other elements are suitable
(will be the last resort). Use of the <div> element instead of more appropriate elements
leads to poor accessibility for readers and poor maintainability for authors.

Example:

If you want to style a particular block of content, like the intro to an article, <div> is perfectly
suitable element.

<article>

<h1>Big Announcement</h1>

<div class=”intro”>
<p>We here, sit at to improve HTML5 and encourage people to use more and more HTML5
element. Although it is still in working draft in W3C, most of the web browser already
implemented much of the elements. So it is better to use HTML5 today.</p>
   <p>I know HTML5 is very big as compared to HTML4, but the future of web depends on this
language</p>
  </div>
  <p>Maecenas auctor lacus eget mauris tincidunt consectetur. Donec molestie malesuada
ligula, sed feugiat massa consequat sit amet. Pellentesque orci metus, ultricies sit amet
adipiscing eget, gravida fringilla dui. Vestibulum accumsan dui diam, eget venenatis urna. Sed
eu lobortis justo. Aliquam erat volutpat. Aliquam erat volutpat.</p>
</article>



Inserting Special Character:

Below are the some common special character codes. You can use either entity name or
entity number anywhere in the html5 document.

				
DOCUMENT INFO
Shared By:
Stats:
views:23
posted:1/8/2012
language:English
pages:9
Description: This is my HTML5 notes, Hope you like it