<div id="sidebar">
<h3>Contents</h3>
<ul>
<li><a href="index.html">サービス</a>
<ul>
<li><a href="service1.html">サービス(1)のページ</a></li>
<li><a href="service2.html">サービス(2)のページ</a></li>
<li><a href="service3.html">サービス(3)のページ</a></li>
</ul>
</li>
<li><a href="../products/index.html">製品情報</a>
<ul>
<li><a href="../products/products1.html">製品情報(1)のページ</a></li>
<li><a href="../products/products2.html">製品情報(2)のページ</a></li>
<li><a href="../products/products3.html">製品情報(3)のページ</a></li>
</ul>
</li>
<li><a href="../company/index.html">会社概要</a></li>
<li><a href="../contact/index.html">お問い合せ</a></li>
</ul>
<h3>Information</h3>
<dl>
<dt>住所</dt>
<dd>愛知県豊橋市○○町×丁目XX</dd>
<dt>TEL/FAX</dt>
<dd>012-345-6789</dd>
<dt>営業時間・定休日</dt>
<dd>AM9:00 〜 PM7:00<br>
毎週水曜日定休日・年末年始</dd>
</dl>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<h3> 〜 </h3>で記述します。
普通にリストで作成していきます。背景グリーンの部分
一階層目のリストの中にさらにリストで作成していきます。緑色の文字の部分。リスト作成位置に注意しましょう。
定義型リストで記述できます。背景黄色の部分
普通に<p> 〜 </p>で記述。青い文字の部分