---
title: HTML の基本ルール
sidebar:
  label: 基本ルール
description: スタイル・処理の分離、正しい記述と検証など、HTML 全体に共通するルール
---

- **スタイルと処理は外部ファイルに分離する**  
  HTML には構造だけを記述します。スタイルは外部 CSS、インタラクションなどの動的な処理は外部 JavaScript に書き、`style` 属性や `<script>` 内への直接記述は避けてください。

- **正しく記述し、ツールで検証する**  
  HTML は仕様に沿って正しく記述し、[markuplint](https://markuplint.dev/) で検査します。必要に応じて [Nu Html Checker](https://validator.w3.org/nu/)（W3C）でも確認してください。

:::note[例外]
次のものは HTML に直接記述して構いません。

- Tailwind CSS のユーティリティクラス
- カスタムプロパティに値を渡す `style` 属性（[CSS の基本ルール](/frontend/css/basics)）
- 構造化データ、計測タグ、表示のちらつき防止のためのスクリプト（[スクリプトの読み込み](/frontend/js/loading#例外的なケース)）
- そのほか、プロジェクトで認めたもの
:::

## 画像のマークアップ

`img` 要素・`picture` 要素・インライン SVG のルールは[画像・メディア](/frontend/media)にまとめています。

- サイズ指定・遅延読み込み: [読み込み最適化](/frontend/media/optimization)
- alt 属性・SVG のアクセシビリティ: [アクセシビリティ](/frontend/media/accessibility)