**こんにちは。ばーんです。**

##今回は「HTMLの基礎」についてお話ししていきます。

今回は私と同じく、独学でHTMLに取り組み始めた方が対象です。
Progateや、30daysトライアルを使って模写などが終わった方に見て頂きたいです。

参考サイト [「普通のHTMLの書き方」](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)

##大前提「基礎を学ぶメリットは？」

模写サイト作れますよ？ある程度の自作サイト作れますよ？一応基礎的なところはできると思いますよ…？
**と思ってました。**

ところが↑の普通のHTMLを見て愕然としました。
###「あかん。俺なんも分かってないやん…」

読み終えて、なぜ必要か？を書くと
**1.PCに正しく認識してもらう為＝より多くの人に正しく伝えてもらう為**
古いブラウザを使用している方、スクリーンリーダーを使用してる方、ガラパゴスケータイを使用している方
世界中には様々な形でWebサイトを閲覧する方法があります。
HTMLはそういった状況にもなるべく対応できるよう、仕様書に細かく言及しています。
正しくHTMLでWebサイトを表現する為に、基礎的な知識が必要なのです。

**2.誰がコードを見ても分かり易くなる＝メンテナンスがし易くなる**
自分自身の為のWebサイトで、自分以外が触らないのであれば問題はりませんが、
商品としてサイトを納品する場合、自分以外が触れる機会はあってもおかしくありません。

今から、できる限り[「普通のHTML」](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)を短く解説しますが補足があります。

普通のHTMLでは、実際のHTMLの記述の順に説明されています。
自分としては重要と感じるものと、そうでないものの隔たりが大きいと感じたので優先順位をつけて並び替えています。
ですので、上の方はしっかり理解できるまで読み解いていただいて、後半は流し見程度でいいかと思います。

*※例えば「Pタグはできる限り閉じタグをつけよう」みたいな項目がありますが、Emmetであればそもそもそんな心配要りません。
ですが、知識としてPタグは特定条件では閉じタグが必要ないという知識を知っておいて損はないと思います。こういったものを後半に回しています。あまりにも現状不要だと思う知識は省略しています。*

##重要「聞いてた話と違う！」
※僕の感想です(笑)あまりにもProgateで学んだ内容以外のことが出てきました

####・できる限りdivは避ける

はい。きました。今回僕が一番目を疑った内容でした。
だって僕が作ったサイトはdivとspanまみれですから…
*→div/span要素はなるべく避ける。と明文化されています。*
**divとspanは何もなしていない**と判断されるからです。

これは、つまり　**≒要素を正しく使う**　と認識しています。

要素って沢山の種類があるとご存知でしたか？
ざっと[【これ】](https://developer.mozilla.org/ja/docs/Web/HTML/Element)ぐらいあります。

↓は極端な一例ですが、見た目上は同じ結果に見えますよね？

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="PowpJEO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="OKsample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/PowpJEO">
  OKsample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="LYEWzQN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="NGsample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/LYEWzQN">
  NGsample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

どちらも「パスタを提供する大阪のお店かな？」と僕達からは見えますが、PC的には
**上：1つのセクション（区間）とそれに関する見出しと写真。加えて住所
下：段落と文字列。写真と段落と文字列**
という認識をしています。

他にも強調する要素として「em」と「strong」がありますが、「strong」は警告を意味しています。
こういった大小様々な違いがあるので、ざっと羅列していきます。

##おそらく重要「普通のHTML」

1.&　<　>　”　’　はエスケープする。「&」は```「&amp;」```にしておくと一定の条件下でも「＆」として記載されます。
![img](/mosaic-code.jpg)<li></li><li></li>```　ではなく、
![img](/mosaic-code.jpg)<code class="language-html">&lt;!DOCTYPE html&gt;</code>```
デベロッパーツールなどでは見たことがないですが、このように明文化されています。

28．デフォルトの暗黙のARIAセマンティックスを尊重する（ARIAについては[こちら](https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics))
デフォルト機能とドキュメント側での食い違いをrole機能で指定できるけど、元々持っている強い属性は変更できない（aはarticleには変えれない）

29．できる限りdata-*属性は避ける
→どういったデータか？を簡単に定義できるが、もともと持っている属性もあるのでがむしゃらに使わない

28．29．は似たような意味かと思います。元々持っている強い属性は変更しないでね。という認識でいいかと

