Home＞簡単HTML入門＞HTMLのタグ

HTMLのタグ

ここでは、よく使うHTMLのタグを紹介します。

HTMLのタグはたくさんありますが、よく使うタグはそんなに多くありません。

最初にHTMLでホームページを作成する際の注意点について話をしたいと思います。その注意点とは、

HTML文書内では、レイアウトやデザインを指示しない

ということです。

HTML文書の中でもレイアウトや文字の色、大きさ等を指示することはできます。しかし、検索エンジンは、レイアウトやデザインのことが書いてある複雑なHTML文書よりも、その文書のタイトル、見出し、段落、強調したい部分など文の構造のみを書いたシンプルなHTMLの方が好みです。きれいな洋服、アクセサリー、メイクアップで着飾っているよりも、スッピンの笑顔が好みって感じです。（笑）

レイアウトやデザインはスタイルシートとして別ファイルに記述することで、シンプルで検索エンジン好みのHTML文書をつくることができます！

MovableTypeのデフォルトのテンプレートもHTMLとスタイルシートという形になっています。MovableTypeで通常のホームページをつくるときにも、同じように作るほうがよいです。

文書の見出しや段落等、文の論理的な構造を指示するタグとなると、数が限られてきます。

ここでは、HTML文書の論理構造を指示するタグを紹介します。

１．<title>タグ

<title>タグはそのページのタイトルを表すタグです。このタグはhead要素として、<head>と</head>の間に記述します。

そのページのタイトルということでここに書かれているキーワードは検索エンジンも非常に重要視します。なので非常に大切なタグです。

【例】
<html>
  <head>
  	<title>ダウンタウン”プチ”情報</title>
  </head>
  <body>
	・
	・
	・
  </body>
</html>

２．<h1>～<h6>タグ

<h1>～<h6>タグは見出しをマークアップするタグです。<h1>が一番上位の見出し、<h2>、<h3>・・・と数字が大きくなるにつれて下位の見出しになっていきます。

【例】
<h1>ダウンタウンについて</h1>

<h2>Ａ．メンバー</h2>
<p>浜田雅功、松本人志</p>

<h2>Ｂ．結成</h2>
<p>１９８３年</p>

３．<p>タグ

<p>タグは段落をあらわすタグです。内容的にひとつのかたまりとなる部分を”段落”として<p>タグで囲みます。

【例】
<h2>Ｄ．コメント</h2>
<p>浜ちゃんこと浜田雅功の強烈なツッコミと、
松ちゃんこと松本人志の宇宙的ボケでお笑い界のリードし続ける漫才コンビ。
個人的には、松ちゃんはビートたけし以来の天才だと思ってます。</p>

４．<a>タグ

<a>タグはリンクを設定するタグです。<a>タグで囲った部分は別のページにリンクが貼られており、クリックするとそのページが開くようになります。

HTMLの一番の特徴と言っていいタグですね。

<a href="http://www.office-kitano.co.jp/">

のように、href="○○○"という属性をつかい、○○○の部分にリンクを貼りたいページのURL（ホームページアドレス）を指示します。

【例】
<h2>Ｄ．コメント</h2>
<p>浜ちゃんこと浜田雅功の強烈なツッコミと、
松ちゃんこと松本人志の宇宙的ボケでお笑い界のリードし続ける漫才コンビ。
個人的には、松ちゃんは
<a href="http://www.office-kitano.co.jp/">ビートたけし</a>以来の
天才だと思ってます。</p>

５．<ul>,<ol>,<li>タグ

<ul>,<ol>,<li>タグはリスト（箇条書き）の部分に使うタグです。それぞれのタグの詳細は以下のようになります。

<ul>：順序なしのリスト

<ol>：順序ありのリスト

<li>：リストの各項目

【例】
<h2>Ｃ．主な出演番組</h2>

<ul>
<li>夢で逢えたら</li>
<li>ガキの使いやあらへんで！</li>
<li>ごっつええ感じ</li>
<li>HEY!HEY!HEY!</li>
<li>ダウンタウンDX</li>
<li>などなど多数</li>
</ul>

６．<em>,<strong>タグ

<em>と<strong>タグは重要な語句を強調するときに使います。<em>タグよりも<strong>タグのほうが更に強い強調となります。

【例】
<h2>Ｄ．コメント</h2>
<p>浜ちゃんこと<em>浜田雅功</em>の<strong>強烈なツッコミ</strong>と、
松ちゃんこと<em>松本人志</em>の<strong>宇宙的ボケ</strong>で
お笑い界のリードし続ける漫才コンビ。</p>

７．<div>タグ

グルーピングをするタグです。メニュー部分、メインのコンテンツ部分、脚注の部分等の分類をする時に使います。

<div>タグで囲っただけでは、ブラウザの表示上はなんら変化はありません。<div>タグは主にスタイルシートと組み合わせて、レイアウトやフォントなどをコントロールするときに使います。

<div id="contents">

のようにid="○○○"という属性を使って、グルーピングしたグループに名前をつけることができます。

同様な属性にclass"○○○"という属性もあります。idとclassの違いは、idはそのページで1つしかないグループ、classは複数存在するグループという違いです。

【例】
<div id="contents">
<h1>ダウンタウンについて</h1>

<h2>Ａ．メンバー</h2>
<p>浜田雅功、松本人志</p>

<h2>Ｂ．結成</h2>
<p>１９８３年</p>
</div>

以上のタグが文書の論理構造を表すための主なタグです。

お手元にタグ辞典をもっていたいという方には、以下の2冊をおすすめします。

HTMLタグ辞典は初心者向き、詳解 HTML & XHTML & CSS辞典は中級者向き（HTMLとXHTMLとの違いの説明が詳しい）です。

詳解 HTML & XHTML & CSS辞典
詳解 HTML & XHTML & CSS辞典
posted with amazlet on 06.01.08
大藤 幹
秀和システム (2005/01)
売り上げランキング: 3,163
Amazon.co.jp で詳細を見る
HTMLタグ辞典
HTMLタグ辞典
posted with amazlet on 06.01.08
アンク
翔泳社 (2002/04)
売り上げランキング: 19,807
Amazon.co.jp で詳細を見る

≪ HTMLProject2でのマークアップ | このページのトップへ | HTMLのヘッダ ≫

このエントリーをはてなブックマークに追加 このページをはてなブックマークに追加

注目記事

⇒MovableTypeを使うのにおすすめのレンタルサーバーってどれ？

⇒MovableType独自タグの入力が簡単にできるホームページ作成ソフトは？

⇒MovableTypeをカスタマイズするのにどんな本が参考になる？

⇒「元気パワー」が増幅されるツールがあるって？

⇒初心者の方・ホームページ作成中心の方へのおすすめのパソコンは？


トラックバック

このエントリーのトラックバックURL：

http://cms-mt.com/cgi/mt/mt-tb_.cgi/48