<p>タグ 一般的な段落
子要素及び子孫に段落を構成する要素を入れてはならない
<div>,<p>,<ol>,<ul>,<table>,<pre>,<blockquote>など
<ul>タグ 非序列リスト
<li>~</li>で囲まれたリスト項目を箇条書きにするときに使う
<ul>タグの子要素は必ず<li>タグ
<a>タグ アンカーリンク
通常<a href="hoge.html">リンクテキスト</a>のように使う
index.html
<ul>
<li><a href="http://www.sbcr.jp" target="_blank">ホーム</a></li>
</ul>
外部リンクは上のように。
target属性をtarget=_"blank"とすると別のタブ、別のウィンドウで表示する
<img>タグの書き方
index.html
<h1><a href="index.html"><img src="images/logo.png" width="217" height="89" alt="KUJIRA cafe"></a></h1>
<ul>
上のように、タグを使う。
srcとaltは必須
srcに画像のパスを指定する。外部リンクの時と同じ
文字実体参照
©が©になるなど。
エスケープシーケンス的なもの。
<div>タグ
要素をグループ化する。それ自体は表記になんの影響も与えないが、CSSでの編集を効率化できる。
id,class
idは同一ドキュメントで１回まで
class同じドキュメントで何度でも
CSSやJSから参照するときに使われる
index.html
<body>
<div class="wrapper">
<h1 id="logo"><a href="index.html"><img src="images/logo.png" width="217" height="89" alt="KUJIRA cafe"></a></h1>
<ul id="nav">
<li><a href="http://www.sbcr.jp" target="_blank">ホーム</a></li>
<li><a href="about.html">店舗案内</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="menu.html">メニュー</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
<div>
<img src="images/keyvisual.jpg" width="900" height="362" alt="">
</div>
<h2>News</h2>
<p>5月30日、『ここでしか飲めない！おいしいうれしい満喫カフェ』に掲載されました。</p>
4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、
皆さんが気軽に立ち寄れる、ゆったりと
時間を過ごせる落ち着いた場所にしたいと思っています。</p>
<div id="footer">
<p>©Copyright KUJIRA cafe. All rights reserved.</p>
</div>
</div>
</body>
コメント
<br>タグと<strong>タグ
<br> 改行
<strong></strong> 重要
CSSを適用しない限り、太字で表示される。]
ページの特定の場所にリンクする
index.html
<h2 id="news">News</h2>
about.html
<a href="index.html#news">News</a>
なお、about.html内でリンクするときは
<a href="#news">News</a>のようにする。
テーブル
<tr>~</tr>が一行。
<td>~</td>｀は通常のカラム
一つの<tr>に含まれるカラムの数は<table>内のすべての<tr>で同数にする。
access.html
<table>
<tr>
<th>住所</th>
<td>〒199-9999 東京都新宿区１丁目(<a href="access.html">地図</a>)</td>
</tr>
<tr>
<th>電話番号</th>
<td>09-9280-2611</td>
</tr>
<tr>
<th>営業時間</th>
<td>10:00~22:00</td>
</tr>
<tr>
<th>定休日</th>
<td>水曜日・日曜日</td>
</tr>
<tr>
<th>ご予約</th>
<td>席のご予約を承っております。<br>
貸切パーティは15名様から承っております。詳しくはお電話、もしくは<a href="contact.html">お問い合わせ</a>をご利用ください</td>
</tr>
</table>
<ol>タグ
<ol>タグは序列リストを意味する。以下の例だと上から1. 2. 3. 4.が行頭につく。
access.html
<ol>
<li>駅東口を出ます。</li>
<li>駅前商店街を国道999号線方面へ向かいます。</li>
<li>国道999号線を渡り直進します。</li>
<li>銀行ATMの角を左に曲がり2軒目の1階です。</li>
</ol>