HTMLタグ入門【初心者向け_ホームページ作成の基本】

公開日：2015年7月3日最終更新日：2019年4月19日 :　ホームページ制作関連

前回は、HTMLとはなんぞや？という基本的な説明をしました。今回は、HTMLタグについての内容です。慣れない内は、よく分からない宇宙語みたいで頭が痛くなりますが、HTMLの仕組み自体はそれ程むずかしくはないので、徐々に慣れていきましょう。
あまり深く考えず、とりあえず「文章をタグで囲えばOK」と思っていれば大丈夫です。

今回は、サンプルコードをもとに使用しているタグを順番に説明していきます。

HTML5で記述

HTML5ロゴ

HTMLにはバージョンがあり、現在HTML5が最新です。この記事ではHTML5の記述方法で説明していきます。ちなみに、HTML5は2014年に正式勧告されました。HTML4と比べてタグの記述がシンプルになったので、個人的にはその点が良いなと思っています。

HTML5の特徴

タグの記述がシンプルになった（doctype,meta,link.style,scriptなど）
動画や音声データをこれまで主流だったFlashをを使わずに、HTMLのみで扱える
文章構造を明確化できる新しい要素が増えた（section,article,aside,nav,hgroup,header,footerなど）

大きな特徴を紹介しましたが、この辺りのことを初心者の方が気にしだすと、面倒くさくなってしまうので、今はさらっと流して次に行きましょう。

HTML構造

HTML構造_図

<!DOCTYPE html>
<html>
<head>
ヘッダ要素の記述
</head>
<body>
コンテンツ内容
</body>
</html>

<!DOCTYPE html>

<html>

<head>

ヘッダ要素の記述

</head>

<body>

コンテンツ内容

</body>

</html>

HTMLの構造は大きく分けるとこのようになっています。簡単ですね。ここだけ間違って記述しなければ、とりあえずページは表示されます。これはルールなので、どのページでも同じように記述します。（サイト規模の大小、種類も関係ありません。どのサイトのページでも同じです）

DOCTYPE html（ドックタイプ宣言）

まずこのタグを必ず記述します。この短い文を書くことで「このファイルはHTML5で作りましたよ」ということをコンピューターに宣言しています。（これを文章型宣言と呼びます）5という数字が入っていませんが、この表記で正しいです。

html（エイチティーエムエル）

DOCTYPE宣言のすぐ後に配置して、htmlタグで全体を囲みます。（上記図を参照）すべての内容がこのhtml要素で内包されます。

head（ヘッド要素）

ヘッド要素は、ブラウザにページを正しく表示させるために必要な情報を記述する箇所です。HTML文章に関する情報を記述します。例えるならページの取り扱い説明書でしょう。

具体的には、文字コード、タイトル、ページの概要 (meta 要素)、CSS、Javascriptなどをこの中に記述します。

ヘッダー内の記述のほとんどは、ブラウザの閲覧ページ内に表示されることはありません。（ページには表示されませんが、とても重要な部分です。ここで記述するタイトル、ページ概要の文章は検索結果ページに表示されます）

body（ボディ要素）

ボディー要素の中に書かれた内容が、ブラウザの画面に表示されます。テキスト、画像、映像、音声などの情報を記述できます。

基本の記述

最低限これだけ記述してあればOKという要素を書いてみました。これだけコピペすればあとはbody要素の中に、ページの内容をつくるのみであります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<meta content="ページ説明" name="description">
<meta content="ページキーワード" name="keywords">
</head>
<body>
（ここにブラウザの画面に表示される内容を書く）
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>ページタイトル</title>

</head>

<body>

（ここにブラウザの画面に表示される内容を書く）

</body>

</html>

要素内のコードについて

要素内に記述している内容を説明していきます。

補足

今回のソースコードにはありませんが、通常ホームページ制作を行う場合は、この他に、css、jsなどのファイル（ホームページの見た目や動きをつくる）を読み込む記述もhead要素に書きます。
※css、jsについては、次回以降の記事でくわしく説明します。

lang属性

<html lang="ja">

1	<html lang="ja">

コードの言語が日本語であることを宣言します。html要素のlang属性に”ja”を指定します。翻訳機能、音声再生機能にも使用されるので、必ず記述しましょう。（英語なら”en”）

文字コード

<meta charset="UTF-8">

1	<meta charset="UTF-8">

文字コード（HTML記述形式）を指定します。このコードを指定しないと文字化けの原因になりますので、必ず指定しましょう。日本語であれば、”UTF-8″を使用することが一般的です。（HTML5では”UTF-8″が推奨されています。）

ページタイトル

<title>ページタイトル</title>

1	<title>ページタイトル</title>

ここにページのタイトルを書きます。ここの内容は、検索結果、ブラウザのタグ、ブックマークの名前などに使用されます。本の表題みたいなもので、検索エンジンもこの情報を１番重要な要素として、検索結果に反映させます。SEO対策でも重要な部分です。ユーザーが検索に使うキーワードを含んだタイトルにすることがポイントです。

