Home / ネットワーク・IT / IT基礎知識 / プログラミング / ウェブサイト作成の基本!使用目的別でみるHTMLタグ一覧【全74つ】

ウェブサイト作成の基本!使用目的別でみるHTMLタグ一覧【全74つ】

Pocket

HTMLタグはマークアップ言語と呼ばれるもので、「Hypertext Markup Language」を略した言葉です。ほとんどのウェブサイトはこのHTMLと、デザインを担うCSSによって作成されております。

HTMLを使いこなすことによって、ページがどのページであるのかといったヘッダー情報やサイトのコンテンツを豊富な表現で作ることが可能です。

こちらの記事では基本的なHTMLのタグについて網羅的にご紹介していきます。これからHTMLを学びたい方や、サイト作成中でHTMLのタグ一覧表が欲しい方はこちらの記事を参考にして頂ければと思います。

スポンサーリンク

【目的別】HTMLタグ一覧

HTMLとはウェブサイトを作成するためのマークアップ言語です。HTMLには各機能を備えたタグというものが用意されており、タグを使ってコードを書いていくことによってリンクを貼ったり表を作ったりすることができます。

実際にデザインをするためにはCSSなどの別の言語を使う必要がありますが、このHTMLとCSSを使えば静的なウェブサイトを作ることができます。

まずはHTMLタグの種類について、どのようなものがあるのか確認していきましょう。

リンクタグ5個

リンクタグは、リンクを貼るためのタグになります。リンクタグは別ページへのリンクを貼ったり、head間で使用して別ファイルとの関係性を示すことができます。

  1. <a>リンクを貼るためのタグ。サイト名のような形で使う
  2. <map>イメージマップを作成して一つの画像に複数リンクを貼るためのタグ
  3. <link>head間で使用するタグ。文章ファイルと関連する別ファイルを指定し、その関係性をrelによって定義する
  4. <base>head間で使用する。相対パスを記述する場合の基準となるURLを指定する
  5. <area>map間で使用する。イメージマップ内でリンク領域とリンク先を指定する

テキスト内容タグ14個

テキスト内容タグはテキストの内容が意味するものを伝えるためのタグになります。太字にして強調するためのタグや、別サイトからの引用であることを示すタグがあります。

  1. <strong>テキストを強調して表示するためのタグ。下部のemタグと比較してより強い強調を意味する
  2. <em>テキストを強調して表示するためのタグ。strongタグと比較すると弱い強調を意味する
  3. <blockquote>
    引用箇所
    であることを示すタグ。範囲内で改行することもできる
  4. <q>引用箇所であることを示すタグ。範囲内で改行することはできない
  5. <cite>引用箇所であることを示すタグ。書名や著作者に対して使用する
  6. <def>言葉を定義したことを示すタグ。
  7. <del>削除した文章であることを明示するタグ。打ち消し線が表示される
  8. <ins>追加した文章であることを明示するタグ。下線が表示される
  9. <address>連絡先を示すタグ。タグ内で住所やメールアドレス、電話番号を記載する
  10. <var>テキストが変数名であることを示すタグ
  11. <abbr>テキスト内容が頭文字以外を使った略語であることを示すタグ
  12. <acronym>テキスト内容が頭文字を使った略語であることを示すタグ
  13. <samp>テキスト内容がプログラム実行後のサンプル結果であることを示すタグ
  14. <kbd>テキスト内容がキーボードなどから入力される内容であることを示すタグ

テキスト表現タグ16個

テキスト表現タグは、フォントの指定やカラー、大きさ、太さ、書体などを指定することのできるタグです。打ち消し線を引くなどは、CSSで表現するよりもHTMLで示した方が簡単ですので覚えておくと便利です。

  1. <font>フォントの種類や文字の大きさ、カラーを指定するタグ
  2. <basefont>基準となるフォントの種類や文字の大きさ、カラーを指定するタグ
  3. <big>テキストを少し大きくするタグ
  4. <small>テキストを少し小さくするタグ
  5. <b>テキストを太字にするタグ
  6. <i>テキストを斜め(イタリック体)にするタグ
  7. <u>テキストに下線を引くタグ
  8. <s>,<strike>打ち消し線を表示するタグ。どちらも同じ用途で使われるが、strikeの方が多くのブラウザでサポートされている
  9. <sub>下付き文字(下に半個分下がった文字)にするタグ
  10. <sup>上付き文字(上に半個分上がった文字)にするタグ
  11. <tt>文字の幅を均等にするタグ
  12. <ruby>ルビ振りの範囲を示すタグ
  13. <rb>ルビを振る対象の文字を指定するタグ
  14. <rp>ルビの内容を囲む記号を示すタグ
  15. <rt>ルビの内容を示すタグ
  16. <br>改行するタグ

次ページ:画像動画関連

1 2

スポンサーリンク

スポンサーリンク

Check Also

【入門編】Androidアプリ開発のためのおすすめ勉強法全8選

Androidのアプリを作って …

Facebookでのご購読が便利です