どうも7noteです。フロントエンジニア4年目です。
何万行とHTML・CSSを書いてきたので綺麗なソースにはそこそこ自信がありました。
ですが、Google HTML / CSSスタイルガイドを読んで唖然・・・
できてない事多いなぁ。。。と。
あくまで参考程度でいいとは思うのですが、プロとしてはやっぱり推奨されている綺麗な書き方で書きたい！！
きっとこの記事を読んでくださっている方も、ソースは綺麗に書きたいと思っているはず！
class名の命名則やインデントについての書き方のルールを見直すきっかけになるかも！
またSEO対策には直接影響はないかもしれないが、クローラーの最適化にはなるようなので、知っていて損はない！！！
というわけで、早速google翻訳に頼りながらガイドラインを読んでみた。↓
1.背景
このドキュメントでは、HTMLとCSSのフォーマットとスタイルのルールを定義します。コラボレーション、コード品質の向上、サポートインフラストラクチャの有効化を目的としています。これは、GSSファイルを含む、HTMLおよびCSSを使用する未加工の作業ファイルに適用されます。ツールは、一般的なコード品質が維持されている限り、自由に難読化、縮小、およびコンパイルできます。
ふむふむなるほど。
2.一般
2.1一般的なスタイル規則
2.1.1プロトコル
『他ドメインからファイルを読み込むとき（特にjQueryやapi等）はhttpsを使いなさい』とのこと。
<!-- 非推奨 --><script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><!-- 推奨 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>また関連する話として、sslについてはgoogleが2018年の7月から常時SSL化を推奨しているので、新しく制作するサイトに関しても常時SSLにするのは一般常識になっているのかなと思います。
参考：https://www.idcf.jp/rentalserver/aossl/browser/required-chrome68/
2.2一般的なフォーマット規則
2.2.1インデント
『インデントはスペース2個にしなさい』だって。（タブで書いてた・・・）
<!-- 非推奨 --><ul><li>Fantastic
<li>Great
</ul><!-- 推奨 --><ul><li>Fantastic
<li>Great
</ul>タブとスペースが混同するのはダブ－ですよ、ともかいてます。（・・・はいすみません。面白くないです。次行きます。）
2.2.2大文字
『HTML・CSSに大文字は使うな』とのこと。ただし文字列は除く。
<!-- 非推奨 --><AHREF="/">Home</A></script><!-- 推奨 --><imgsrc="google.png"alt="Google">BEMの書き方なんかを見ても基本小文字しか書かれてないので大文字で書いている人は少なそう。でもたまに「class="areaBlock"」みたいなclassを見かけることがあるので使わないように注意が必要。
2.2.3末尾の空白
『不要な空白文字は入れるな』とのことです。
<!-- 非推奨 --><p>What?_
<!-- 推奨 --><p>Yes please.
誤って入ってしまわないように気を付けましょう。
エディタによっては不要な空白を警告してくれたり、不可視文字を見えるようにできたり、あとで一括削除してくれるものもあるようなのでツールに頼ってもいいかもしれませんね！
改行・空白・タブ削除ツール
2.3一般的なメタルール
2.3.1エンコーディング
『エンコーディングはUTF-8（BOMなし）を使いましょう』
<!-- 推奨 --><metacharset="utf-8">はーい、わかりました！
（エンコーディングって何？という方はこちら→https://wa3.i-3-i.info/word135.html）
『cssでは指定しないように。』とも書いてます。
2.3.2コメント
『必要に応じてコードを説明するために使っていいよ』とのこと。
<!-- 推奨 -->↑こんなかんじでコメントを書いて良い
ありがたい。さすがgoogle先生。
2.3.3アクションアイテム
『コメントの書き方でTODO:～～～って書き方をしてもいいよ』
な、、なんだこれ、見たことないぞ・・・。
<!-- 推奨 --><!-- TODO: remove optional tags --><ul><li>Apples</li><li>Oranges</li></ul>・・・調べた情報によると、「TODO（ユーザー名など）:内容」という様に書くらしい。
まぁコメントなのであまり使う場面は少ないのかな。。。
3.HTML
3.1 HTMLスタイルのルール
3.1.1ドキュメントタイプ
『HTML5を使いましょう。』
『DOCTYPEは<!DOCTYPE html>このように書く』
<!-- 推奨 --><!DOCTYPE html>『void要素は閉じるな。』
<!-- 非推奨 --><br/><!-- 推奨 --><br>HTML5の基本的な書き方ですね。
3.1.2 HTMLの妥当性
『<!DOCTYPE html>の宣言や、閉じタグなどは忘れず正しく書きましょう』
<!-- 非推奨 --><title>Test</title><article>This is only a test.
<!-- 推奨 --><!DOCTYPE html><metacharset="utf-8"><title>Test</title><article>This is only a test.</article>3.1.3セマンティクス
『目的に応じた要素を正しく使ってください』
<!-- 非推奨 --><divonclick="goToRecommendations();">All recommendations</div><!-- 推奨 --><ahref="recommendations/">All recommendations</a>なんでもかんでもdivやspanで書かず、段落にはp、アンカーリンクにはaを使いましょうって話。
3.1.4マルチメディアのフォールバック
『映像や画像が表示できなかった時の代替情報を用意しなさい』
<!-- 非推奨 --><imgsrc="spreadsheet.png"><!-- 推奨 --><imgsrc="spreadsheet.png"alt="Spreadsheet screenshot.">img要素には必ずaltを書きなさい的な話ですね。
altについては過去に記事を書いたので参考にしてください。
→【初心者でもわかる】imgタグのaltの付け方
3.1.5懸念の分離
『HTMLとCSSとjavascriptは分けて書きましょう』的なことが書いてます。
<!-- 非推奨 --><linkrel="stylesheet"href="base.css"media="screen"><linkrel="stylesheet"href="grid.css"media="screen"><linkrel="stylesheet"href="print.css"media="print"><h1style="font-size: 1em;">HTML sucks</h1><center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center><!-- 推奨 --><linkrel="stylesheet"href="default.css">要素（タグ）の構造はHTMLファイルに。見た目のスタイルはCSSファイルに。などそれぞれ役割をはっきりさせ、住み分けさせることでメンテナンス性を上げてくださいねという話のようです。
htmlのタグに直書きでcssは書けますができるだけ書かないように注意しましょう！
3.1.6エンティティ参照
『実体参照する必要のない文字は実体参照で書かないで！』と。
<!-- 非推奨 -->ユーロはこう書きます。“&eur;”。
<!-- 推奨 -->ユーロはこう書きます。"€"。
たとえばユーロ（€）などは実体参照が不要な文字なので、€と検索してそのまま使いましょう。
3.1.7オプションのタグ
『<html>,<head>,<body>等は省略可能です。省略しましょう。』
<!-- 非推奨 --><!DOCTYPE html><html><head><title>Spending money, spending bytes</title></head><body><p>Sic.</p></body></html><!-- 推奨 --><!DOCTYPE html><title>Saving money, saving bytes</title><p>Qed.
え、省略していいんですね。いや、省略できるのは知っていたけど、毎回律儀に書いてた。。。。
明日から省略して書こうっと。
省略できるタグをまとめているQiitaの記事がありました。
→https://qiita.com/labocho/items/54fd70c73ced35c8ba49
3.1.8 type属性
『外部ファイルを読み込むとき、type属性は省略する』
<!-- 非推奨 --><linkrel="stylesheet"href="https://www.google.com/css/maia.css"type="text/css"><!-- 推奨 --><linkrel="stylesheet"href="https://www.google.com/css/maia.css">link要素やscript要素のtype="text/css"やtype="text/script"は省略しましょうとのこと。いつもコピペしてたから付けてしまってそう・・・
3.2 HTMLのフォーマットルール
3.2.1一般的なフォーマット
『ulやtableの子要素はちゃんとインデントを取りなさい』
<!-- 非推奨 --><ul><li>Moe
<li>Larry
<li>Curly
</ul><!-- 推奨 --><table><thead><tr><thscope="col">Income
<thscope="col">Taxes
<tbody><tr><td>$ 5.00
<td>$ 4.50
</table>かしこまりました。
3.2.2 HTMLの行折り返し
『htmlのタグが属性が増えてしまい異常に長い時は、途中で改行してもいいよ』
<!-- 推奨 --><md-progress-circularmd-mode="indeterminate"class="md-accent"ng-show="ctrl.loading"md-diameter="35"></md-progress-circular>見やすさ重視でタグの途中でも改行していいよってgoogle先生が言ってくれている、ありがとうgoogle先生！！！
3.2.3 HTML引用符
『属性を書く時はダブルクォーテーション（"）でくくりなさい。』
<!-- 非推奨 --><aclass='maia-button maia-button-secondary'>Sign in</a><!-- 推奨 --><aclass="maia-button maia-button-secondary">Sign in</a>class=""やalt=""などの属性はシングルクォーテーション（'）ではなくダブルクォーテーション（"）を使いましょう。
基礎・HTML編はここまで！
CSS編はまた明日続きを書きます！
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）