imgタグについて
HTMLでimageタグを使って画像を表示するためのHTMLタグのひとつです。
「imgタグ」はインライン要素ですが、ブロック要素と同じ効果が出せるのを覚えておきましょう。
表示する画像ファイルはsrc属性で指定し、
WEB上ではGIF形式、JPEG形式、PNG形式の画像形式を指定することができます。
画像の形式はJPGが一番軽いです。なので基本的にはJPGで書き出して使用するようにしましょう。
☆ファイヤワークスの書き出し方法→control+shift+X
必要な要素
「src属性」と「alt属性」を設定する必要があります。順番を入れ替えても問題ありませんが
BMBでの書き方は基本的には以下の通りです。
<img src="画像が格納されている場所" alt="画像の説明文">
ただし、画像を表示するだけなら、src属性だけで十分です。
altの補足説明
alt属性の機能は、あくまで検索エンジンに適切な画像内容を伝えることであり、
コンテンツを検索エンジンやユーザーわかりやすくする役割を担うものです。
HTML5からは必須ではなくなりました。なので使用しなくても大丈夫です。
alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられるというメリット があります。
飾りなどには必要ありませんが、説明などで画像を使用する際は
altを使って補足を入れたほうがSEO上は有利になるのを覚えておきましょう。
また、altタグを使うことによって
・接続が遅く、画像が表示されずに見ている人
・障害を持った方など、音声ソフトを利用してページを理解している人
・テキストだけのブラウザを利用している人がいる
以上のユーザーにも画像を理解してもらうことが可能です。
SEOだけではなくaltを使うことによってより多くの人に理解してもらえるWEBページが完成します。
個人的には、適宜使っていければいいなと思っています。
注意点
imgタグは他のタグと違って終了がありません。
</img>などを書かないようにしましょう。
まとめ
個人的にあまりimgタグを使用しないため、最低限の情報を載せました。
注意点は過去に使用されていることがあったようなので皆さんで注意していけたらと思います。
他にも知りたいことがあるよというものがあればコメントにお願いいたします✪
株式会社ビーエムビー
〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX:03-5948-5996
東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP(ランディングページ)の作成、ECサイト(楽天ストアなど)の構築などのWEBデザイン、チラシ・ポスター・名刺・パンフレット・看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。