頻出のタグ説明

HTMLのコーディングにおいて、頻繁に使用されるタグがあります。
今回は、そんな頻出するタグについて説明していきます。

頻出のタグを理解していこう！

<h1>〜<h6>（見出し）タグ

<h1> / <h2> / <h3> / <h4> / <h5> / <h6> は見出しを表示するためのタグです。
<h1>が最も重要で大きな見出しであり、<h6>が最も小さな見出しです。
SEOやアクセシビリティに影響を与えることがあるので、適切な見出しレベルを選択することが重要です。

• <h1>タグ
  
  コンテンツのテーマを表します。
  <title>タグと本質的な役割が同じであるため、似通った内容になっても問題ありません。
  ※使い方
  
  • 1ページで1つだけにする。
  • 見出しタグの中で一番最初に使う。
  ※例

  See the Pen 260_頻出のタグ説明_001 by Yugo Harima (@yh-dezadezi) on CodePen.
• <h2>タグ
  
  h1の次に重要なテキストに使用します。（大見出し）
  ※使い方
  
  • 1ページ内で何回も使うことができる。
  • 目次の章にあたる部分が該当。
  ※例

  See the Pen 260_頻出のタグ説明_002 by Yugo Harima (@yh-dezadezi) on CodePen.
• <h3>タグ
  
  h2の中のポイントとなるテキストに使用します。（中見出し）
  ※使い方
  
  • 1ページ内で何回も使うことができる。
  • 直前のh2のポイントになる部分
    （h2内のテーマが複数になる場合に利用）。
  ※例

  See the Pen 260_頻出のタグ説明_003 by Yugo Harima (@yh-dezadezi) on CodePen.
• <h4>~<h6>タグ
  
  h3で内容がまとまらないときに、補足的に使用します。（小見出し）
  ※使い方
  
  • 1ページ内で何回も使うことができる。
  ※例

  See the Pen 260_頻出のタグ説明_004 by Yugo Harima (@yh-dezadezi) on CodePen.

<div>タグ

<div>タグは、HTMLで汎用的なコンテナ（コンテンツの区分け）を作成するためのブロックレベル要素のタグです。特定の意味を持たないため、レイアウトやスタイルの適用、グループ化など、様々な目的で使用されます。

• ブロックレベル要素
  
  <特徴1>
  見出し・段落・表など、文書を構成する基本となる要素で、一つのかたまり(ブロック)に意味や役割を与える要素が分類される。一般的なブラウザでは要素の前後が改行される。
  <特徴2>
  ブロックレベル要素の中には、ブロックレベル要素もインライン要素も配置できる。
  ※例外もあり
  <よく使用されるブロックレベル要素>
  <div>タグ / <p>タグ / <h1> ~ <h6>タグ / <ul>タグ・<ol>タグ・<li>タグ etc.

<p>タグ

<p>タグは、段落を定義するためのタグです。
“paragraph” の略称であり、Webページ内のテキストを段落ごとに区切るために使用されます。
<p>タグは、Webページのコンテンツを整理し、読みやすさや理解しやすさを向上させるのに役立つ重要なHTML要素です。

<span>タグ

<span>タグは、インライン要素の1つで、テキストやその他の要素をグループ化するために使用されます。<span>タグ自体には特定の意味がなく、主にスタイルに対して適用されます。

• インライン要素
  
  <特徴1>
  主にブロックレベル要素の内容の一部となる要素で、特定の単語や、文章に意味や役割を与える要素や、画像などが分類される。要素の前後で改行されない。
  
  <特徴2>
  インライン要素の中には、インライン要素は配置できるが、ブロックレベル要素を配置することは出来ない。
  ※例外もあり
  
  <よく使用されるインライン要素>
  <span>タグ / <img>タグ / <a>タグ etc.

<strong>タグ

<strong>タグは、特定のテキストを目立たせて強調するために使用されるタグです。
通常、<strong>タグで囲まれたテキストを太字で表示しますが、強調表示の方法はブラウザやCSSに依存します。

<ul>タグ・<ol>タグ・<li>タグ

• <ul> (Unordered List) タグ
  順序のないリストを作成するために使用されます。
  通常、項目は順序に関係なく並べられます。リスト内の各項目は <li>タグで囲まれます。
• <ol> (Ordered List) タグ
  順序のあるリストを作成するために使用されます。
  リスト内の項目は番号や文字で順序付けされます。リスト内の各項目は <li>タグで囲まれます。
• <li> (List Item) タグ
  リスト内の各項目を定義し、<ul>や<ol>タグ内で使用されます。

<img>タグ

<img>タグは、Webページに画像を表示するために使用されるタグです。
<img>タグは空要素であり、開始タグと終了タグの両方を持ちませんが、代わりに属性を使用して画像のソースや表示方法を指定します。

<a>タグ

<a>タグは、Webページ内で他のWebページにリンクするために使用されるタグです。
リンクは、別のWebページ、同じWebページ内の別の場所、ファイル、電子メールアドレスなどへのナビゲーションを可能にします。

以上が、「頻出のタグ説明」についての説明でした。
頻繁に使用されるタグ以外にもたくさんのタグがあります。
また、働く上では必要となる知識ですので、気になる人は調べてみてください。

次のステップで、「 コピーライトとは」について説明していきます。