よくつかうHTMLタグ

∇【∇divタグ】div（ブロックレベル）

タグとしての意味は持たない。

CSSでデザインを設定するために領域を作成するタグでブロックレベル要素のタグ。

すべてのHTMLタグを囲めるタグがこのdivタグ。

使い方は自由で、このdivタグの使い方次第で複雑なデザインのコーディングが可能になる。

例）

<div id="header>

<h1>HTMLよく使う基本タグ編</h1>

<h2>見出しタグ：h1〜h6</h2>

</div>

<div id="nav">

<ul>

<li>ホーム</li>

<li>更新情報</li>

</ul> 

</div>

<div class="post">

<p>記事の投稿です。</p>

</div>

<div class="post">

<p>記事の投稿です。</p>

</div>

※divタグには属性でidやclassが使われます。これは目印だと思って下さい。ここにつけた名称をCSS作成の際に使用します。

∇【spanタグ】span（インライン要素）

タグとして意味は持たない。

CSSでデザインを設定するために領域を作成するタグでインライン要素のタグ。

ブロックレベル内でCSSを設定したい場合に挿入します。

例）

<div class="post">

<p>記事の投稿です。<span>この部分だけに別でCSSを設定する</span></p>

</div>

<div class="post">

<p>spanタグは<span class="sample">そのままで設定したり</span>classをつけたりします。</p>

</div>

∇【表組みタグ】table、tr、th、td

表組みのタグ。会員名簿やコース一覧など表の作成に使用。

レイアウトでの使用はNG。

例）

<table>

  <tr>

    <th>見出し1</th>

    <th>見出し2</th>

  </tr>

   <tr>

    <td>内容1</td>

    <td>内容2</td>

  </tr>

   <tr>

    <td>内容3</td>

    <td>内容4</td>

 </tr>

</table>

∇【リンクタグ】a（インライン要素）

別ページのリンクやメーラー起動などに使用。

例）

ページのリンク

<a href="sample.html">リンクはこちら</a>

<a href="sample.html">HPはこちら</a>

メーラーのたち上げ

<a href="sample.html">お問い合わせメールはこちら</a>