【HTML・W3C Web standards】imgタグのwidth, heightには「負でない整数をピクセル単位で」指定しよう！

## 🌻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.

https://www.w3.org/wiki/Html/Elements/img

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

<br> 

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

以下のように、width に % を含めたimgタグをコードに仕込んで、
```
<img src="./assets/images/img-concept01.png" alt="concept" width="100%" height="700" />
```


[W3C Markup Validation Service](https://validator.w3.org/)でチェックしてみます。
※このツールで、HTMLが正しく記載されているかチェックできます。
※使い方は文末で紹介しています。


すると、以下のようなエラーメッセージが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2525847/291f902f-d434-7c50-a1ec-866cf328a4a8.png)

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

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

が、標準化されたルール的にはNGのようです。
<br> 
どうせならルールに則って正しいHTMLを書きたいですね！
いつどこでエラーが出るようになるか分からないですし…
<br> 
ということで、これからは
 **imgタグのwidth, heightには** 
 **「負でない整数をピクセル単位で」指定しましょう！** 
※単位は不要です。
<br> 
💡補足
・本件はあくまで「HTMLのimgタグ」に関するものです。
・CSSには % も vm もどんどん使ってください！
<br> 
### ⏩おまけ①：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
<br> 
### ⏩おまけ②：HTMLが正しく記載されているか、W3C Markup Validation Serviceでチェックする方法

[W3C Markup Validation Service](https://validator.w3.org/)
![W3C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2525847/a0fb5113-c30a-7724-80cd-0c0d71641e54.png)
<br> 
### ⏩おまけ③：CSSもチェックできます！
[CSS Validation Service](https://jigsaw.w3.org/css-validator/)でCSSもチェックできます。
![20231015-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2525847/212aacbd-7c72-6f5a-cac4-a335a173fd01.png)


<br> 

### ⏩おまけ④：関連ポスト
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌻正しいHTML、正しいCSS書いてますか！？<br>W3Cバリデーターでチェックしよう！<br><br>・HTML：<a href="https://t.co/n75BGr7Qba">https://t.co/n75BGr7Qba</a><br>・CSS：<a href="https://t.co/VJjgTxSDiQ">https://t.co/VJjgTxSDiQ</a><br><br>👆で正しく書けているかチェックできます！<br><br>明日からいくつか事例を紹介します！<a href="https://twitter.com/hashtag/HTML?src=hash&amp;ref_src=twsrc%5Etfw">#HTML</a> <a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Web%E5%88%B6%E4%BD%9C?src=hash&amp;ref_src=twsrc%5Etfw">#Web制作</a> <a href="https://t.co/f7pgBycMi7">pic.twitter.com/f7pgBycMi7</a></p>&mdash; とも🌻ひまわりweb studio🌻コーダー (@tomo_himawari_) <a href="https://twitter.com/tomo_himawari_/status/1713331863610372225?ref_src=twsrc%5Etfw">October 14, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>