ページ説明

<meta content="ページ説明" name="description">

1	<meta content="ページ説明" name="description">

description（ディスクリプション）は日本語で「説明」という意味です。文字通りページ説明、概要を記述しまます。SEO的には、この部分は評価の対象となっていませんが、ブラウザの検索結果にタイトルの下に表示される部分なので、ユーザーが読んだときにクリックしたいと思うようなページ説明を書くことが必要です。

ページキーワード

<meta content="ページキーワード" name="keywords">

1	<meta content="ページキーワード" name="keywords">

keywords（キーワード）はページの内容で使用している特に重要なキーワードを「,」（カンマ）で区切って記述します。昔はキーワードの内容を記述することに意味がありましたが、現在では、ディスクリプション同様にサポート対象外です。必須ではありませんが、1,2単語書いておけば十分でしょう。

よく使うHTML

初期設定の記述ができたら、<body>～</body>の中にWebページの内容を書いていきましょう。では早速、本文中でよく使う「これだけ知っていればWebページが作れる！」というHTMLタグを紹介していきます。

ブログの更新やWebページの追加など、ここで紹介するタグを使えればバッチリ対応できます。（実務でもここで紹介するタグでの記述が8割くらいになります）

まずはじめに、下記で説明するタグの完成図を用意しました。りんご専門サイトの「ふじページ」を想定して作りました。（特に意味はないのであしからず…）

HTMLファイルの作成方法

これを、Windowsであればメモ帳、Macであれば、テキストエディットなどにコピペして、保存します。拡張子を「.html」にして、Webブラウザで開くと（ブラウザの画面にファイルを直接ドラッグ&ドロップでもOk）、同じ画面で表示されるはずです。（ブラウザの種類で文字の大きさなど若干の違いあり）

※プロの業務では、Dreamweaver、coda、Sublime Textなどのソフトを使用してコードを書くことが多いです。

サンプルコードのブラウザ確認はこちら>>

<!DOCTYPE html>
<html>
<head>
<title>ふじ｜りんご好きための情報サイト</title>
<meta charset="UTF-8">
<meta content="ふじについての情報ページです。（おいしいレシピ、歴史、育て方など）その他にも現在の相場価格など役立つ最新情報も掲載しています" name="description">
<meta content="りんご,ふじ,王林,ジューズ" name="keywords">
</head>
<body>
<h1>ふじとは？</h1>
<p>ふじは年間を通して販売されています。日本で１番生産されている青森で作られた品種です。<br>
取り扱い量は約4トン。最も多いのは青森県産です。全体の約8割を占めています。蜜、果汁がたくさんあり、甘みと香りもしっかりとしています。歯ごたえはシャキシャキとして気持ちがいいです。</p>
<img src="https://mw-s.jp/wp-content/themes/mworks/images/fuji.JPG" alt="ふじ画像"   width="300 "height="199">
<h2>名前の由来</h2>
<p>公式には育成地である青森県藤崎（ふじさき）と富士山にちなんでいます。</p>
<h2>育て方</h2>
<p>リンゴは果樹の中で最も寒さに強く、-30度前後まで耐えることができますが、年平均気温が6～14度が育つ条件です。日当たりが良く、肥沃な大地が適します。</p>
<h3>植え付け</h3>
<p>植え穴は根鉢の3倍ほどの大きさに掘り、堆肥を入れておきましょう。その後、堆肥の上に掘り上げた土をかぶせます。</p>
<h3>受粉</h3>
<p>リンゴは自分の花では受粉できませんので、結実しやすい品種の組み合わせを隣接して植える必要があります。確実に実をつけるには、人工受粉をします。</p>
<h2>青森産りんごの品種</h2>
<p>ふじと同じ青森産りんごの品種の一例です。</p>
<ul>
<li>つがる</li>
<li>紅玉</li>
<li>ジョナゴールド</li>
</ul>
<h2>外部リンク</h2>   
<table>
<tr>
<th>リンゴ（林檎/りんご）の品種一覧：旬の果物百科</th>
<td><a href="http://foodslink.jp/syokuzaihyakka/syun/fruit/fuji.htm">http://foodslink.jp/syokuzaihyakka/syun/fruit/fuji.htm</a></td>
</tr>
<tr>
<th>サンふじ｜品種紹介｜りんご情報局</th>
<td><a href="http://vegemart.net/apple/kind/12_sf.html">http://vegemart.net/apple/kind/12_sf.html</a></td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ふじ｜りんご好きための情報サイト</title>

</head>

<body>

<p>ふじは年間を通して販売されています。日本で１番生産されている青森で作られた品種です。<br>

