/*サーチコンソール*/ /*google adcense*/

タグ中の要素、属性とは?HTMLの基本的な書式

2020年1月7日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

このブログは、HTMLについて初心者向けに解説しています。その中で、「タグ」や「要素」などといった用語がよくでてきます。これらはHTMLを説明する上で必須の用語です。

しかし、HTMLをこれから始めようという人にとっては、タグや要素についてよく知らないと思います。これらの違いについて理解した上でHTMLを勉強していかないと、後々よくわからなくなってしまいます。この記事ではHTMLにおいて使用するタグや要素、属性について解説していきます。

HTMLの基本的な書式
この記事の要点まとめ
HTMLってなに?
HTMLはWebサイトを構成する上で欠かせないマークアップ言語。
HTMLの基本的な書式
要素の中にはタグ、要素名、属性、属性値などが入る。
1.要素名
開始タグと終了タグの間に入る内容に対して意味を持たせるもの。
2.開始タグ
「ここからこの要素で始める」という意味を持ち、中には要素や属性、属性値が入る。
3.終了タグ
開始タグの要素名の前に/を書いたもので、「ここでこのタグは終わる」という意味を持つ。
4.属性
属性は要素名に対して詳細な意味付けをすることができる。
5.属性値
属性値は属性に対してさらに詳細な意味付けをすることができる。
6.内容
内容は、開始タグと終了タグで挟まれた部分のことを指す。
HTMLの基本は<開始タグ>内容</終了タグ>
HTMLの基本書式は『<開始タグ>内容</終了タグ>』だが、全てがこれにあてはまるわけではない。

HTMLってなに?

HTMLとは、「Hyper text markup language(ハイパーテキストマークアップランゲージ)」の略称で、Webサイトを作成するうえで欠かせない言語です。分解して考えると、「Hyper text」は文書間をリンクするハイパーリンク、「Markup」は文書が段落なのか見出しなのかなど各部分の働きに対して目印をつけるものです。このHyper textとMarkupを組み合わせたLanguage(言語)が、「HTML」と呼ばれます。

現在インターネット上で公開されているWebページのほとんどは、この「HTML」で構成されたものです。もちろん、このブログもHTMLで構成されています。

ちなみに「HTMLはプログラミング言語だ」と思っている人もいますが、厳密にはプログラミング言語ではありません。HTMLは「タグによって文書の情報を出力する言語」で、マークアップ言語と呼ばれます。ですが、Web系のプログラミングをする上でHTMLは必須ですので、このブログのカテゴリーなどではHTMLをプログラミング言語として扱っています。

HTMLの基本構造などについて詳しく知りたい方は[初心者向けHTMLの基本構造]の記事をご覧ください。

HTMLの基本的な書式

HTMLでは『<p>』のように、不等号(<,>)で囲んだものを「タグ」と呼びます。タグには開始タグと終了タグがあり、それら全体を「要素」と呼びます。開始タグの中には要素名の他、属性や属性値といったものが入ることもあります。これらについて詳しくみていきましょう。

