HTML/Training/Sections

From W3C Wiki
< HTML‎ | Training
Jump to: navigation, search

Sections

Header

Header is specified by <header>. The header element usually contain Web page's/section's headers:

  • logo
  • navigations
  • heading(ex. h1-h6 elements)
  • search form

... etc

<header>
  <h1><img src="logo.png" alt="W3C"></h1>
</header>

See also The header element.


Footer

Footer is specified by <footer>. A footer typically contains information about its section:

  • author
  • links to related documents
  • copyright data

... etc

<footer>
  <p>Copyright © 2011 W3C</p>
</footer>

See also The footer element.


Navigations

Navigations are specified by <nav>.

<nav>
  <ul>
    <li>navigation 1</li>
    <li>navigation 2</li>
    <li>navigation 3</li>
  </ul>
</nav>

See also The nav element.


Article

Article is specified by <article>. The article element represents a independent item section of content:

  • news topic
  • forum post
  • newspaper article
  • blog entry
  • user-submitted comment

... etc

<article>
  <h2>W3C Introduces an HTML5 Logo</h2>
  <p>W3C unveiled today an HTML5 logo, a striking visual identity for the open web platform.
     W3C encourages early adopters to use HTML5 and to provide feedback to
     the W3C HTML Working Group as part of the standardization process.
     Now there are logos for those who have taken up parts of HTML5 into their sites,
     and for anyone who wishes to tell the world they are using or referring to HTML5, CSS, SVG, WOFF,
     and other technologies used to build modern Web applications. </p>
</article>

See also The article element.

Aside

Aside is specified by <aside>. The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content:

  • pull quotes
  • sidebars
  • advertising
  • groups of nav elements

... etc

<aside>
  <h2>related contents</h2>
  <ul>
    <li><a href="contents1.html">contents 1</a></li>
    <li><a href="contents2.html">contents 2</a></li>
    <li><a href="contents3.html">contents 3</a></li>
  </ul>
</aside>

See also The aside element.

Challenge

1. Sets the header section.

[index.html]

<header>
  <h1><img src="images/logo.png" alt="W3C cafe" width="249" height="107"></h1>
</header>


2. Sets the navigation section.

[index.html]

<nav>
<ul>
  <li><a href="menu.html">menu</a></li>
  <li><a href="location.html">location</a></li>
  <li><a href="about.html">about us</a></li>
  <li><a href="recruit.html">recruit</a></li>
</ul>
</nav>


3. Sets the article section.

In the following example, two article elements are nested. Because "new branch" and "new menu" are independent item of content.

[index.html]

<article>
  <article>
    <header>
      <h2>new branch</h2>
      <p>26 January 2011</p>
    </header>
    <p>text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text </p>
  </article>
  <article>
    <header>
      <h2>new menu</h2>
      <p>26 January 2011</p>
    </header>
    <p>text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text </p>
  </article>
</article>


4. Sets the footer section.

[index.html]

<footer>
  <p>Copyright © 2011 W3C cafe</p>
</footer>

Sections chall01.png


See also Sections.


In the next content, you will learn importing the style sheet. "Style sheet"