HTML5 コーディング

サンプルソースコード

まず以下をご覧下さい。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Macで作るHTML5ではじめるホームページ制作</title>
<meta name="keywords" content="webデザイン,ホームページ,Mac,Wordpress" />
<meta name="description" content="Macで作るHTML5で制作する。ホームページ制作講座です。初心者からこれからHTML5でホームページを制作してみたいと言う方のお役に立てれば幸いです。" />
</head>
<body>
<h1>MacでつくるHTML5ではじめるホームページ制作</h1>
<h2>そもそもHTMLって？</h2>
<p>HTMLはブラウザーに表示させるためのマークアップ言語です。</p>
</body>
</html>

<!doctype html>

<head>

<title>Macで作るHTML5ではじめるホームページ制作</title>

</head>

<body>

<h1>MacでつくるHTML5ではじめるホームページ制作</h1>

<h2>そもそもHTMLって？</h2>

<p>HTMLはブラウザーに表示させるためのマークアップ言語です。</p>

</body>

</html>

なんだかごちゃごちゃしていますね！これがhtmlのソースコードです。そして<>で囲まれた文字列をタグといいます。htmlでは文字列をタグで挟んで記述するというルールがあります。上記のソースコードを実際に記述してサーバーにアップロードしていますので以下の「サンプルを見る」をクリックして確認して下さい。別タブor別ウィンドウで開きます。

サンプルを見る

すごくシンプルなページが表示されたと思います。表示されたページは上記ソースコードに記述されている内容よりも少なくないですか？

MacでつくるHTML5ではじめるホームページ制作
そもそもHTMLって？
HTMLはブラウザーに表示させるためのマークアップ言語です。

上記の3行だけしか表示されていませんが他にも
「Macで作るHTML5ではじめるホームページ制作」
「webデザイン,ホームページ,Mac,Wordpress」
「Macで作るHTML5で制作する。ホームページ制作講座です。初心者からこれからHTML5でホームページを制作してみたいと言う方のお役に立てれば幸いです。」
という文言が記述されています。

htmlでは<body>タグ内の記述がブラウザに表示されます。

ブラウザで表示されるためには<body>タグ内に内容が記述されている必要があります。なので<body>タグ内に記述の無かった文章が表示されなかったわけです。とは言えbody内に記述されていないタグにもちゃんと意味があります。

<head>タグにはページのメタ情報が記述されます。

<head>タグ内にはページに関する情報を記述します。
<title>タグにはページのタイトル。
<meta name="keywords" content="〜" />タグには検索時のキーワードとなる記述。
<meta name="description" content="〜" />タグにはページの概要を簡潔に記述。
など、それぞれのタグには意味があります。一気に覚える必要はありません。徐々に覚えていけば大丈夫です。

理屈が分ったところで実際にサンプルソースコードを記述したhtmlファイを作成してみましょう。まずデスクトップにでも「www」という名前のフォルダーを作りテキストエディタでサンプルソースコードを記述し、「index.html」というファイル名で保存してください。 wwwの名前は何でもいいですが、index.htmlは変更しないで下さい。この事については後ほど解説いたします。保存したファイルをダブルクリックすると先ほど見ていただいたサンプルと同様のものがブラウザで開いたと思います。もし開かない場合はブラウザを開いてファイルをブラウザにドロップしてください。

内容をご自身の内容に書き換えていただければ、とってもシンプルな初めてのホームページの完成です。

マークアップ

htmlは文字列をタグではさんで記述すると前項で説明しました。各タグにはそれぞれ意味があると言うこともさらっと触れました。適切なタグを配置し文章を構成することをマークアップといいます。 htmlはマークアップ言語（文章構造や見た目に関する指定を文章とともにテキストファイルに記述する言語）です。タグの種類は膨大にあるわけでは無いので、適切な箇所に適切なタグを配置すると言うことに注力することがhtmlマスターへの近道です。

今回マークアップに使ったタグ

<!doctype html>: ドキュメントがhtml5で作られたものであると宣言するためのタグです。 html5でホームページを制作する場合の必ず入れる記述だと覚えておけばいいと思います。
<html lang="ja">: htmlの文章である事を示すタグです。lang="ja"は日本語で作られていますよ〜って指定です。ちなみに英語のホームページの場合はlang="en"と指定します。 htmlタグもhtmlでドキュメントを制作するにあたり必ず入れるタグのセットだと思っておいていいと思います。
<head>〜</head>: この<head>から</head>に囲まれた範囲にドキュメントの情報メタデータを記述します。 SEO（検索エンジンの上位に表示させる）のに直結しますので、Safari等のブラウザーに表示される箇所ではないのですが、きちんと記述するようにしましょう。すごくよく出来たホームページでもここを適当に記述していると、なかなか上位に表示されないでしょう。まぁきっちりしているから上位に表示されるわけでもないですが、やらないよりはね！
<meta charset="UTF-8">: 文字エンコーディングがUTF-8であると示す記述です。日本語で制作されるホームページの文字コードは他にshift_jis・euc-jp等がありますが、最近のweb制作ではUTF-8が一般的です。
<title>〜</title>: <title>から</title>で囲まれた範囲にホームページのタイトルを記述します。 SEO的にタイトルは非常に重要な項目になりますので、検索エンジンの上位に表示させたい場合は適当なタイトルは付けずに、ちゃんと考えてつけるようにしましょう。
<meta name="keywords" content="〜" />: content="〜" に検索時のキーワードを指定します。複数入れるときは半角,で区切ります。あまり欲張らず5,6個のキーワードを指定するのが良いと言われています。こちらもSEO的には重要ですので、慎重にキーワードをチョイスしましょう。
<meta name="description" content="〜" />: そのページの概要を短く示すものです。検索エンジンの検索結果にも反映されますので、こちらもちゃんと考えましょう。
<body>〜</body>: <body>から</body>の間にドキュメントのコンテンツを記述します。 <body>タグ内に記述されたソースコードはブラウザーに表示されます。ブラウザーで表示されるマークアップは<body>タグ内に記述します。
<h1>〜<h6>: 見出しを示すタグです。h~の数値が小さい程高ランクな項目になるので、 h1が一番高ランクな項目になります。数値が大きい見出しから指定する事は出来ません。
<p>〜</p>: ひとつの段落を示すタグです。

今回のサンプルで使ったタグは以上です。

Point

HTMLはマークアップ言語（文章構造や見た目に関する指定を文章とともにテキストファイルに記述する言語）ですので、構造的に正しく記述しましょう。文章にそれらを指定する事をマークアップと言います。マークアップを記述する為の<>で囲まれた文字列をタグといいます。

Macでホームページ作成