30．データをダウンロードさせたい場合はdownload要素を作る。これも↑同様ですね。正しく使ってという意味だと思います

31．プロトコルを指定するとより安全です（プロトコル＝通信規約。↓の場合httpのp）
NG　```<script src="//example.com/js/library.js"></script>```
OK　```<script src="https://example.com/js/library.js"></script>```

32．q要素内へ引用符は置かない→かってに置換してくれるので。どうしても指定したい場合はq要素に直接書く。
blockquote要素はblockの引用。qはインライン。

33．メタデータ＝データのためのデータ。高高度から俯瞰してみているようなイメージ。
映画のための映画とかそんな感じ。小説などで登場人物が筆者を語るとメタな発言になったりする

34．progress要素　プログレスバーなどで使う。進捗を表すやつ
max属性を指定すると同じ値でできる例↓
![img](/mosaic-code.jpg)<progress max="100" value="50"> 50%</progress>``` ちなみにminも同様。

35．fieldsetタグは、フォームの入力項目をグループ化する際に使用します。
fieldset～fieldsetの中に配置された input・ select・ textarea等のフォーム部品がグループ化され、
一般的なブラウザではボーダーで囲まれて表示されます。
フォーム部品のグループにキャプション（タイトルや説明）を付ける場合には、fieldset～fieldsetの中の最初のlegendで指定します。

##まとめ

いかかでしたでしょうか？
僕は[普通のHTML](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)を読んで衝撃を受けました…
理解できない部分が多く、初学者には時間のかかる内容だったので、少しでもお役に立てれば幸いです。

ここまで読み飛ばした初学者の方へ
ちなみにこの記事本文より50％ぐらいカットしてます。
かなり読み易いように省略したので、諦めずに読んでいただくと今後の糧になるかと思います。

最後まで読んで頂き、誠にありがとうございました。

[cv:issue_marketplace_engineer]

**こんにちは。ばーんです。**

##今回は「HTMLの基礎」についてお話ししていきます。

今回は私と同じく、独学でHTMLに取り組み始めた方が対象です。
Progateや、30daysトライアルを使って模写などが終わった方に見て頂きたいです。

参考サイト [「普通のHTMLの書き方」](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)

##大前提「基礎を学ぶメリットは？」

模写サイト作れますよ？ある程度の自作サイト作れますよ？一応基礎的なところはできると思いますよ…？
**と思ってました。**

ところが↑の普通のHTMLを見て愕然としました。
###「あかん。俺なんも分かってないやん…」

読み終えて、なぜ必要か？を書くと
**1.PCに正しく認識してもらう為＝より多くの人に正しく伝えてもらう為**
古いブラウザを使用している方、スクリーンリーダーを使用してる方、ガラパゴスケータイを使用している方
世界中には様々な形でWebサイトを閲覧する方法があります。
HTMLはそういった状況にもなるべく対応できるよう、仕様書に細かく言及しています。
正しくHTMLでWebサイトを表現する為に、基礎的な知識が必要なのです。

**2.誰がコードを見ても分かり易くなる＝メンテナンスがし易くなる**
自分自身の為のWebサイトで、自分以外が触らないのであれば問題はりませんが、
商品としてサイトを納品する場合、自分以外が触れる機会はあってもおかしくありません。

今から、できる限り[「普通のHTML」](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)を短く解説しますが補足があります。

普通のHTMLでは、実際のHTMLの記述の順に説明されています。
自分としては重要と感じるものと、そうでないものの隔たりが大きいと感じたので優先順位をつけて並び替えています。
ですので、上の方はしっかり理解できるまで読み解いていただいて、後半は流し見程度でいいかと思います。

*※例えば「Pタグはできる限り閉じタグをつけよう」みたいな項目がありますが、Emmetであればそもそもそんな心配要りません。
ですが、知識としてPタグは特定条件では閉じタグが必要ないという知識を知っておいて損はないと思います。こういったものを後半に回しています。あまりにも現状不要だと思う知識は省略しています。*

##重要「聞いてた話と違う！」
※僕の感想です(笑)あまりにもProgateで学んだ内容以外のことが出てきました

####・できる限りdivは避ける

はい。きました。今回僕が一番目を疑った内容でした。
だって僕が作ったサイトはdivとspanまみれですから…
*→div/span要素はなるべく避ける。と明文化されています。*
**divとspanは何もなしていない**と判断されるからです。

これは、つまり　**≒要素を正しく使う**　と認識しています。

要素って沢山の種類があるとご存知でしたか？
ざっと[【これ】](https://developer.mozilla.org/ja/docs/Web/HTML/Element)ぐらいあります。

↓は極端な一例ですが、見た目上は同じ結果に見えますよね？

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="PowpJEO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="OKsample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/PowpJEO">
  OKsample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="LYEWzQN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="NGsample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/LYEWzQN">
  NGsample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

どちらも「パスタを提供する大阪のお店かな？」と僕達からは見えますが、PC的には
**上：1つのセクション（区間）とそれに関する見出しと写真。加えて住所
下：段落と文字列。写真と段落と文字列**
という認識をしています。

他にも強調する要素として「em」と「strong」がありますが、「strong」は警告を意味しています。
こういった大小様々な違いがあるので、ざっと羅列していきます。

##おそらく重要「普通のHTML」

1.&　<　>　”　’　はエスケープする。「&」は```「&amp;」```にしておくと一定の条件下でも「＆」として記載されます。
```&→&amp;　<→&lt;　>→&gt;　"→&quot;　'→&apos;```
文字が崩れている時はこうすればいいと覚えておくといいかと思います。

