Chapter-4(HTML5)

Description

This is my HTML5 notes, Hope you like it

Shared by: ashish2expert
-
Stats
views:
18
posted:
1/7/2012
language:
pages:
13
Document Sample
scope of work template
							4. SECTIONING CONTENTS – that defines the scope of headings and footers.
       4.1. The body element

The <body> element represents the main content of the HTML document. There is only one
<body> element in a document.

Attributes support:

onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange,
onload, onmessage, onoffline, ononline, onredo, onresize, onstorage, onundo, onunload,

Example:

This page updates an indicator to show whether or not the user is online:

<! DOCTYPE html>

<html>

<head>

<title>Online or Offline</title>

<script>

    function update(online) {
               document.getElementById('status').textContent =
                 online ? 'Online' : 'Offline';
           }
    </script>
</head>

<body ononline=”update(true)”

       onoffline=”update(false)”

       onload=”update(navigator.online)”>

<p>You are: <span id=”status”> (Unknown) </span></p>

</body>

</html>



       4.2. The section element
A <section> element represents a generic section of a document or application, i.e., a
thematic grouping of content, typically with a heading. It means use of <section> element is
typically based on headings.

The advantage of using is that each section can have separate HTML heading. This can give
search engine a better understanding of how the web page is segmented and structured.

This element has no attribute other than global attribute common to all elements.

NOTE:-

     •    The <section> element is not for styling purpose. For styling use <div> element.

     •    Most of the time <section> element is only use when describing heading for content.

     •    Use of <article> element instead of <section> when it would make sense to
          separately syndicate the content.

Example:

<section>

<h1>Heading</h1>

<p> Bunch of awesome content</p>

<p>There is lot more difference between section and article element</p>

</section>

A List of DON’Ts…
•        DON’T use section to divide content from the header and footer; use div instead (seethe doctor)
•        DON’T use section to wrap a tab switcher for DOM manipulation or styling
•        DON’T use section for sidebar or other tangentially-related content boxes; use asideinstead
•        DON’T use section just to add a border or drop shadow around something; use divinstead
•        DON’T use section for the wrapper when implementing faux columns; again, use divinstead
•        DON’T use section to nest elements when trying to avoid IE6′s float double-margin bug(or a similar layout-related issue); again,
use div
•        DON’T use section to hold an individual author bio on a blog post or news article; useaside instead




          4.3. The nav element

The <nav> element represents a section of a page that links to other pages or to parts within
the page: a section with navigation links.

This new element can give search engine indexing algorithms clues to the information
architecture of your website.
It doesn’t take part in the outline algorithm

This element has no attribute other than global.

NOTE:

   •    This element is primarily intended for sections that consist of major navigation
        blocks. In particular it is common for footers to have a short list of links to various
        pages of a site, such as terms of services, home page and copyright page. But the
        <footer> element alone is sufficient for such cases.

   •    A document may have several <nav> elements, for e.g. one for site navigation and
        one for intra-page navigation.

   •    User agents such as screen readers that are targeted at users who can benefit from
        navigation information being omitted in the initial rendering, can use this element as
        a way to determine what content on the page to initially skip or provide on request.

Examples:

In the following example the page has several links but only one of those places is considered
a navigation section.

<body>

<header>

<h1>heading</h1>

<p><a href=”basic.htm”>basic</a>

<a href=”myself.htm”>myself</a>

<a href=”form.htm”>form</a>

</p>

<nav>

<h1>navigation</h1>

<ul>

<li><a href=”articles.html”>Index of all articles</a></li>

<li><a href=”today.html”>Things sheeple need to wake up today.</a>

<li><a href=”success.html”>Practice makes a man success</a>

</ul>
</nav>

</header>

<div>

 <article>

 <header>

  <h1>My Day at the Beach</h1>

 </header>

 <div>

  <p>Today I went to the beach and had a lot of fun.</p>

  ...more content...

 </div>

 <footer>

  <p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>

 </footer>

 </article>

 ...more blog posts...

</div>

<footer>

 <p>Copyright © 2006 The Example Company</p>

 <p><a href="about.html">About</a> -

  <a href="policy.html">Privacy Policy</a> -

  <a href="contact.html">Contact Us</a></p>

</footer>

</body>