この記事では以下のコードを例に解説していきます。このコードについては[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。

※CodePenの使い方がわからない方はこちら

See the Pen SplaTech 属性値:blank by Kosei@SplaTech (@pompom_stk) on CodePen.

—参考画像—
ここからはこちらの画像を参考に読んでください。

HTMLの基本書式
クリックで拡大

1.要素名

要素名は、開始タグと終了タグの間に入る内容に対して意味を持たせるものです。今回の例で使用している要素名は『a』で、内容に対してリンクを張ることのできるものです。また、開始タグから終了タグまでのコード全体を「要素」と呼びます。今回の例の場合は、「a要素」と呼びます。

タグ内に要素名を記入するには、大文字でも小文字でも可能です。

2.開始タグ

要素名を不等号(<,>)で囲んだものを「開始タグ」と呼びます。「ここからこの要素で始めますよ」という意味を持ちます。

今回例に挙げたa要素では、開始タグ内に属性や属性値が入っています。(属性・属性値については後ほど説明します)ですが、「<p>」のように、開始タグ内に要素名を入れるだけで使える要素もあります。p要素は属性名を指定しなくてもいいですが、指定することもできます。しかしa要素は開始タグ内に属性を入れないと使用できません。このようなタグは他にもあるので、使う際は注意しましょう。

3.終了タグ

終了タグは、開始タグの要素名の前にバックスラッシュ(/)を入れたもので(これは書き方だけの話で、開始タグとは全く別物です)、「</a>」のようの書きます。「開始タグからここまでで、この要素は終わりますよ」という意味を持ちます。

画像を表示させるimg要素のように、終了タグを持たない要素(空要素)もあります。空要素は『<要素名>』のように書くか、『<要素名/>』のように不等号の閉じ括弧前にバックスラッシュを付けて書くことができます。このブログでは、前者の『<要素名>』のように記述しています。

4.属性

属性は要素名に対して詳細な意味付けをすることができます。属性は一つの要素に対して複数指定することが可能で、記述の際は属性名の前に半角スペースで区切って書きます。要素によって使用できる属性は異なりますので注意しましょう。

今回の例では、「href」と「target」が属性に当たります。それぞれの役割として、hrefはリンク先のURLを指定、targetはリンク先ファイルを表示するために使用するウィンドウの指定をすることができます。

属性も大文字・小文字どちらでも記述すること可能ですが、このブログでは小文字で記述していきます。

5.属性値

属性値は、それぞれの属性に対してさらに詳細な意味付けをすることができます。『属性="属性値"』のように記述します。属性の後に=を付け、その後にダブルクオーテーション(”)で属性値を囲んで指定しましょう。

今回の例では、hrefに対する属性値は「https://pompom-stk.com/(このブログのURL)」、targetに対する属性値は「blank」です。URLはリンク先のURLを指しており、blankは新規のウィンドウでファイルを開くことを指しています。hrefやtarget、blankについてこの記事では深く解説しませんので、これらについて知りたい方は[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。

それぞれ要素から意味を辿っていくと、
a(リンク先)のhref(URL)はhttps://pompom-stk.com/(このブログURL)です」
a(リンク先)をtarget(表示するためのウィンドウ)はblank(新規のウィンドウ)です」
となります。

これは基本的にどの要素やタグでも同じで、「要素名 属性="属性値"」は「(要素名)の(属性)は(属性値)」のように考えてください。

属性値も大文字・小文字でちらでも記述することが可能です。

6.内容

内容は開始タグと終了タグで囲まれた部分のことを指します。今回の例でいくと「SplaTech」というテキストが内容です。a要素はリンク先の指定を行う要素で、その内容であるSplaTechというテキストをクリック(タップ)すると、指定したリンク先を新規ウィンドウで開くことができます。

href属性は省略してしまうとURLを指定できないため、正常にリンクの設定ができません。しかしtarget属性は省略することが可能です。もしtarget属性を指定しなかった場合、指定したリンク先は新規ウィンドウではなく、現在使ってあるウィンドウで開かれます。これについて詳しく知りたい方は[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。

先ほど「img要素は終了タグを持たない空要素」だと説明しましたが、タグで囲まれていないので、空要素は内容を持ちません。内容がないから空要素と呼ばれています。

また、内容の中に別のタグが入ることもあります。下に別の例として「ul要素に入るli要素」を載せます。もし余裕がなかったら、今は無視してもらって構いません。

See the Pen 親要素と子要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

今回は要素の説明は省きます。ulやliについてはまた別記事で解説していきますので、今は深く考えなくて大丈夫です。

この例でいくと、『<ul><li>内容</li></ul>』のようにli要素がul要素に囲まれています。ulのように囲んでいる要素を「親要素」、囲まれている要素を「子要素」と呼びます。さらに子要素の中に別のタグが入る場合、それはulから見て「孫要素」となります。

HTMLの基本は<開始タグ>内容</終了タグ>

基本的なHTMLの書式について解説していきました。『<開始タグ>内容<終了タグ>』というのが基本ですが、全てがこれに当てはまるわけではありません。中には終了タグのない空要素も存在します。ですがほとんどの要素はこの基本にそっていますので、必ず覚えておきましょう。

開始タグの中には属性や属性値が入るということもしっかりと理解しておきましょう。これらが入る場合の開始タグは、『 <要素名 属性="属性値">』となります。今回例で挙げたように複数の属性が入る場合もあります。

要素、属性、属性値は全て大文字で書いても小文字で書いても問題ありません。ですがこれらは基本的に小文字で記述することをおすすめします。この記事で深く説明はしませんが、他のプログラミング言語を使うとき、HTMLを小文字で書いた方がわかりやすいためです。始めたばかりの今から、「HTMLは小文字で記述する」ということを自分の中で決めておきましょう。