どんなタグなんですか！？

• ■見出し
• ■リスト
• ■表組み
• ■グループ化
• ■画像
• ■リンク
• ■段落

上記７つを基本構造としています。

見出し

見出しタグとは h1,h2,h3,h4,h5,h6のタグの事になります。
ちなみに数値の小さいモノから重要度が下がっていきます。
h1が一番重要になり、h6が一番重要度が低いモノとなります。
また、h1に関しては
そのページで１つしか設置できない
といったルールがあります。(html4のみ、html5ではいくつ設置してもOKとなります。)

<h1>h1タグ</h1>
<h2>h2タグ</h2>
<h3>h3タグ</h3>
<h4>h4タグ</h4>
<h5>h5タグ</h5>
<h6>h6タグ</h6>

リストタグ

ul または ol タグの事を指します。
また共通してul、olの子要素にはliを使用します。

ulとolの違いについて

基本的に、ulは先頭に●などのアイコンが付与され、olは先頭に連番が付与されます。

ul

• ulリスト
• ulリスト
• ulリスト

ol

1. olリスト
2. olリスト
3. olリスト

<ul>
 <li>ulリスト</li>
 <li>ulリスト</li>
 <li>ulリスト</li>
</ul>

<ol>
 <li>olリスト</li>
 <li>olリスト</li>
 <li>olリスト</li>
</ol>

表組み

いわゆる、テーブルタグの事となります。
エクセルのような表組表示の時に主に使用します。

テーブルタグでよく使用するもの

<table></table>

テーブルタグの大元のタグとなります。

<tr></tr>

テーブルの行を表すタグ、このタグ内は１行としてみなされます。

<th></th>

セル内容がデータに対する見出し を意味するタグです。
マークアップを意識する場合は積極的に使うべきです。
セルの合成やwidth、heightの指定が可能です。

<td></td>

セル内容がデータを意味するタグです。
セルの合成やwidth、heightの指定が可能です。

基本的な書き方は以下です。

<table>
 <tr>
  <th>名前</th>
  <th>年齢</th>
  <th>特記事項</th>
 </tr>
 <tr>
  <td>おっさん</td>
  <td>20歳と132ヵ月くらい</td>
  <td>要注意人物</td>
 </tr>
</table>

セルの合成？合成って・・・何、レアテーブルでもできるのか？

thとtdの部分にさらっと合成できるって書きました。
なんだよ合成って。と思われると思いますが、以下のような形を指します。
※以下の説明では thとtdをセルという言葉で置き換えてます。

基本的にテーブルはマス目状で構成され、各列には同じ数のセルがある　というのが大きなルールであります。
しかし、データ内容によっては、同じタイトルとか使ったりしたい時があります。
そんな時はセルの合成を行います。

<table class="testTbl1">
 <tr>
  <th colspan="2">合成しようぜ！</th>
 </tr>
 <tr>
  <td>データ１</td>
  <td>データ２</td>
 </tr>
</table>

上記は、最初のtr内にはセルが１つしかありませんが、次のtr内にはセルが2つあります。
このままではセルの数が合わなく、崩れてしまいますが、
最初のセルで、 colspan="2" という属性が付けられています。
この意味としては「このセルはセル2つ分です」といった意味合いになります。
なので、セル数も合い崩れないといった事になります。

上記では横方向の合成ですが、縦方向への合成もできます。

<table class="testTbl1 mb20">
 <tr>
  <td rowspan="2">合成しようぜ！</td>
  <td>データ１</td>
 </tr>
 <tr>
  <td>データ２</td>
 </tr>
</table>

上記タグ、最初のtr内にはセルが２つ、次のtr内にはセルが１つとなります。
横の時と逆ですね！！！！！！
縦に伸びるのは下方向にしか伸びません、なので最初の位置で何セル分伸ばすかを指定する必要があります。
rowspan="2"とすることで、縦に２セル分あるよといった意味になり
次のtrでは、既にセルがある(伸びてきている)からこいつは右側に表示だぜ みたいなニュアンスです。
結構この辺はややこしかったりしますので、ここも書いて覚えるのが一番ラクです。

グループ化

div、spanの事を指します。
特記事項は特にありません。

<div>divタグ</div>
<span>spanタグ</span>

画像

imgの事を指します。
特記事項は特にありません。

<img src="xxxx" alt="xxx" >

リンク

aの事を指します。
別ウインドウで表示する場合は、target="_blank"を指定します。

<a href="xxxx" target="_blank">リンク</a>

段落

pの事を指します。
特記事項は特にありません。

<p>pタグ</p>