It doesn’t necessary that <nav> element contains only list elements, it contains other kinds of
content as well

<nav>
<h1>navigation</h1>

<p> You are on my home page. To the north lies <a href=”/blog”>my blog</a></p>

<p>To the south lies a dark and dank <a href=”/about”>contact page</a>. Cobwebs cover its
disused entrance</p>

</nav>



        4.4. The article element

This element represents a self-contained composition in a document, page, application, or
site, which is intended to be independently distributable or reusable, e.g., in syndication. This
could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted
comment, an interactive widget or gadget, or any other independent item of content.

In addition to this, an <article> element typically has a heading (often in header content) and
sometimes a footer.

The most important affect for using this element is the SEO. It allows you to indicate the main
content of the web page so that search engines can directly focus on content inside the
<article> element.

NOTE:

   •    When <article> elements are nested, the inner ones represent articles related to the
        outer one.

   •    The publication date and time of an <article> element can be described using the
        pubdate attribute of the <time> element

   •    Author information of an <article> element can be provided through the <address>
        element, but it doesn’t apply to nested <article> elements.

   •    The only difference between <article> and <section> element is that article uses for
        long paragraph which section for short with an appropriate heading

Examples:

This example shows a blog post using the <article> element but there is some other content
which would be suitable in a <footer> element.

<article>

<header>

<h1>The very first rule of life</h1>
<p><time pubdate datetime=”2009-10-09T14:28-08:00”></time></p>

</header>

<p>If there’s microphone anywhere near you, assumes it’s hot and sending whatever you are
saying to the world. Seriously</p>

<p>…….</p>

<footer>

<a href=”?comments=1”>show comments…</a>

</footer>

</article>

This example shows that we can embed <section> element into <article> element. Also this
uses <article> element nested into other <article> element.

<article>

<h1>Heading</h1>

<p> This apple is ridiculous. It better to eat grapes…………… </p>

<section>

<h2>Red Delicious</h2>

<p>These red bright apples are most found in supermarket</p>

<article>

<h3>Heading</h3>

<p>The most easy to eat fruit is grapes…..</p>

</article>

</section>

</article>

The other thing we see from this example is that we can also nest <article> element into
<section> element.

http://html5doctor.com/the-article-element/

{see the article on difference b/w section and article}
        4.5. The aside element

This element represents a section of a page that consists of content that is tangentially
related to the content around it, which could be considered separate from that content. Such
sections are often referred as sidebars or as inserts, they often contain side explanation like a
glossary information, blogroll, profile information etc.

It doesn’t take part in the outline algorithm (we can see outlining of a document by
outlining software)

Example:

This example shows the two uses of <aside> element.

<body>

<header>

<h1>My Blog</h1>

</header>

<article>

<h1>Blog post</h1>

<p>Very beautiful blog in the world.</p>

<aside>

<!—Since this aside is contained within an article , a parser should understand that the
content of this aside is directly related to article itself. -->

<h1>Glossary</h1>

<dl>

<dt>Lorem</dt>

<dd>it is most beautiful</dd>

</dl>

</aside>

</article>

<aside>

<!—This aside is outside of the article. It’s content related to the page, but not related to the
above article.-->
<h2>Blogroll</h2>

<li><a href=”#”>My friend</a></li>

<li><a href=”#”>he is a boy</a></li>

<li><a href=”#”>your friend</a></li>

</ul>

</aside>

</body>



        4.6. The h1, h2, h3, h4, h5, h6 element

These elements represent headings for their sections ranging from high to low.

        4.7. The hgroup element (likely to be considered for removal)

The <hgroup> element represents the heading of a section. This element is used to group a
set of h1-h6 element when the heading has multiple levels only, such as subheadings,
alternative title or taglines (not use with single heading instead use only <header> element)

Example:

<hgroup>

<h1>Heading One</h1>

<h2>Heading two</h2>

</hgroup>

The point of using <hgroup> in this example is to mask the <h2> element. (which acts as a
secondary title) from the outline algorithm.



        4.8. The header element

The <header> element represents a group of introductory or navigational aids. It may also
contain some heading elements but also other elements like a logo, wrapped section’s
header, and search form and so on. There is no restriction for using more than one <header>
element in the document.

It is not a sectioning content and therefore doesn’t include a new section in the outline
means doesn’t take part in the outline algorithm.
Example:

