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)は、ウェブページを作成するために使用される標準的なマークアップ言語です。

MDN Web Docs

主要機能

🔍 高精度解析

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

📊 要素分類

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

🏗️ 階層構造

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

お問い合わせフォーム

基本情報
詳細情報
5

メディア要素

Tree-sitter Analyzerのロゴ
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ページのスタイルを定義するためのスタイルシート言語