【要素と属性】マークアップの基礎知識として知っておきたいタグの用語を解説します

アイキャッチHTML03

こんにちは。ヒロユキです。

HTMLには、たくさんのタグが存在します。

これらのタグには「要素」や「属性」といった用語があって、これらを正しく理解しておくとコードの仕組みを理解するのに役立ちます。

マークアップの基礎知識として、タグの用語も知っておきましょう。

マークアップの基礎知識として知っておきたいタグの用語

小松田くん

「要素」…。「属性」…。なんだかムズかしそう。

尾地ヒロユキ

用語を覚えるのって大変だよね。でも、コードの仕組みを理解できるメリットもあるんだぞ。

タグの用語はコードの記述に迷ったときに検索したり、仕組みを理解するためにも理解しておいたほうがいいのです。

実際のタグやソース画面を見ながらおぼえていきましょう。

開始タグと終了タグ

HTMLは、いろんな種類の「< >(タグ)」が集まって構成されます。

例えば見出しに使う「<h></h>(hタグ)」で、タイトルの「つみきのーと」を表現してみます。↓

<h1>つみきのーと</h1>

この場合は、hタグで「つみきのーと」を囲みます。

<h1>つみきのーと</h1> 開始タグ

緑色の<h1>が「開始タグ」。

<h1>つみきのーと</h1> 終了タグ

青色の</h1>が「終了タグ」です。「終了タグ」の特徴は「/(スラッシュ)」が付いてることですね。

開始タグと終了タグで、表現したいコンテンツ(!)を囲むのが基本です。

コンテンツ

<h1>つみきのーと</h1> コンテンツ

オレンジ色の文字列(今回は「つみきのーと」)のこと。開始タグと終了タグに囲まれた、文字列の名称。

要素とマークアップ

タグの「要素」とは、「開始タグ+コンテンツ+終了タグ」の全てをひっくるめたもののこと。

<h1>つみきのーと</h1>要素

そして今回のように、コンテンツをタグで囲んで表現することを「マークアップ」と呼びます。

空要素(からようそ)

要素には、</(終了タグ)>がない「空(から)要素」と呼ばれるものがあります。

例えば画像を表現する「<img>(イメージタグ)」には、</img>という終了タグは存在しません。

「photo.png」という画像ファイルを、Webページ上に表現したい場合は↓

<img src="img/photo.png">

↑こういった記述になります。終了タグは、いらないんですね。

「hタグ」のように囲むコンテンツが無い要素なので、「からっぽ」の要素という意味の「空要素(からようそ)」と呼ばれます。

尾地ヒロユキ

終了タグは要素を閉じるから「閉じタグ(とじたぐ)」って呼ぶこともあるぞ。

親要素と子要素

HTMLでは、下記のようにタグを段階的に表記します。

<!DOCTYPE html>
<html lang="ja">     ←1段目
 <head>              ←2段目

 </head>
 <body>
  <img src="img/photo.png">
  <h1>つみきのーと</h1> ←3段目
  <p>プログラミングと仲良くなるブログ</p>
 </body>
</html> 

この段階を、一段降りると「子要素」、一段登ると「親要素」となります。

例えば、<html lang=”ja”>の子要素は<head>タグ。

<h1>の親要素は<body>タグといった具合です。

「CSS」を使って何らかの効果をタグに付与する場合、その効果は「親要素→子要素」の順に継承されます。

属性名と属性の値

空要素の場合は、表現方法に「属性名」と「属性の値」を使います。

<img>タグの場合、imgのあとに記述された情報のことを「属性」と呼びます。

<img src="img/photo.png"> 属性

さらに、属性の左端にある「src(ソース)」のことを「属性名」。

<img src="img/photo.png"> 属性名

属性名に割り当てられた情報を、「属性の値」と呼びます。

<img src="img/photo.png"> 属性の値
尾地ヒロユキ

属性の値は「””(ダブルクォーテーション)」で囲むことが多いみたいだね。

タグの用語を知っておこう まとめ

全部まとめて「要素」だよ
  • <h>→開始タグ
  • つみきのーと→コンテンツ
  • </h>→終了タグ
この工程が「マークアップ」
  1. 「〇〇」を表現したい。
  2. タグを使って、コンテンツを囲む
  3. 「〇〇」の表現に成功

タグに付与された効果は、親要素→子要素に継承される。

空要素には、終了タグが存在しない。

属性=属性名に属性の値を割り当てたもの。

おつかれ様でした。すこし覚える内容が多かったですね。

しかし、今回紹介したタグの用語はごく一部で基本的なものです。

あとは実践の中で、活用しながら覚えていきましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