Zenn
🐱

HTML ”Conventions and Best Practices”

2023/07/11に公開
フロントエンドエンジニア
tech

🖱️HTML Conventionsとは

コーディンのルールで、どうすれば効率的、可読性の良いコードを作れるか考えてルールを文書化したのです。

💡HTML Conventionsの必要性

  1. 維持補修に時間を取られないように統一したコード作成を提示する
  2. Conventionsを守るとプロジェクトmember内のコード共有が上手くできる
  3. 一貫してコードを作成できる

📄HTMLコード作成ルール

📍常に文書タイプを文書の最初の行と宣言してください。

<!DOCTYPE html>
♂HTML5から要約された文書タイプを宣言できます。

📍小文字要素名の使用してください。

HTMLコードは英文になっているので、大文字と小文字を選択、混ぜて書くことができます。
以下の理由で、小文字要素名を使用することをお勧めします。

  1. 大文字と小文字を混ぜるときれいに見えません。
  2. 開発者は通常、小文字を使用します。
  3. 文字を書くのがもっと簡単です。

⭕よい例

<h3>Title</h3>

❌よくない例

<H3>Title<H3>

📍すべてのHTML要素を閉じてください。

閉じるタグのない要素以外は、すべてタグを閉てください。

⭕よい例

<p>テキストテキスト</p>
<img src="/dist/images/dog_icon.svg">

❌よくない例

<p>テキストテキスト

📍小文字属性名を使用してください。

タグ作成も小文字で書くのと同じように、タグ内のプロパティも小文字で作成してください。

⭕よい例

<a href="https://zenn.dev/sunnyheee" target="_blank">sunny</a>

❌よくない例

<a href="https://zenn.dev/sunnyheee" TARGET="_blank">sunny</a>

📍タグ内の属性には引用符を入れてください。

読みやすいように引用符の中にプロパティを入れてください。

⭕よい例

<a href="https://zenn.dev/sunnyheee" target="_blank">sunny</a>

❌よくない例

<a href="https://zenn.dev/sunnyheee" TARGET=_blank>sunny</a>

❌❌❌VERY VERYよくない例

<a TARGET=_blank href="https://zenn.dev/sunnyheee">sunny</a>

📍画像の幅と高さ、alt属性を指定してください。

画像を表示できないとき、alt属性が画像を表現するために必要です。
Imgタグ内の幅、高さの値を指定する場合、ブラウザが画像をロードする前にあらかじめスペースを取るため、ブラウザでの点滅が少なくなります。

⭕よい例

<img src="sunny" alt="sunny" style="width:128px;height:128px">

📍タグ内の空白と等号を守ってください。

コードの可読性のために空白を最小限に抑えます。

⭕よい例

<link rel="stylesheet" href="style.css">

❌よくない例

<link rel = "stylesheet" href = "style.css">

📍長いコードラインを避けてください。

エディタを使用する際、左右にスクロールされないようにあまり長く作成しないでください。

📍<title>要素をスキップしないでください。

ページのタイトルは、検索エンジン最適化（SEO）にとって非常に重要です。 検索エンジンアルゴリズムで、検索結果にページをリストするときに順序を決定します。

📍<html>、 <body>、<head>を省略しないでください。

省略時に古いブラウザでエラーが発生する可能性があります。

📍空の要素を閉じることはオプションです。

XML/XHTML ソフトウェアがページにアクセスすることが予想される場合は、閉じるスラッシュが必要ですので、空き要素に閉じるスラッシュを使用してください。

<meta charset="utf-8" />

📍ページの言語を宣言するhtml langを指定してください。

検索エンジンとブラウザのサポートに使用してくれます。

<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

📍メタデータ、ビューポート設定

正しい解釈と正しい検索エンジン索引を生成するために、HTML文書で言語と文字エンコードを定義する必要があります。
デバイスによって見えるエリアを指定できるようにビューポートを指定します。

  1. width=device-width は装置の画面幅に応じてページ幅を設定します。
  2. initial-scale=1.0 の部分は、ページが最初にブラウザによってロードされた初期の拡大/縮小レベルを設定します。
<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

📍HTML注釈（コメントアウト）

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

📍スタイルシート使用してください。

スタイルシートをリンクするときは、簡単な構文を作成してください。

<link rel="stylesheet" href="styles.css">

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
p.intro {font-family:Verdana;font-size:16em;}

📍HTML文書からJavascriptロード

外部スクリプトをロードするときは、簡単な構文を使用してください。

<script src="myscript.js">

📍JavascriptでHTML要素にアクセスする方法

getElementById("demo").innerHTML = "Hello";

📍小文字ファイル名を使用してください。

一部のwebサーバーは、ファイル名に対して大文字と小文字を区別します。
そのため、小文字でファイル名を統一して付けることをおすすめします。

📍HTML基本ファイル名

サーバは基本ファイル名をindex.htmlであるファイルを読み込むため、メインページ文書の名前はindex.htmlで指定した方が良いです。

Discussion