HTMLタグ検証

HTML Tag Validator

入力したHTMLコードを解析し、文法的な問題点を可視化するバリデータです。開始タグと閉じタグの対応関係を検証し、閉じタグ不足、孤立した閉じタグ、不適切なネストという３種類のエラーを自動判別します。検出されたタグはコード内で色分けハイライトされ、「検出された問題」としてリストアップ。エラーの種類・行番号・具体的なメッセージが一目で分かるため、修正ポイントを迷いません。

コラム・豆知識
ツールの仕組み解説

HTMLコードを入力

コラム・豆知識

HTMLの文法検証は信頼性と保守性の第一歩

HTMLは多少の誤りがあっても表示されてしまいますが、それは「正しいコード」ではありません。
<html>や<head>、<body>などの基本構造を正しく記述し、妥当なHTMLを書くことで、後工程のCSSやJavaScriptが安定して機能します。
検証を怠ると、環境によって予期しない表示崩れが起きる可能性があります。

W3C Validatorは構文ミス発見の基本ツール

公式のW3C Markup Validation Serviceは、HTMLの構文的な誤りや非推奨タグの使用を検出するための定番ツールです。
<img>や<a>タグの閉じ忘れや、属性の重複・誤用など、目視では見落としやすいミスを迅速に洗い出してくれます。
一度のコーディング後に使うだけでなく、テンプレート更新時や自動生成コードにも定期的なチェックが推奨されます。

role属性とARIAの誤用にも注意

role属性やaria-*属性は、支援技術への意味伝達に重要ですが、HTMLタグ本来の意味を無視して多用すると逆効果になります。
例えば<button>にrole="button"を付与するのは冗長であり、<div role="heading">のような構造はネイティブ要素で代替すべきです。
検証ツールによっては、これらの過剰な使用も警告として提示されます。

属性値のクォート忘れや無効な値に注意

HTMLでは属性値を"で囲むことが推奨されており、これを省略すると予期せぬ解釈が起きる場合があります。
また、type="text"やrel="noopener"のような属性には、想定された値以外を設定すると無効化されてしまうケースもあります。
正しくマークアップされていても、属性の値が仕様に沿っていなければ、ブラウザや支援技術の挙動が不安定になります。

HTML Living Standardに基づいた設計を

現在のHTMLは「HTML5」よりもさらに更新されたHTML Living Standardに基づいて進化しています。
<main>、<section>、<figure>などの意味を理解し、構文検証だけでなく「意味的に正しいマークアップ」を意識することで、検索性やアクセシビリティの高いコンテンツが実現できます。
バージョンではなく「仕様と目的」に目を向けたHTML設計が、長期的な保守にもつながります。

ツールの仕組み解説

// 自動で閉じタグが不要な要素（imgなど）をリストアップ
const voidElements = new Set([ 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr' ]);

imgやbrなどの要素は、HTML上で「終了タグ」が不要です。このvoidElementsを使って、検証対象から除外します。

// 入力されたHTMLをタグごとに抽出し、スタック構造で整合性を検証
function parseAndValidateHTML(html) {
	const errors = []; const stack = [];
	const tagPattern = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g;
	// ...タグ抽出とチェック処理...
}

ここでは正規表現を使って、すべての<タグ>を抽出。その後、開くタグはスタックに積み、閉じタグが来たら対応する開きタグと比較します。スタックの仕組みを使えば、入れ子構造も正しく検出できます。

// 不正なタグの組み合わせを検出し、エラー内容を記録
if (stack.length === 0) {
	errors.push({
		type: 'orphan_close_tag', message: '...'
	});
}

スタックが空なのに閉じタグが現れた場合、それは「対応する開始タグがない＝タグの閉じ忘れ」エラーとして記録されます。

// 閉じられていない開始タグを検出
for (const unclosedTag of stack) {
	errors.push({
		type: 'unclosed_tag', message: '...'
	});
}

処理がすべて終わったあと、スタックにタグが残っていれば、それは閉じタグが不足しているということ。これも明確にエラー表示します。

// 結果を画面に反映し、エラータグをハイライト表示
function displayResults(validationResult) {
	// 問題のあるタグには.error-highlightを挿入
}

エラーがあった箇所は、自動的にHTMLを<span>で囲って、色付きでハイライト表示します。ユーザーが一目で問題を確認できるように設計されています。

// ユーザーがエラーリストをクリックすると、該当のタグへスクロール
function scrollToError(errorIndex) {
	const targetElement = document.getElementById(`error-${errorIndex}`);
	// スムーズにスクロール
}

リスト化されたエラーをクリックすると、そのタグへスクロール。実際のHTMLと照らし合わせながら編集できるよう工夫しています。

// HTML入力欄に文字が入力されるたびに検証を実行
document.getElementById('htmlInput').addEventListener('input', function() {
	clearTimeout(this.validationTimeout);
	this.validationTimeout = setTimeout(validateHTML, 300);
});