HTML Educational Materials
- Week 4
  - Sections
    - Sections
  - Style and Script
    - Style Sheet
    - Script

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>

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>

Navigations

Navigations are specified by <nav>.

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

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>

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>

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>