HTMLタグ入門【初心者向け_ホームページ作成の基本】
公開日：2015年7月3日 : ホームページ制作関連
前回は、HTMLとはなんぞや？という基本的な説明をしました。今回は、HTMLタグについての内容です。慣れない内は、よく分からない宇宙語みたいで頭が痛くなりますが、HTMLの仕組み自体はそれ程むずかしくはないので、徐々に慣れていきましょう。
あまり深く考えず、とりあえず「文章をタグで囲えばOK」と思っていれば大丈夫です。
今回は、サンプルコードをもとに使用しているタグを順番に説明していきます。
HTML5で記述
HTMLにはバージョンがあり、現在HTML5が最新です。この記事ではHTML5の記述方法で説明していきます。ちなみに、HTML5は2014年に正式勧告されました。HTML4と比べてタグの記述がシンプルになったので、個人的にはその点が良いなと思っています。
HTML5の特徴
- タグの記述がシンプルになった（doctype,meta,link.style,scriptなど）
- 動画や音声データをこれまで主流だったFlashをを使わずに、HTMLのみで扱える
- 文章構造を明確化できる新しい要素が増えた（section,article,aside,nav,hgroup,header,footerなど）
大きな特徴を紹介しましたが、この辺りのことを初心者の方が気にしだすと、面倒くさくなってしまうので、今はさらっと流して次に行きましょう。
HTML構造
|
1 2 3 4 5 6 7 8 9 |
<!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要素の中に、ページの内容をつくるのみであります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> <meta content="ページ説明" name="description"> <meta content="ページキーワード" name="keywords"> </head> <body> （ここにブラウザの画面に表示される内容を書く） </body> </html> |
要素内のコードについて
要素内に記述している内容を説明していきます。
補足
今回のソースコードにはありませんが、通常ホームページ制作を行う場合は、この他に、css、jsなどのファイル（ホームページの見た目や動きをつくる）を読み込む記述もhead要素に書きます。
※css、jsについては、次回以降の記事でくわしく説明します。
lang属性
|
1 |
<html lang="ja"> |
コードの言語が日本語であることを宣言します。html要素のlang属性に”ja”を指定します。翻訳機能、音声再生機能にも使用されるので、必ず記述しましょう。（英語なら”en”）
文字コード
|
1 |
<meta charset="UTF-8"> |
文字コード（HTML記述形式）を指定します。このコードを指定しないと文字化けの原因になりますので、必ず指定しましょう。日本語であれば、”UTF-8″を使用することが一般的です。（HTML5では”UTF-8″が推奨されています。）
ページタイトル
|
1 |
<title>ページタイトル</title> |
ここにページのタイトルを書きます。ここの内容は、検索結果、ブラウザのタグ、ブックマークの名前などに使用されます。本の表題みたいなもので、検索エンジンもこの情報を１番重要な要素として、検索結果に反映させます。SEO対策でも重要な部分です。ユーザーが検索に使うキーワードを含んだタイトルにすることがポイントです。
ページ説明
|
1 |
<meta content="ページ説明" name="description"> |
description（ディスクリプション）は日本語で「説明」という意味です。文字通りページ説明、概要を記述しまます。SEO的には、この部分は評価の対象となっていませんが、ブラウザの検索結果にタイトルの下に表示される部分なので、ユーザーが読んだときにクリックしたいと思うようなページ説明を書くことが必要です。
ページキーワード
|
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などのソフトを使用してコードを書くことが多いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!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> |
ブラウザ表示画面
上記のソースコードやブラウザ画面を参考にしながら、下記の説明を読んでいただければと思います。
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ページがどのように作成されているのか？実践的な記事にしたいと思います。
それではまた次回！
スポンサーリンク
