HTMLタグ・要素・属性・CSSプロパティの整理 #初心者

概要

HTMLやCSSで使う超基本的な単語をまとめました。
案外スルーして勉強してしまいがちな項目なので、初学者の方と会話していて途中でという顔をされてしまうことがあったためです。

『HTMLタグ』(または単に『タグ』とも)は、HTMLにおいて意味をまとめる区切り記号のことです。
例えば

<div>testing</div>

の<div> (</div>)や

<a href="http://xxx.yyy.com">リンク</a>

の<a href="http://xxx.yyy.com"> (</a>)の部分をそれぞれ「divタグ」や「aタグ」のように呼びます。

この時注目しているタグで囲まれた中身は含まれません。
「divタグ」と言ったら、あくまで<div>と</div>の部分のみを指します。

『HTML要素』は、通常『HTMLタグとその中身』という意味で使われます。
例えば

<body>
  <div>testing</div>
</body>

で「div要素はどれ?」と聞かれたら

<div>testing</div>

が答えです。
つまりHTMLタグとその中身全てを指す文脈では「HTML要素」という言葉が適切です。

タグと要素の違い

<section>
  <div>
    <p>何かの文章</p>
  </div>
  <aside>
    <span>補足事項</span>
  </aside>
</section>

上記のようなHTMLで、

「asideタグ」を削除すると

asideタグを削除

<section>
  <div>
    <p>何かの文章</p>
  </div>
    <span>補足事項</span>
</section>

となりますが、「aside要素」を削除すると

aside要素を削除

<section>
  <div>
    <p>何かの文章</p>
  </div>
</section>

となります。

こういった文脈で認識のズレが起きてしまいがちなので注意しましょう。

HTMLタグの後ろに、半角スペース区切りで書かれた文字列のことです。
通常HTMLタグに補足的な情報を与える目的で使われます。

例えば

<div class="sample">何かの文章</div>

のclassのことをclass属性と呼びます。

<a href="https://www.google.co.jp/" title="Google Japan">Google Japan</a>

この場合はaタグにhref属性とtitle属性がついています。

CSSの指定箇所のうち、":"を挟んで左側の部分を指します。

例えば

p { text-align: center; }

という「CSSではtext-align属性にcenterが指定されている」というような言い方をします。

属性のことを英語で『プロパティ』と呼ぶこともあるので、プロパティと聞いた場合も同じものを指すものと考えて下さい。

一方、属性に対して指定されている値は属性値(プロパティ値)と呼びます。
これはHTML属性でもCSS属性でも同じです。
HTMLなら"="の後ろにあるダブルクオーテーション(")でくくられた中身を、CSSなら":"を挟んで左側の部分を指します。

<div class="sample">何かの文章</div>

では「class属性の属性値はsample」と言いますし

p { text-align: center; }

では「text-align属性の属性値はcenter」などと言います。

カンタンに『属性は左、属性値は右』とでも覚えておきましょう。