HTML5 包括的サンプル | Tree-sitter Analyzer
Author: Tree-sitter Analyzer Team
Description: HTML5包括的サンプル - Tree-sitter Analyzerのテスト用
Keywords: HTML5, サンプル, テスト, tree-sitter

# HTML5 包括的サンプル

Tree-sitter AnalyzerによるHTML解析のテスト

詳細を見る

## 概要

HTML5の全主要要素を含むサンプル

### このサンプルについて

このHTMLファイルは、Tree-sitter AnalyzerのHTML解析機能をテストするために作成されました。

以下の要素が含まれています：

含まれる要素の詳細

- セマンティック要素（header, nav, main, section, article, aside, footer）
- テキスト要素（h1-h6, p, span, div）
- `インライン要素`（a, strong, em, mark, code）
- リスト要素（ul, ol, li, dl, dt, dd）
- フォーム要素（form, input, textarea, select, button）
- メディア要素（img, video, audio, picture, source）
- テーブル要素（table, thead, tbody, tr, th, td）

> HTML（HyperText Markup Language）は、ウェブページを作成するために使用される標準的なマークアップ言語です。

## 主要機能

### 🔍 高精度解析

Tree-sitterによる正確なHTML構造解析

### 📊 要素分類

HTML要素の自動分類とカテゴライゼーション

### 🏗️ 階層構造

DOM階層の完全な把握と可視化

## お問い合わせフォーム

基本情報
お名前 *
メールアドレス *
電話番号
生年月日
ウェブサイト
詳細情報
カテゴリ
優先度
低 中 高
興味のある機能（複数選択可）
HTML解析 CSS解析 JavaScript解析 MCP統合
メッセージ
添付ファイル
経験レベル 5

## メディア要素

Tree-sitter Analyzerのロゴ

お使いのブラウザは動画タグをサポートしていません。

デモンストレーション動画

お使いのブラウザは音声タグをサポートしていません。

音声ガイド

## データテーブル

HTML要素の分類表
カテゴリ | 要素名 | 説明 | 使用頻度
--- | --- | --- | ---
構造要素 | `header` | ページやセクションのヘッダー | 高
`main` | メインコンテンツ | 高
`footer` | ページやセクションのフッター | 高
テキスト要素 | `h1-h6` | 見出し要素 | 高
`p` | 段落要素 | 高
フォーム要素 | `input` | 入力フィールド | 中
`button` | ボタン要素 | 中
※ 使用頻度は一般的なWebサイトでの使用状況に基づく

## リスト要素

### 機能一覧

- HTML解析
  - 要素抽出
  - 属性解析
  - 階層構造分析
- CSS解析
  - セレクタ解析
  - プロパティ分類
  - スタイルルール抽出
- MCP統合

### セットアップ手順

1. 依存関係のインストール
   1. uvのインストール
   2. fdとripgrepのインストール
2. パッケージのインストール
3. 設定ファイルの作成
4. テストの実行

### 用語集

Tree-sitter
  プログラミング言語のパーサージェネレーター
MCP (Model Context Protocol)
  AIモデルとアプリケーション間の通信プロトコル
DOM (Document Object Model)
  HTMLやXML文書の構造を表現するためのAPI
CSS (Cascading Style Sheets)
  Webページのスタイルを定義するためのスタイルシート言語