取り扱い量は約4トン。最も多いのは青森県産です。全体の約8割を占めています。蜜、果汁がたくさんあり、甘みと香りもしっかりとしています。歯ごたえはシャキシャキとして気持ちがいいです。</p>

<h2>名前の由来</h2>

<p>公式には育成地である青森県藤崎（ふじさき）と富士山にちなんでいます。</p>

<p>リンゴは果樹の中で最も寒さに強く、-30度前後まで耐えることができますが、年平均気温が6～14度が育つ条件です。日当たりが良く、肥沃な大地が適します。</p>

<p>植え穴は根鉢の3倍ほどの大きさに掘り、堆肥を入れておきましょう。その後、堆肥の上に掘り上げた土をかぶせます。</p>

<p>リンゴは自分の花では受粉できませんので、結実しやすい品種の組み合わせを隣接して植える必要があります。確実に実をつけるには、人工受粉をします。</p>

<h2>青森産りんごの品種</h2>

<p>ふじと同じ青森産りんごの品種の一例です。</p>

<ul>

<li>ジョナゴールド</li>

</ul>

<h2>外部リンク</h2>

<table>

<tr>

<th>リンゴ（林檎/りんご）の品種一覧：旬の果物百科</th>

<td><a href="http://foodslink.jp/syokuzaihyakka/syun/fruit/fuji.htm">http://foodslink.jp/syokuzaihyakka/syun/fruit/fuji.htm</a></td>

</tr>

<tr>

<th>サンふじ｜品種紹介｜りんご情報局</th>

<td><a href="http://vegemart.net/apple/kind/12_sf.html">http://vegemart.net/apple/kind/12_sf.html</a></td>

</tr>

</table>

</body>

</html>

サンプルコードのブラウザ確認はこちら>>

ブラウザ表示画面

上記のソースコードやブラウザ画面を参考にしながら、下記の説明を読んでいただければと思います。

h1~6（heading）

見出しに使用するタグです。h1タグは特に重要です。見出しをつけなくてもページは作れますが、見出しがあることで、内容にまとまりができて記事が読みやすくなります。また検索エンジンに記事の内容を正確に伝える必要もあるので、見出しは適切に使いましょう。

p（paragraph）

本文中の段落です。通常の文章はPタグを使います。hタグの下に配置すると良いです。

br（break）

文章を改行するときに使用します。

a（anchor）

リンクタグです。アンカーとも呼ばれます。内部ページ、外部ページどちらへのリンクもこのタグを使用します。

img（image）

画像を表示させるためのタグです。画像へのリンクURLを記述することで画像を表示させます。検索エンジンはページの情報を「文字」で判断しています。画像ばかりのページでは、ページの内容が理解できません。テキストと画像はバランスよく使用しましょう。またimgタグには、alt属性があり、ここに画像の種類や内容を記述することで、検索エンジンに画像の内容をテキストで伝えられます。必ず設定しておきましょう。

ul（unorder list） li（list）

リストタグです。箇条書き、数字順での説明などに使用します。数字順にする場合は、ulの箇所をolにします。liタグ単体では使用しません。必ずul、olで囲います。

table（table）

表で情報を表示するためのタグです。table要素単体では利用できません。tr、th、td要素と組み合わせ利用します。

divタグ

入れ物のように使用するタグです。ページをブロックで区切る役割を持っています。今回は使用していませんが、とても良く使うタグです。次回のCSSを説明する記事で詳しく説明します。

spanタグ

インライン要素のタグで、主にテキスト情報に使用されます。単体ではなんの意味も持ちません。CSSを使用するためのタグです。こちらも次回説明します。

まとめ

すこし長くなってしまいましたが、HTMLタグ入門【初心者向け_ホームページ作成の基本】いかがでしたでしょうか。実際にページ作成でよく使うタグは以外と少ないです。難しいという印象を持っている方にとって、ブログ更新やWebページ作成などの助けになれば嬉しいです。

次回は、今回説明できなかった、HTML5から加わった新しい要素（section,article,aside,nav,hgroup,header,footerなど）とCSSの説明します。

今回作成したHTMLファイルを基にして、通常私たちが見ているデザインされたWebページがどのように作成されているのか？実践的な記事にしたいと思います。

それではまた次回！

CodeCamp（コードキャンプ）

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスをご紹介します。
（*日経トレンディ別冊調べ：調査日 2016年10月31日）

高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

■こんな方におすすめ
・エンジニアやIT系の仕事に転職したい方
・フリーランスとして働きたい方
・忙しくてスクールに通う時間がつくれない方
・今の仕事にWebを活用したい方

■サービスのメリット
・オンラインで365日/7時〜24時迄、時間と場所を選ばずに学習できる
・レッスンは全て受講生に合わせたマンツーマン
・講師は全て現役のエンジニア
・300社以上が法人研修として導入（LINE、ガンホー、セプテーニ、ニトリなど）
・プログラミング習得後の活躍（就職/転職）を無料で支援