2．（MIME）マイムタイプを指定する。僕達には.txtでテキストと認識できますが、Web上ではtext/plainと記載した方が正確です。
こうしておくと、サポートがない場合でも判別できるので適切な処理をしてくれる。ただしCSSやJSは宣言不要。

3．JSとCSSがある場合はCSSを優先して書く（上に）。古いブラウザの場合JSで止まってしまうので＆処理が早くなる。

4．audioやvideo、pictureはフォールバック（滑り止め的なもの）を付ける
どの要素も安定はしていないので、最後にimgなどで画像データを入れておく。

5．imgにおけるaltは基本指定する。表示されない時に助けれるので。
例↑のcodepenでも駄目な例にはaltを付けていませんが画像は出てると思います。
画像表示させれない時のサポートだけでは無く、スクリーンリーダー（視覚障害者の方へのサポート機能）の為にも必要です。

6．br要素はコード上でも改行する。また、br要素はコンテンツに必要な場合のみ使用。
例えば、住所、氏名などの改行はOKだけど見た目を整えるものはNG。

7．ruby要素（ふりがなをふるやつ）完全にサポートされていないので、長めに書いた方が良い。
NG　```<ruby>HTML<rt>えいちてぃーえむえる</ruby>```
OK　```<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>```

8．できる限りkbd要素はシンプルにする（kbd要素　キーボード入力のやつだよーって表示）
CSSと組み合わせればボタンっぽくなる（altとか）
NG　```<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>```
OK　```<kbd>Ctrl+F5</kbd>```
↑rubyは今ある問題への解決。kbdは今後への対策という意味（現時点では安定して使えるので無駄に長くしなくて良い）。

9．time要素で指定できる日時パターンは決まっている。それ以外の表記はdatetimeで
timeは時刻のみ、日付のみ、日付と時刻　とタイムゾーンが設定可能
NG　Dec 19, 2014
OK　2014-12-19

10．input要素では適切なtype属性を使う。前時代のHTMLでは10種類でしたが、今では倍以上になっている。
具体例をあげると今まではtext指定でしたがsearch指定できるので検索候補がでてきたりする。

11．input type="submit"にはvalue属性を追加する
送信ボタンには必ずsubmit。こうしないとEnterで送信されない（たまにカーソル操作じゃないと送信されないのありますよね？）
また、valueで指定しておくと対応していないブラウザでも表示される

12．main要素を使う→文書の支配的なコンテンツを表しています

13．figcaption要素はfigure要素の最初か最後に置く
figure→図や写真などの集まり。単体で独立したものでないといけない
figcaption→figureの子要素。説明文（これらの写真はパスタの種類です。みたいなイメージ）

14．lavel　フォーム要素につけれる。forで関連づけが可能
チェックボックスで文字を押してもチェックが付くやつありますよね？あれのことです

15．address要素は連絡先情報にのみ使う　過去は様々な文章で使われてきたが、正しく使う

16．a要素は殆ど括れる。aとfrom以外

17.blockquoteは引用符。必ず元の形式のまま（段落とかまで詳細に）
blockquote要素内に帰属情報を含めない→外に出す。人間には判断できても機械にはできないので

