1. Node（ノード）

役割:
文章の構造やコンテンツそのものを表す要素。
見出し、段落、画像、リスト、表などは全部 Node です。

種類:

• ブロック要素（block node）

  • 段落 <p>

  • 見出し <h1>〜<h6>

  • リスト <ul> / <ol>

  • テーブル <table>

  • 水平線 <hr>

• インライン要素（inline node）

  • リンク（hrefを持つ場合は Node にもなれる）

  • 画像 <img>

  • 特殊アイコンや埋め込みウィジェット

特徴:

• ドキュメントの「構造そのもの」を変える

• ノードはネストできる（例：<ul> の中に <li>）

• 属性を持てる（例：画像の src, alt）

2. Mark（マーク）

役割:
テキストに「装飾」や「意味づけ」を与える軽量なメタ情報。
太字、斜体、リンクなど。

例:

• 太字 <strong>

• 斜体 <em>

• 下線 <u>

• 打ち消し <s>

• コード <code>

• リンク <a href="">（Node ではなく Mark として実装する場合もある）

特徴:

• テキストの内容を変えずに見た目や意味を追加

• 複数重ねがけ可能（太字＋斜体など）

• 属性を持てる（例：リンクの href）

• マークはノードに直接つくのではなく、テキスト単位で適用される

3. 例（HTMLでの対応イメージ）

<p>

これは <strong>太字</strong> と

<em>斜体</em> のテキストです。

</p>

• <p> → Node（段落）

• <strong> → Mark（太字）

• <em> → Mark（斜体）

5. TipTap 実装面の違い

• Node → Node.create({ name, group, content, parseHTML, renderHTML, ... })

• Mark → Mark.create({ name, parseHTML, renderHTML, ... })

この違いのおかげで、
「構造を変える拡張」は Node
「見た目や意味を追加する拡張」は Mark
と明確に分けられます。