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

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

Pocket

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

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

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

スポンサーリンク

HTMLタグとは


ウェブサイトを作成する上で必須知識となるHTML。HTMLファイルを構成するHTMLタグとは一体どのような働きをするものなのでしょうか。

命令を出すための書式

タグとは命令を出すための書式です。こういう働きをしてほしいという指示をコンピューターに出すことを意味します。HTMLにおいてもタグは同じ使い方がされていますから、HTMLタグは ウェブサイトを動かすための命令 というイメージが適切かと思われます。

タグはで囲むことで機能します。原則として半角英数字で記述する必要があります。全角で入力した場合はエラーが発生してしまい正しく機能しません。日本語入力と並行して行う場合は切り替え忘れのないよう注意してください。

開始タグと終了タグを対にして使う

基本的にタグは 開始タグ終了タグ の二つを使うことになります。終了タグには「/」を入れることでタグが終わりであることを示します。

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

titleタグはそのページのタイトルを指定することができるタグです。headタグ内に記述するとページタイトルに反映されることになります。

HTMLの基本構造


HTMLだけでもウェブサイトとしての機能を果たすことができます。しかしいくつかの言語を併用することでユーザーが利用しやすいウェブサイトを作成することができるようになります。

現在はHTMLだけで構成されたウェブサイトは滅多に見られなくなりました。多くの人に閲覧してもらうために工夫が必要な時代になってきたからと思われます。ここではHTMLの基本構造を見ていきましょう。

HTML

HTMLはウェブサイトを作成する基本となるものです。HTMLファイルは、複数のHTMLタグによって構成されています。

<!DOCTYPE html>
<html>
<head>
<title> ページのタイトル </title>
</head>
<body>
//コンテンツはここに記述する
</body>
</html>

このような構成となります。ブラウザに直接表示される情報はbodyタグ内に記述することになります。

CSS

CSSは ウェブサイトを装飾するための言語 です。セレクタに対してプロパティと値を設定することで反映させることができます。

h1{color:red;}

セレクタ

セレクタは スタイルを適用させる対象 のことです。意図した箇所に適用させるために指定します。

上記の例だと h1 がセレクタに該当します。h1タグにスタイルを適用させることを指示しています。

プロパティ

プロパティは 適用するスタイルの種類 を意味します。CSSには色々なプロパティが用意されていますので、その中から適用させたいスタイルを指定することになります。

上記例では color がプロパティです。colorは色を指定するプロパティです。

値は プロパティの設定値 です。数値を指定するものもあればプロパティ専用の値が用意されているものもあります。

上記の例では red が値となります。値に赤色を指定しています。

JavaScript

JavaScriptは ウェブサイトに動きを付けるための言語 です。Javaと名称が似ていますが、全く異なるプログラミング言語となります。

HTMLだけで作られたウェブサイトは静的なものとなってしまいますが、JavaScriptを利用することでユーザーの動作に対して対応することができる 動的なウェブサイトを実現 することができます。

ユーザーの動作によって文字の色を変更したり、テキストを書き換えたりと様々な事ができるようになります。

プログラミング言語の中では学習しやすい

HTMLはマークアップ言語と言われるものですが、JavaScriptはれっきとしたプログラミング言語です。こう言われると難しくてややこしい印象を受けてしまいますよね。

しかし数あるプログラミング言語の中では比較的学習しやすいと言われています。開発環境を整えるのも楽ですし、文法が分かりやすいことも大きく影響しています。

ウェブサイトを作成するなら知っておいて損はないと思いますのでぜひ触れてみてください。

【目的別】HTMLタグ一覧

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

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

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

リンクタグ5個

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

リンクタグ5個

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

テキスト内容タグ14個

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

テキスト内容タグ14個

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

テキスト表現タグ16個

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

テキスト表現タグ16個

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

次ページ:画像動画関連

1 2

スポンサーリンク

スポンサーリンク

Check Also

大人気!国内で注目したいプログラミング教室3選

2020年には小学校でもプログ …

Facebookでのご購読が便利です