html函数如何构建标记注释功能 html函数标记标签的语义化

<p contenteditable="true" id="text-to-annotate">
  这是一段可以被注释的文字。
</p>
<p><button onclick="highlightSelection()">标记选中文本</button></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2181">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680422542449.png" alt="钛投标">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2181">钛投标</a>
                            <p>钛投标 | 全年免费 | 不限字数 | AI标书智写工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="钛投标">
                                <span>157</span>
                            </div>
                        </div>
                        <a href="/ai/2181" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="钛投标">
                        </a>
                    </div>
                <p><script>
function highlightSelection() {
const selection = window.getSelection();
if (selection.toString().length === 0) return;</p><p>const span = document.createElement("span");
span.style.backgroundColor = "yellow";
span.className = "annotation";</p><p>selection.getRangeAt(0).surroundContents(span);
selection.removeAllRanges();
}
</script>

<p>
  这是一个 <span data-annotation='{"user":"张三","date":"2024-05-20"}' 
                class="highlight">重要概念</span>。
</p>