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

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

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

参考サイト 「普通のHTMLの書き方」

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

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

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

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

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

今から、できる限り「普通のHTML」を短く解説しますが補足があります。

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

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

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

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

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

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

要素って沢山の種類があるとご存知でしたか？
ざっと【これ】ぐらいあります。

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

See the Pen OKsample by hashibadaiki (@hashibadaiki) on CodePen.

See the Pen NGsample by hashibadaiki (@hashibadaiki) on CodePen.

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

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

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

1.&　<　>　”　’　はエスケープする。「&」は「&」にしておくと一定の条件下でも「＆」として記載されます。

　ではなく、 ![img](/mosaic-code.jpg)<code class="language-html">&lt;!DOCTYPE html&gt;</code>
デベロッパーツールなどでは見たことがないですが、このように明文化されています。

28．デフォルトの暗黙のARIAセマンティックスを尊重する（ARIAについてはこちら)
デフォルト機能とドキュメント側での食い違いを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属性を指定すると同じ値でできる例↓
50%``` ちなみにminも同様。

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

##まとめ

いかかでしたでしょうか？
僕は普通のHTMLを読んで衝撃を受けました…
理解できない部分が多く、初学者には時間のかかる内容だったので、少しでもお役に立てれば幸いです。

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

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

[cv:issue_marketplace_engineer]