HTML必須タグ＆属性

今回はスタイルシートを使ってWEBサイトを作るときに是非とも知っておきたいHTMLのタグです。
最小必要限度しか紹介しないので、必要に応じて他のサイトや参考書で勉強してください。
ただ、ここにあるものを覚えれば、このサイト程度のものならできます。

一度テンプレートを作れば流用できるもの

HTMLの根幹を成すものです。すべてのHTMLファイルに必要なものなので、一度テンプレート化してしまえば、いくらでも流用できます。テンプレートをダウンロードできるようにしました。＞ダウンロードする（base.html）　＊右クリック→対象をファイルに保存

<html></html>
<head></head>
<body></body>
<meta>
<link>
<title></title>

自由に使いこなせるようになりたいもの

うちのサイトはほとんどがこれらのタグだけで作られています。

<div></div>: CSSデザインの肝となるタグです。意味としてはブロックとか箱といった感じです。深い意味はありません。複数の要素をひとつのまとまりとして扱う時などに使います。
<h*></h*>＊は1～6までの任意の数字: 見出しや小見出しに使います。数字が小さいほど重要で、大きいほど重要度が低くなります。見出しの重要度にあわせて同じ数字を何度使っても大丈夫です。使うのはせいぜい4まで。それ以上はめったに使いません。ブロック要素のタグです。
<p></p>: 段落を意味するブロック要素のタグです。これで囲まれた文章は1つの段落としてコンピューターに認識されます。本文は大体このタグで挟みます。
<span></span>: 特に深い意味はないインライン要素のタグです。 pタグではさまれた文章の一部分だけ文字の大きさや色を変えたいという時などに使用します。
<a></a>: リンクを張るときに使用するタグです
<img>: 画像を表示するときに使用するタグです
<br>: 改行するために使用するタグです。乱用するのはよくないと言われています。
<ul></ul>: 箇条書きをするためのタグです。必ずliタグと併用して使います。
<li></li>: 箇条書きの箇条の部分を表すタグです。ひとつのliタグで１箇条になります。

できれば使いこなせるようになりたいもの

使いこなせるようになると、表現の幅が広がり、より正しいHTMLが使えるようになります。

<dl></dl>: 用語説明タイプの箇条書きをするのに使います。かならずdt,ddタグを併用します。
<dt></dt>: 説明しようとする用語を表すタグです。
<dd></dd>: 用語の説明を表すタグです。
<ol></ol>: 順序のある箇条書きをするのに使います。liタグと併用します。
<table></table>: 表を作成するタグです。必ず、tr,tdタグを併用します。
<th></th>: テーブルの見出しをあらわすヘッダセルを表すのに使います。
<tr></tr>: 表の横１行を定義します。
<td></td>: 表のセルを定義します。

使いこなせるようになりたい属性

上で紹介したタグすべてで利用可能
id="--": --にID名を入力。スタイルシートを適用させるのに主に使います。同じIDは1ページに1回しか使えません。
class="--": --にクラス名を入力。スタイルシートを適用させるのに使います。同じクラスは1ページに何度でも利用可能。
aタグで利用
href="--": --にリンク先のアドレスを入力。これでリンク先に飛べるようになります。
target="--": --に_blankを入力すればリンク先が別ウィンドウで開きます。最近は利用が推奨されていません。
imgタグで利用
src="--": --に画像のアドレスを入力。これで画像が表示されるようになります。
width="--": --に画像の幅を入力。単位をつける必要はないです。
height="--": --に画像の高さを入力。単位をつける必要はないです。
alt="--": --に画像の説明を入力。何も書かなくてもいいけど、設定は必須です。
tdタグで利用
colspan="--": --に数字を入力。セルを横に連結させるのに使います。
rowspan="--": --に数字を入力。セルを縦に連結させるのに使います。

もっと詳しくタグについて説明しているサイトは、
ばけらの HTML リファレンス
 HTMLクイックリファレンス
などがあります。どちらも実践例などがついているので便利です。
特にブロック要素、インライン要素についてよく分からない方は、
ばけらさんの方へ一度行ってみるといいと思います。
ここで紹介しているのはほんの一部なので是非一度行ってみてください。
ただ、一部とは言ってもこれだけ覚えればある程度正しいHTMLが書けます。
あせって全部覚えようとしなくても大丈夫ですよ。

←前へ　：　次へ→

一覧へ戻る