HTMLタグの基本

序章

ブログ・ホームページを作成するために必要最低限しっておかなければならないWEBページを構築するためのHTMLタグを紹介します。

下記は「とほほHTMLリファレンス」と「HTMLタグリファレンス」での解説に補足を加えています。

なお、下記以外のタグを調べたい時は、上記URL(とほほHTMLリファレンス、HTMLタグリファレンス)か、検索エンジンで、「○○とは」検索をして調べましょう。

<title>
<TITLE>は文書にタイトルをつけるタグです。<TITLE>は省略できない要素なので、 <HEAD>~</HEAD>内に必ず1つ記述してください。

ここで指定したタイトルはブラウザのツールバーに表示されます。

また、お気に入り(ブックマーク)に登録された際や、 検索エンジンの検索結果などでも表示されるので、

文書のタイトルをつける際には慎重に言葉を選ぶ必要があります。

<h1>~<h6>
<H1>~<H6>のHとはHeadingの略で、見出しを意味します。 <H1>が最上位の見出し(大見出し)で、

 

以下数字が小さくなるにつれて下位の見出し(小見出し)となります。 <H6>が最下位の見出しです。

 

一般的なブラウザでは<H>タグで囲まれた部分はテキストのサイズが変化し、太字で表示され、前後に改行が入ります。

 

これを利用して単にテキストのサイズを変えたり太字にするなど、見栄えを目的に<H>タグを使用することは避けるべきです。

 

このような目的には<FONT>タグや<B>タグ、 <BIG>タグ等を使用しましょう。

逆に画像を見出しとして使用する場合には<H>タグで囲む方が好ましいと言えます。

 

そうすることで画像が表示されない場合にも、<IMG>タグのalt属性で指定した内容が見出しとして機能するからです。

<meta>
<META>タグはその文書に関する情報(メタ情報)を指定して、 ブラウザや検索ロボットに知らせるためのタグです。
制作者やキーワード等の情報をname属性で定義して、 content属性でその値を指定します。
<IMG>
<IMG>はImageの略で、画像を表示するタグです。
表示する画像ファイルはsrc属性(srcはsourceの略)で指定します。
WEBに使用できる画像形式は、現在のところGIF・JPEG・PNGの三種類ですが、
それぞれ特徴があるので、状況により使い分けてください。
<P>
<P>タグはParagraphの略で、<P>~</P>で囲まれた部分がひとつの段落であることを表します。

 

HTMLタグ活用例

下記は、上記紹介の主要なHTMLタグを利用して、文章を構造化したものです。

今後の参考としてざっと見てみてください。※今は理解できなくてもいいです。


<title>金スマで話題の骨盤ダイエットの方法を図解</title>
<meta name=”keywords” content=”金スマ,骨盤ダイエット,方法” />
<meta name=”description” content=”金スマで話題となっている骨盤ダイエットの方法を詳しく解説しています…” />

<h1>金スマの骨盤ダイエット</h1>
<h2>骨盤ダイエット</h2>
<p><img src=http://tesuto.jpg></p>
<p>あからさまにきれいにくぶれができはじめていますね。</p>
<h3>中居くん絶賛のダイエット!</h3>
<p>8月15日の金スマで中居くんが唸ったダイエットが登場!それはポールを使った骨盤ダイエットなるものだ…</p>

という具合に、WEBページを作成する時は、HTMLタグを利用して、文章を構造化していきます。

 

今日のおさらい