18.警告にはstrong要素を使う。emは強調

19．placeholder属性をラベル付けに使わない。ラベルとはそもそも用途が違うので分けましょう。
placeholderとは何も打ち込んでいないのにうっすら表示されているやつ（googleのTOP
検索画面の検索バーには「Google　または…」という表記がありますよね？あれのことです）

20．base要素をなるべく使わない→デフォルトでリンク先を指定できる要素。
ただ関連づいてしまって挙動がおかしくなる時もあるのでできれば使わない（絶対パスが安心安全）

##「知っておいて損はない」

21.DOCTYPE宣言　現在の正しい宣言を理解する
HTMLは現在バージョン5です。それまでに様々なものに対応するべくアップデートされてきました。
わざわざ古いやり方でしないで下さい。という意味です。

22．大文字、小文字　引用符は統一する。Aタグでいくなら大文字で　””なのか’’なのか？
また、インデントも一貫したものを使う。スペースでもタブでもOK。とにかく統一すること。
可読性が違います。

23．option要素は1行に1つ書く。li要素もテーブルデータも同じ。単純に見にくい
```<li></li><li></li>```　ではなく、
```<li></li>
<li></li>```　と表記する

24．Langについて　なるべく短く。指定はマスト（検索時や翻訳に影響）

25．Titleは必ず宣言する　検索エンジンや、各サービスから適切なものを受けれるので

26． ```<meta charset="UTF-8">```は一番最初に記述
先頭から1024バイトに記述というルールがあり、現在はDOCTYPEなどで緩和されるがやらないに越したことはない

27．仕様書では↓これから始めることが言及されている
```<code class="language-html">&lt;!DOCTYPE html&gt;</code>```
デベロッパーツールなどでは見たことがないですが、このように明文化されています。

28．デフォルトの暗黙のARIAセマンティックスを尊重する（ARIAについては[こちら](https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics))
デフォルト機能とドキュメント側での食い違いをrole機能で指定できるけど、元々持っている強い属性は変更できない（aはarticleには変えれない）

29．できる限りdata-*属性は避ける
→どういったデータか？を簡単に定義できるが、もともと持っている属性もあるのでがむしゃらに使わない

28．29．は似たような意味かと思います。元々持っている強い属性は変更しないでね。という認識でいいかと

30．データをダウンロードさせたい場合はdownload要素を作る。これも↑同様ですね。正しく使ってという意味だと思います

31．プロトコルを指定するとより安全です（プロトコル＝通信規約。↓の場合httpのp）
NG　```<script src="//example.com/js/library.js"></script>```
OK　```<script src="https://example.com/js/library.js"></script>```

32．q要素内へ引用符は置かない→かってに置換してくれるので。どうしても指定したい場合はq要素に直接書く。
blockquote要素はblockの引用。qはインライン。

33．メタデータ＝データのためのデータ。高高度から俯瞰してみているようなイメージ。
映画のための映画とかそんな感じ。小説などで登場人物が筆者を語るとメタな発言になったりする

34．progress要素　プログレスバーなどで使う。進捗を表すやつ
max属性を指定すると同じ値でできる例↓
```<progress value="0.5"> 50%</progress>```
```<progress max="100" value="50"> 50%</progress>``` ちなみにminも同様。

35．fieldsetタグは、フォームの入力項目をグループ化する際に使用します。
fieldset～fieldsetの中に配置された input・ select・ textarea等のフォーム部品がグループ化され、
一般的なブラウザではボーダーで囲まれて表示されます。
フォーム部品のグループにキャプション（タイトルや説明）を付ける場合には、fieldset～fieldsetの中の最初のlegendで指定します。

##まとめ

いかかでしたでしょうか？
僕は[普通のHTML](https://hail2u.net/documents/html-best-practices.html#dont-use-script-injected-script-element)を読んで衝撃を受けました…
理解できない部分が多く、初学者には時間のかかる内容だったので、少しでもお役に立てれば幸いです。

ここまで読み飛ばした初学者の方へ
ちなみにこの記事本文より50％ぐらいカットしてます。
かなり読み易いように省略したので、諦めずに読んでいただくと今後の糧になるかと思います。

最後まで読んで頂き、誠にありがとうございました。



続きを読むには単価診断を受けてください（30秒）