🌻imgタグのwidth, heightには「負でない整数をピクセル単位で」指定しよう！

ネットでimgタグのwidth, heightについて検索すると
以下のように % で指定する例がヒットします。

<img width="100%" height="100%" />

ですが...

⏩W3Cが定めるWeb starndard的には「負でない整数をピクセル単位で」指定するのが正解です！

W3C Web standards の公式ページには、以下のように記載されています。
※W3C Web standards：Webのルールブックのようなもの。

・width = non-negative integer
　Give the width of the visual content of the element, in CSS pixels.

・height = non-negative integer
　Give the height of the visual content of the element, in CSS pixels.

要約すると
「負でない整数をピクセル単位で指定してね！」
と書いてあります。

⏩W3C Markup Validation Serviceでチェックするとエラーが出ます。

以下のように、width に % を含めたimgタグをコードに仕込んで、

<img src="./assets/images/img-concept01.png" alt="concept" width="100%" height="700" />

W3C Markup Validation Serviceでチェックしてみます。
※このツールで、HTMLが正しく記載されているかチェックできます。
※使い方は文末で紹介しています。

すると、以下のようなエラーメッセージが出力されます。

要約すると
「不正な値です。width に % は入れないで、数字だけ入力してね！」
と書いてあります。

heightも同じ挙動になります。

実際は、imgタグのwidthやheightに
・% を指定しても
・600.66 のように小数点を指定しても
Webページとして表示はできます。

が、標準化されたルール的にはNGのようです。

どうせならルールに則って正しいHTMLを書きたいですね！
いつどこでエラーが出るようになるか分からないですし…

ということで、これからは
imgタグのwidth, heightには
「負でない整数をピクセル単位で」指定しましょう！
※単位は不要です。

💡補足
・本件はあくまで「HTMLのimgタグ」に関するものです。
・CSSには % も vm もどんどん使ってください！

⏩おまけ①：iframeタグのwidthも同じ！「負でない整数をピクセル単位で」指定しよう！

iframeのwidthに関しても同様の記載があります。
こちらもやはり「負でない整数をピクセル単位で」指定しましょう。

・width
　The width of the frame in CSS pixels. Default is 300.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

⏩おまけ②：HTMLが正しく記載されているか、W3C Markup Validation Serviceでチェックする方法

W3C Markup Validation Service

⏩おまけ③：CSSもチェックできます！

CSS Validation ServiceでCSSもチェックできます。

⏩おまけ④：関連ポスト

🌻正しいHTML、正しいCSS書いてますか！？
W3Cバリデーターでチェックしよう！

・HTML：https://t.co/n75BGr7Qba
・CSS：https://t.co/VJjgTxSDiQ

👆で正しく書けているかチェックできます！

明日からいくつか事例を紹介します！#HTML #CSS #Web制作 pic.twitter.com/f7pgBycMi7
— とも🌻ひまわりweb studio🌻コーダー (@tomo_himawari_) October 14, 2023