altタグの使い方を覚える!【1分でわかるHTML編】

altタグの解説HTML

こんにちはみっくです。

今回はHTMLのaltタグについてのお話です。

みっく
みっく

alt タグは画像の説明文を記述します♪

altタグ(オルトタグ)とは

みっく
みっく

「 alt 」はオルトalternative)で代替(だいたい)テキストを表します。

みっく
みっく

代替(だいたい)テキストと言いましてもピンと来にくいと思いますので、置き換え文字というニュアンスでよいかと思います。もしこの画像を文字に置き換えたら、何と言うかという意味です。

<p><img src=”画像のパス” alt=”画像の説明” > </p> のような形で画像の説明文を読み込んで使用します。

画像に関しては以下の記事を参考にお願い致します。

imgタグの解説HTML imgタグの使い方を覚える!【1分でわかるHTML編】
画像のパス

HTML5ではaltタグは必須となっています。飾りの画像や特に意味を持たないイラストの場合は「alt=””」と空欄にしておきましょう。

SEO

altとは本来、画像が読み込まれない時の説明や、音声で読み込んだ際に使用されるものですが、検索エンジンに画像内容を伝える事ができる事から、SEOとしても効果的と言われています。

altタグの表示例

HTML

<p><img src="image/sample_01.jpg" alt="カラフルな野菜"></p>

ブラウザでの表示

カラフルな野菜

メモ

altを付けても画像の見た目には変化はありません。

みっく
みっく

SEOとしても効果が期待できますので、altには適度にキーワードを盛り込みましょう。

altタグの難易度

みっくのレビュー
難易度
 (2)

画像につけるタグでシンプルですが、付け忘れが起こりやすいという事で 、難易度は★2つレベルです。

みっぴー
みっぴー

確かに付け忘れてしまいそうです。。。

altタグの使用頻度

みっくのレビュー
使用頻度
 (5)

画像とともに必ず使用されますので、使用頻度は 5つレベルです。

さっぴー
さっぴー

画像とセットで使うんですね!

altタグの重要度

みっくのレビュー
重要度
 (4)

画像に必須なタグでSEOとしても重要なタグになります。重要度は 4つレベルです。

みっく
みっく

ぜひ覚えておきましょう♪

まとめ

「 alt 」はオルトalternative)で代替(だいたい)テキストを表します。

代替(だいたい)テキストとは、置き換え文字というニュアンスで、もしこの画像を文字に置き換えたら何かという意味です。

<p><img src=”画像のパス” alt=”画像の説明” > </p> のような形で画像の説明文記述します。

SEOとしても効果が期待できますので、altには適度にキーワードを盛り込むのがオススメです。

シンプルですが、付け忘れが起こりやすいという事で 、難易度は★2つレベルです。

画像とともに必ず使用されますので、使用頻度は 5つレベルです。

画像に必須なタグでSEOとしても重要なタグになります。重要度は 4つレベルです。

みっく
みっく

SEOも意識して説明文を付けてみましょう♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です