HTML（Hypertext Markup Language，超文本標記語言）是網頁制作的基礎語言，包含層級結構，也稱為DOM樹。我們可以使用HTML層級結構圖代碼來描述DOM樹層級關系。下面是一個常見的HTML層級結構圖代碼，使用pre標簽包裹起來：
<body>
<header>
<h1>網站標題</h1>
<nav>
<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article>
<aside>
<h3>側邊欄標題</h3>
<p>側邊欄內容...</p>
</aside>
</main>
<footer>
<p>版權信息...</p>
</footer>
</body>在這個代碼中，整個頁面的層級結構是由<body>標簽開始的，其中包含了<header>、<main>和<footer>等標簽。<header>標簽包含了網站標題和導航菜單，<main>標簽包含了文章和側邊欄，<footer>標簽包含了版權信息。
在<main>標簽中，我們可以看到<article>和<aside>標簽，它們也有自己的子元素。<article>標簽包含了文章標題和內容，<aside>標簽包含了側邊欄標題和內容。
這樣的層級結構可以幫助我們更好地組織網頁內容，并方便搜索引擎的收錄和用戶的閱讀。因此，深入理解HTML層級結構圖代碼是十分重要的。