HTML5日本語訳

次の例は、適合HTML断片である：

<p>The little kitten gently seated himself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat sat on the mat.</p>

<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

次の例は、技術的に正しい：

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

しかし、より望ましいマークアップは次のようになる：

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

または：

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

プロジェクトマニュアルからの以下における架空の引用は、セクション内でトピックを分離するためにhr要素を使用する2つのセクションを示す。

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

section要素とh1要素はテーマの変更を意味するため、セクション間のhr要素は必要ない。

ピーター・F・ハミルトン作のPandora's Starからの以下の抜粋は、シーンの変化の前にある2つの段落とそれに続く段落を示す。第2段落と第3段落との間の1つの中央にある星を含むギャップによって書籍で表現されるシーンの変化は、ここにhr要素を使用することで表される。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

次の断片において、コンピュータコードのサンプルが提示される。

<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>

次の断片において、sampとkbd要素は、『ゾークⅠ』のセッションを表示するために、pre要素のコンテンツで混合される。

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

以下は、詩自体の本質的な部分を形成する、その独特な書式設定を保持するためにpre要素を使用する、現代的な詩を示す。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

たとえば英語において、省略は伝統的に角括弧を使用して識別される。"Fred ate the cracker. He then said he liked apples and fish."という文をもつページを考えてみよう。これは次のように引用されるかもしれない：

<blockquote>
 <p>[Fred] then said he liked [...] fish.</p>
</blockquote>

たとえば、インライン注釈は、著者によって提供される：

 <figure>
 <blockquote>
 "That monster custom, who all sense doth eat
 Of habit's devil," <abbr title="et cetera">&c.</abbr> not in Folio
 
 "What a falling off was there !
 From me, whose love was of that dignity
 That it went hand in hand even with the vow
 I made to her in marriage, and to decline
 Upon a wretch."
 </blockquote>
 <footer>
 — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>,
 p19 (in Google Books)
 </footer>
 </figure>
 

上記の例において、引用はfigure要素のfooter内に含まれ、これは引用文に関する情報を寄せ集めて、引用文と関連づける。この場合において、figcaption要素はキャプションでないため引用に対するコンテナとして、使用されなかった。

たとえば、帰属と引用を明確に関連付けるために、引用されたテキストの後にfooterで帰属が与えられる：

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
 <footer>— <cite>Stephen Roberts</cite></footer>
 </blockquote>

帰属は引用符で囲まれたテキストの最後の行にcite要素で与えられる。著者へのリンクも含まれていることに注意する。

<blockquote>
 The people recognize themselves in their commodities; they find their
 soul in their automobile, hi-fi set, split-level home, kitchen equipment.
 — <cite><a href="http://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite>
 </blockquote>

帰属は、引用符で囲まれたテキストの後にfooterに与えられ、出典についてのメタデータは、マイクロデータの構文を使用して追加されている（同様にRDFA Liteを使用してマークアップされている可能性に注意する）。

<blockquote>
 <p>... she said she would not sign any deposition containing the word "amorous"
 instead of "advances". For her the difference was of crucial significance,
 and one of the reasons she had separated from her husband was that he had never been
 amorous but had consistently made advances.</p>
 
 <footer itemscope itemtype="http://schema.org/Book">
  <span itemprop="author">Heinrich Böll</span>,
  <span itemprop="name">The Lost Honor of Katharina Blum</span>,
  <span itemprop="datePublished">January 1, 1974</span>
 </footer>
 </blockquote>
 

この例において引用のソースは、class属性を用いて注釈が付けられる、cite要素を含む：

  <blockquote>
  <p>My favorite book is <cite class="from-source">At Swim-Two-Birds</cite></p>
  <footer>- <cite>Mike[tm]Smith</cite></footer>
  </blockquote>
  

ここでblockquote要素はfigure要素とfigcaptionとを組み合わせて使用される：

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

次の例は、blockquoteと同時にciteの使用方法を示す：

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

この例は、フォーラムの投稿で、どの投稿がユーザーが返信しているものかを表示するためにblockquoteを使用する様子を示す。article要素は、スレッドをマークアップするために各投稿に対して使用される。

<article>
 <h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

この例は、blockquote要素の内部にp要素を使用する必要がないことを説明する、短い断片に対するblockquote要素の用法を示す。

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

次のマークアップは、順序が重要である所でリストを示しており、したがって、ol要素は適切である。ul要素を使用する同じ項目の例を見るにはulセクションで同等のリストとこのリストを比較する。

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

リストの順序を変更すると、どのように文書の意味が変化するかに注意する。次の例は、最初の2つの項目にある相対順序を変更することで、著者の故郷を変更している：

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