<body>

<header><h1>Little green guys with guns</h1>

<nav>

<ul>

<li><a href=”/games”>games</a>

<li><a href=”/forum”>forum</a>

<li><a href=”/download”>download</a>

</ul>

<h2>Important news</h2> <!-- this starts a second subsection -->

<p>To play this game you need to update your client</p>

<h2>games</h2> <!—this starts a third subsection-->

</header>

<p>You play here</p>

<h3>this is still part of the subsection</h3>

As I discussed above that <header> element is not create any new section so in the above
example after the end tag of <header> element, all the content is related to the content
which is in b/w the tags of header.



        4.9. The footer element

The HTML Footer Element (<footer>) represents a footer for its nearest sectioning content
or sectioning root element (i.e. its nearest parent
<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <t
d>). Footer typically contains information about the author of the section, copyright data or
links to related document.

NOTE:-

    • Contact information for the author or editor of a section belongs in an <address>
         element which is possibly inside a <footer> element.

    • The <footer> is not sectioning content and therefore doesn’t introduce a new section
         in the outline.
Example:

Here is a page with two footers, one at the top and one at the bottom with the same content.

<body>

<footer><a href="../">Back to index...</a></footer>

<hgroup>

 <h1>Lorem ipsum</h1>

 <h2>The ipsum of all lorems</h2>

</hgroup>

<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>

<footer><a href="../">Back to index...</a></footer>

</body>



      4.10.    The address element

This element represents the contact information for its nearest <article> or <body> element
ancestor. This element must include only contact information and not include any arbitrary
address (e.g. postal address)

Example:

In the following example the footer contains contact information and copyright information

<footer>

<address>

For more details, contact

<a href=”mailto:js@example.com”>Ashish Rawat</a>
</address>

<p><small> copyright example corp.</small></p>

</footer>

Also notice the mailto value.



      4.11. Headings and Sections

The first element of heading content in an element of sectioning content represents the
heading for that section. Subsequent headings of equal or higher rank start new sections,
headings of lower rank implied subsections that are a part of previous one.

Example:

Authors are also encouraged to explicitly wrap sections in elements of sectioning content,
instead of relying on the implicit sections generated by having multiple headings in one
element of sectioning content.

For example, the following is correct:

<body>

<h4>apples</h4>

<p>Apples are fruit</p>

<section>

<h2>Taste</h2>

<p>They taste lovely</p>

<h6>Sweet</h6>

<p> Red apples are sweeter than green ones</p>

<h1>Color</h1>

<p>Apples comes in various colors</p>

</section>

</body>

However the same document will be more clearly expressed as:

<body>
<h1>apples</h1>

<p>apples are fruit</p>

<section>

<h2>tasty</h2>

<p>They taste lovely</p>

<section>

<h3>Sweet</h3>

<p>Red apples are sweeter than green ones</p>

</section>

</section>

<section>

<h2>Color</h2>

<p>Apples comes in various colors</p>

</section>

</body>

The third example is also semantically identical and might be easier to maintain.

<body>

<h1>Apples</h1>

<p>Apples are fruit</p>

<section>

<h1>Taste</h1>

<p>They taste lovely</p>

<section>

<h1>sweet</h1>

<p>Red apples are sweeter than green ones</p>

</section>

</section>
<section>

<h1>Color</h1>

<p>Apples comes in various colors</p>

</section>

</body>



      4.12. Sections and Outline of and HTML5 element.

See the whole article at https://developer.mozilla.org

or click here

						
Related docs
Other docs by ashish2expert
Chapter-6(HTML5)
Views: 27  |  Downloads: 0
Chapter-9(HTML5)
Views: 24  |  Downloads: 0
Chapter-5(HTML5)
Views: 32  |  Downloads: 0
MY HTML5 NOTES
Views: 35  |  Downloads: 0
Chapter-2(HTML5)
Views: 22  |  Downloads: 0
Chapter-3(HTML5)
Views: 47  |  Downloads: 0
Chapter-11(HTML5)
Views: 20  |  Downloads: 0
Chapter-10(HTML5)
Views: 44  |  Downloads: 0
Chapter-7(HTML5)
Views: 26  |  Downloads: 0
Chapter-4(HTML5)
Views: 25  |  Downloads: 0