Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - タグと要素についての解説

タグと要素についての解説

続きまして『タグ』と『要素』についての解説となります。

まずタグってなにそれ美味しいの？ってお話なんですが、タグとは『<body>』のように『<>』で囲まれたものを指します。HTMLはこのタグを使って意味付けや色々な機能を付加していきます。

タグには『開始タグ』と『閉じタグ』が必要な場合もあり、開始タグは『<body>』のように『<』と『>』で囲み、閉じタグはスラッシュをつけた『</』と『>』で囲みます。『</body>』等が該当しますね。閉じタグが必要ないタグの代表としてimgタグというものがあります。先ほどのHTMLソースにそれっぽいところがありますね。閉じタグの必要がない(内容をもたない)タグの事を『空要素タグ』といいます。

続いて要素についてですが、要素とはタグに囲まれたところ全体(タグ含む)を指します。ちょっとわかりづらいので以下の画像を参考にしてください。

タグと要素の違いはこんな感じになります。参考書などでよく出てきますので覚えておくと良いです。

そしてHTMLソースは半角英数字で記述します。『＜』のように2バイト文字で記述してしまわないように気をつけましょう。

では前回作成したデータを用意して頂きたいので、「作ってないよん、めんどくせー」という方はこちらからダウンロードして下さい。

前回作ったHTMLソースですが、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img alt="サンプル画像です" src="https://wp-p.info/reps/html-beginner/img/sample.jpg">

</body>
</html>

こちらで使用したタグについて各々解説していきます。

<!DOCTYPE html>

『<!DOCTYPE html>』はHTML5のDOCTYPE宣言(ドックタイプ宣言)と呼ばれるものです。「Document Type Definition」の略だったりします。「これはHTML5で書いてあるぜぇ」って宣言している感じですね。

これについては丸コピしちゃってOKです。HTML5を記述する場合は必ず『<!DOCTYPE html>』を入れる、といった感じで覚えておきましょう。

<!DOCTYPE html>

<html lang="ja">

続いて、『<html lang="ja">』です。

これはhtml要素のlang属性の値に『"ja"』を指定して、ドキュメントの言語が日本語であることを宣言しています。ちょっと分かりづらいのですが『</html>』が閉じタグとなりますのでこちらも忘れないようにしましょう。『<!DOCTYPE html>』とセットで丸コピしてしまって大丈夫です。

<!DOCTYPE html>
<html lang="ja">

</html>

「ちょっと待てドキュメントってなんじゃ！」って思った方いるかと思います。これは直訳で文書、書類という意味です。HTMLドキュメントというとHTMLで書かれた文書の事で、要するにHTMLの中身って事ですね。Web業界やプログラム業界ではよく出てくる単語です。

WindowsOSやMacOSでは『MyDocument』や『Document』というフォルダが最初からありますよね？あれは『私の書類フォルダ』という意味で、「汎用性の高い色々なデータをここに入れてね！」という意味で最初から作られていたフォルダだったりします。

<head>

続いて『<head>』です。これは色々な状況で中身を変更することが多いタグになります。

これにも閉じタグがあり『</head>』が該当します。『<head>』と『</head>』に囲まれた部分がheadタグの中身となります。

headタグはどういう意味のタグかというとドキュメント(HTML文書)の『ヘッダ情報』を書くタグになります。

ヘッダ情報とはそのデータ自体に関わる情報という意味で「このHTMLはこれこれこういう文法で書いていて、こうやって表示してね」というような内部的な指示を書く為のタグがheadタグです。

headタグの中身を見て下さい。

<head>
<meta charset="utf-8">
<title></title>
</head>

色々なタグが入っていますね。それぞれの中身を解説していきたいと思います。

まずは『<meta charset="utf-8">』というタグですが、これはmetaタグ(メタタグ)と呼ばれるもので、そこにcharsetという属性をつけて、値をutf-8とすることで「文字データをutf-8で読み込んでね」って指示しています。metaタグは閉じタグを用意する必要はありません。

属性や値、metaタグについての詳しい情報は結構複雑なので先の記事で解説していきます。

続いて『<title></title>』です、これはtitleタグと呼ばれるものでページのタイトルとなりますね。タイトルはブラウザのタブあたりに出てくる文字の事です。

ちょっとだけHTMLを書いてみましょう。先ほどのHTMLソースのtitleタグの中身に『Hello World』と書いて保存してブラウザで表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>

<img alt="サンプル画像です" src="https://wp-p.info/reps/html-beginner/img/sample.jpg">

</body>
</html>

こんな感じですね。どうでしょう？ブラウザのタイトル部分に『Hello World』と表示されましたか？表示されていれば大成功です。titleタグについての詳しい解説は先の記事でもやっていきます。

このようなブラウザの中身として表示されない指示部分を書いておくのがheadタグの中身になりますね。metaタグは色々なことを設定できるので中身を変更する機会は多いです。

タイトルはブラウザで表示される部分となってしまいますが、HTMLの主要項目であるbodyタグ以外の別のところなのでヘッダ情報のひとつとして扱われています。

<body>

続いてその下のbodyタグについての説明です。bodyタグの中身はブラウザで表示されるものとなります。headタグとはちょうど逆のような形になりますね。表示させたい項目は基本的にbodyタグの中に記述します。

こちらも中身を見てみましょう。

<body>

<img alt="サンプル画像です" src="https://wp-p.info/reps/html-beginner/img/sample.jpg">

</body>

bodyタグの中にひとつタグがありますね。これはimgタグと呼ばれており、画像を表示させるためのタグです。そのタグのなかに『src="~"』という表記があるかと思いますが、これは『src属性』と呼ばれるもので、ここで画像の取得先を指定することができます。

前回のHTMLソースで何もないところからいきなり画像が表示された秘密は『src="~"』にあります。imgタグとsrc属性を使って今みなさんが閲覧している弊社のサーバーに置いてある画像データを取得して表示していたわけです。imgタグの詳細については先の記事で解説していきますね。

以上で大まかな解説が完了しました。ちょっと慣れないと難しいですよね。というわけでまとめます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

上記はドキュメントの中身が空となっている基本的なHTMLタグの構成です。シンプルなウェブサイトを作成する場合はこれをコピペしてしてから作業に入ればOKです。

というわけで基本的なところのHTMLタグの解説は以上となります。次の記事では『コメント』について解説していきたい思います。

引き続き頑張っていきましょう。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

WebProgrammingPortalウェブプログラミングポータル