HTMLタグとHTML要素は何ですか？

これら2つの用語の違いがあります

どのような業界や職種と同様、ウェブデザインはすべて独自の言語を持っています。 業界に参入して仲間と話し始めると、間違いなくあなたに新しい用語やフレーズが出てくるでしょうが、仲間のWeb専門家の舌が流れます。 あなたが聞く用語の2つは、HTMLの "タグ"と "要素"です。

これらの2つの言葉が聞こえると、あなたはそれらが幾分交換可能に使用されていることに気付くかもしれません。 そのため、多くの新しいWeb専門家がHTMLコードの作業を開始するときに持つ1つの質問は、「HTMLタグとHTML要素の違いは何ですか？」です。

これらの2つの用語は意味が似ていますが、実際には同義語ではありません。 では、これら2つの用語との類似点は何ですか？ 簡単な答えは、タグと要素の両方がHTMLを記述するために使用されるマークアップを参照することです。 たとえば、

タグを使用して段落を定義したり、要素を使用してリンクを作成したりしているとします。 多くの人がタグと要素を同じ意味で使用しています。あなたが話しているウェブデザイナーやデベロッパーは、あなたが意図したことを理解するでしょうが、実際には2つの用語に若干の違いがあります。

HTMLはマークアップ言語です。つまり、最初にコンパイルする必要がない人が読むことができるコードで記述されています。 言い換えれば、ウェブページ上のテキストは、これらのコードで「マークアップ」され、テキストをどのように表示するかに関するウェブブラウザの指示を与える。 これらのマークアップタグはHTMLタグそのものです。

HTMLを書くとき、あなたはHTMLタグを書いています。 すべてのHTMLタグは、以下を含む多くの特定の部分で構成されています。

• より小さい記号<
• どのタグが書き込まれているかを決定する単語または文字
• name = "value"のペアの形式で任意の数のオプションのHTML属性
• そして最後に大なり記号>

たとえば、次のようなHTMLタグがあります。

これらはすべてHTMLの開始タグであり、オプションの属性は追加されていません。 これらのタグは以下を表します。

• - 段落を定義します。

• - ページをHTMLとして定義する
• - 除算を定義します。

以下はHTMLタグです。

• これらの例にはすべて、開始HTMLタグに追加された属性が含まれています。

  • は、ID属性を含む順序付けられていないリストです
    • 部門にはクラス属性があります
    • アンカー要素またはリンク要素には、「href」属性が含まれています
    • 「src」属性を持つ画像タグ

    アンカータグとイメージタグの属性は実際にはオプションではありません。これらのタグは適切に表示するために必要です。 あなたはどこに行くべきか（これは "href"と同じです）と表示するもの（ "src"属性が提供するもの）をリンクに伝える必要があります。

    HTML要素とは

    W3C HTML仕様によれば、 要素はHTMLの基本的なビルディングブロックであり、通常、開始タグと終了タグという2つのタグで構成されます 。 これまでは要素を開始する開始タグだけを見てきました。 その要素を終了するには、対応する終了タグを記述します。

    たとえば、paragraph要素の場合は次のように記述します。

    これは一瞬前に見た開始タグと終了タグで構成されています - 。 閉じたタグは実際には開始タグだけ繰り返されますが、 "スラッシュより小さい"の直後に "スラッシュ"が追加されています。

    ほとんどのHTML要素には、開始タグと終了タグがあります。 これらのタグは、Webページに表示されるテキストを囲みます。 たとえば、テキストの段落を書き込むには、ページに表示するテキストを書き込んだ後、次のタグで囲みます。

    これはウェブページに表示したい段落のテキストを書く場所です。

    一部のHTML要素には終了タグがありません。 これらは「空要素」と呼ばれます。 場合によっては、「 シングルトン 」または「ボイド」要素と呼ばれることもあります。 空の要素は、Webページに1つのタグを含めるだけでよく、ブラウザーは何をすべきかを知っているので、使いやすいです。 たとえば、ページに1行改行を追加するには、b
    タグを使用します。

    開始タグのみを含む別の共通要素は、「画像」要素である。 例えば：

    先にこの例を見ましたが、このイメージ要素の終了タグはありません。 ブラウザは単に、このコードを "href"属性で参照されているイメージに置き換えます。 この場合、それは "logo.png"になります。

    一般に、HTML要素またはタグを参照するときは、要素のすべての部分（開始タグと終了タグの両方）を参照していることを示すために、「要素」という用語を使用します。 私は「タグ」を使用していますが、私は実際にはどちらか一方のみを指しています。 これは、この2つの用語の適切な使用です。私はあなたがそれらを適切に使用することをお勧めします - しかし、ちょっとだけスリップして交換すれば、新しいWeb開発者が理解できるでしょう！

    Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：7/21/17