HTMLの構文とフォーマット

HTML要素と属性

タグの意味に沿ったマークアップを行う

//適切なタグを使用しないといけないです。下の例のように「div」を使ってはいけません。

// bad
<div id="wrapper">
  <div class="container-fluid">
    <div id="main">
    </div>
  </div>
</div>
----------------------------------------------------------------------------

//good
<body id="wrapper">
  <div class="container-fluid">
    <main id="main">
    </main>
  </div>
</body>

サイト内のリソースへのパス表記は相対パスで記述する。

//サイト内のリンクを絶対パスで書く意味がないので、サイト外リンクのみに使います。

//bad
	src = "https://test.jp/assets/images/test.jpg"
//good
	src = "../assets/images/test.jpg"

インラインブロックエレメントの中にブロックエレメントを使わないように

//HTML内でインライン要素の中にブロックレベル要素を使用することは一般的に推奨されていません。
//これHTML仕様に違反する可能性があり、異なるブラウザ間で予測不可能なレンダリング動作を引き起こすことがあります。

//bad
	<span>
		<div></div>
	</span>

//good
<div>
	<span></span>
</div>

非推奨タグ使用しない

//現在のウェブ標準について最新情報を把握することは、より良い互換性、アクセシビリティ、SEO、保守性、パフォーマンスを確保します。

//bad
	<b>Sample text</b>
	
//good
	<strong>Sample text</strong>

特殊文字は基本エスケープする

//特殊文字をエスケープすることは、コンテンツが意図通りに表示されることを確保し、ウェブページのセキュリティを維持し、HTMLの構文との混乱を防ぐために必要です。

//bad
<p>Ben & Jerry's ice cream is delicious!</p>

//good
<p>Ben &amp; Jerry's ice cream is delicious!</p>

IDやクラスの使用

IDセレクターは使用しない。代わりにクラスを使うこと

//HTMLでIDセレクターの代わりにクラスを使用すると、コードの組織化、保守性、スタイルや動作の柔軟性が向上します。

//bad
<div id="page-index">
		<div class="page-index__item"></div>
</div>

//good
<div class="page-index">
		<div class="page-index__item"></div>
</div>

クラス名を小文字で書くこと

//一貫性と可読性のために、クラス名は小文字で書くのがベストプラクティスです。
//これにより、クリーンで整理されたコードベースを維持し、開発者がコードを理解しやすく、作業しやすくなります。

//bad
<div class="Page-Index">
		<div class="Page-Index__item"></div>
</div>

//good
<div class="page-index">
		<div class="page-index__item"></div>
</div>

htmlのクラスやidをシングルクオートで書いてはいけない

//HTMLのクラス名やIDにはダブルクォーテーションを使用してください。
//一貫性、互換性、および最良のコーディング慣行のために推奨されています。

//bad
	<div class='page-index'>
		<div class='page-index__item'></div>
	</div>

//good
<div class="page-index">
		<div class="page-index__item"></div>
</div>

インデントとフォーマット

単純な要素では、クロージングタグを同じ行に配置することができる


//HTMLのシンプルな要素には、同じ行に閉じるタグを配置することが一般的な習慣です。
//これは、コードの可読性、一貫性、効率性を向上させるのに役立つことがあります。

//good
<p>短いテキスト</p>

複雑な要素や読みやすさのために、閉じタグは新しい行に置くことができる

//good
<p>
	長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
	長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
</p>

タグ内の不必要なスペースを最小限に抑える

//HTMLタグ内の不要なスペースを最小限に抑えることは、パフォーマンスの向上、よりきれいなコード、Webプロジェクトの保守性の向上につながる良い習慣です。

//bad
<textarea　 name="message" 　　rows="10"　 cols="30">
	長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト	
</textarea>

//good
<textarea name="message" rows="10" cols="30">
	長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト	
</textarea>

コードのフォーマット

大文字でコードを書かない。

//HTML（例：<HTML>、<BODY>、<DOCTYPE>などの特定のHTMLタグ）の要素や属性の一部に大文字の文字が使用される場合があるかもしれませんが、一般的には、一貫性、可読性、アクセシビリティ、およびWeb開発のベストプラクティスへの遵守を確保するために、ほとんどのHTMLコードには小文字の文字を使用することが推奨されています。

//bad
 <SECTION>
	    <DIV>
			<SPAN>テキスト</SPAN>
		</DIV>	
 </SECTION>
	
//good
 <section>
		<div>
			<span>テキスト</span> 
		</div>	 
 </section>