次のマークアップは、順序が重要でないリストを示しており、したがって、ul要素は適切である。ol要素を使用する同じ項目の例を見るにはolセクションで同等のリストとこのリストを比較する。

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

リストの順序を変更することが、文書の意味を変更しないことに注意する。上記の断片内の項目はアルファベット順に記載されるが、下記の断片において、文書の意味を変えることなく、2007年における経常収支の大きさの順に与えられる：

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

次の例は、トップ10の映画が（逆順で）記載される。リストがfigure要素とfigcaption要素を使用して、タイトルを与えられる様子に注意する。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

マークアップはまた、ol要素にreversed属性を使用して、次のように記述できる：

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

次の例は、1つのエントリ（"Authors"）が、2つの値（"John"と"Luke"）にリンクされる。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

次の例は、1つの定義が2つの用語にリンクされる。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

次の例は、ある種のメタデータをマークアップするdl要素の使用例を示す。例の最後で、1つのグループは、2つのメタデータラベル（"Authors"と"Editors"）と2つの値（"Robert Rothman"と"Daniel Jackson"）を持つ。

<dl>
 <dt> Last modified time </dt>
 <dd> 2004-12-23T23:33Z </dd>
 <dt> Recommended update interval </dt>
 <dd> 60s </dd>
 <dt> Authors </dt>
 <dt> Editors </dt>
 <dd> Robert Rothman </dd>
 <dd> Daniel Jackson </dd>
</dl>

次の例は、一連の命令を与えるために使われるdl要素を示す。ここで、命令の順序が重要である（他の例において、ブロックの順序は重要ではなかった）。

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

次の断片は、用語集として使用されるdl要素を示す。定義されている単語を示すためのdfnの使用に注意する。

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

この例では、質問に対するdt要素と回答に対するdd要素を用いてマークアップされるよくある質問（FAQ）のリストを示す。

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

dlは辞書のように、語彙リストを定義するために使用できる。以下の例において、dfnとともにdtで与えられる各エントリは、定義の様々な部分を示す、複数のddを持つ。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

この例は、コードリストをマークアップするためのfigure要素を示す。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

これは（ギャラリー内のような）ページの主コンテンツである写真をマークアップするfigure要素である。

<!DOCTYPE HTML>
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

この例において、figureにない画像にくわえて、figureにある画像と動画が見られる。自己完結型のユニットではないので、最初の画像はリテラルに例の第2文の一部である。したがって、figureは不適切であろう。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

ここでは、詩の一部に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>

この例において、それは城を取り扱うより大きな作品の一部である可能性があり、ネストされたfigure要素は、グループ内の各図に対してグループのキャプションと個々のキャプションの両方を提供するために使用される：

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

図は、時にはコンテンツからのみ、暗黙的に参照される：

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barrak Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>

たとえば、ブログの投稿はarticle、章にsection、ページのナビゲーションの目的にnav、フォームコントロールのグループにfieldsetを使用してマークアップされるだろう。

一方、div要素は、文体上の目的のため、すなわち類似の方法で注釈をつけたすべてのセクション内の複数段落を包むために有用であるかもしれない。次の例は、別々な2つの段落要素に言語の設定を一度に設定する代わりに、一度に2つの段落の言語を設定する方法として使用されるdiv要素である：

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

  <main role="main"> 
  ... 
  </main>

<!-- other content -->

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>
  
  <article>
  <h2>Longboards</h2>
  <p>Longboards are a type of skateboard with a longer
  wheelbase and larger, softer wheels.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Electric Skateboards</h2>
  <p>These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board,
  fed by an electric battery.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

  <!-- other content -->

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </ul>
  </nav> 
  </header>


<main>


  <h1>Graduation</h1>

  <nav>
  <ul>
  <li><a href="#ceremony">Ceremony</a></li>
  <li><a href="#graduates">Graduates</a></li>
  <li><a href="#awards">Awards</a></li>
  </ul>
  </nav>

  <H2 id="ceremony">Ceremony</H2>
  <p>Opening Procession</p>
  <p>Speech by Valedictorian</p>
  <p>Speech by Class President</p>
  <p>Presentation of Diplomas</p>
  <p>Closing Speech by Headmaster</p>

  <h2 id="graduates">Graduates</h2>
  <ul>
  <li>Eileen Williams</li>
  <li>Andy Maseyk</li>
  <li>Blanca Sainz Garcia</li>
  <li>Clara Faulkner</li>
  <li>Gez Lemon</li>
  <li>Eloisa Faulkner</li>
  </ul>

  <h2 id="awards">Awards</h2>
  <ul>
  <li>Clara Faulkner</li>
  <li>Eloisa Faulkner</li>
  <li>Blanca Sainz Garcia</li>
  </ul>

</main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>