div role main是一種在HTML中使用的角色屬性（role attribute）的一種取值。在HTML中，<div>標(biāo)簽通常用于定義文檔中的一個分隔塊。通過給<div>標(biāo)簽添加role屬性，并將其取值設(shè)置為"main"，我們可以將該<div>元素標(biāo)記為一個主要內(nèi)容區(qū)域。

使用<div role="main">可以為我們的Web頁面提供更好的可訪問性和結(jié)構(gòu)層次。這個屬性告訴屏幕閱讀器和其他輔助技術(shù)，這個<div>元素是該頁面的主要內(nèi)容區(qū)域，以供使用者更容易地理解頁面的結(jié)構(gòu)和內(nèi)容。

下面是幾個示例，展示了如何在實際的HTML代碼中使用role="main"屬性：

第一個例子中，我們使用了一個<header>元素來定義頁面的頭部，然后使用<nav>元素來定義導(dǎo)航欄。最后，我們使用了一個<div>元素并將role屬性設(shè)置為"main"，來定義頁面的主要內(nèi)容區(qū)域：

<header role="banner">
<h1>網(wǎng)站標(biāo)題</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="#">鏈接1</a></li>
<li><a href="#">鏈接2</a></li>
<li><a href="#">鏈接3</a></li>
</ul>
</nav>
<div role="main">
<h2>歡迎來到我的網(wǎng)站</h2>
<p>這是我的個人網(wǎng)站，我將在這里分享一些有趣的內(nèi)容。</p>
</div>

在第二個例子中，我們使用了一個<aside>元素來定義網(wǎng)頁的側(cè)邊欄，然后使用<div>元素并將role屬性設(shè)置為"main"，來定義頁面的主要內(nèi)容區(qū)域。這種方式使得屏幕閱讀器和其他輔助技術(shù)可以更好地識別和理解頁面的結(jié)構(gòu)：

<div role="main">
<h1>歡迎來到我的博客</h1>
<p>這是一個關(guān)于技術(shù)和編程的博客。</p>
</div>
<aside role="complementary">
<h2>相關(guān)鏈接</h2>
<ul>
<li><a href="#">鏈接1</a></li>
<li><a href="#">鏈接2</a></li>
<li><a href="#">鏈接3</a></li>
</ul>
</aside>

第三個例子展示了一個更復(fù)雜的布局。我們使用了一個<header>元素來定義頁面的頭部，然后使用了一個<nav>元素和<aside>元素來定義導(dǎo)航欄和側(cè)邊欄。最后，我們使用了兩個<div>元素分別來定義兩個主要內(nèi)容區(qū)域，其中一個有role="main"屬性：

<header role="banner">
<h1>網(wǎng)站標(biāo)題</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="#">鏈接1</a></li>
<li><a href="#">鏈接2</a></li>
<li><a href="#">鏈接3</a></li>
</ul>
</nav>
<div role="main">
<h2>歡迎來到我的網(wǎng)站</h2>
<p>這是我的個人網(wǎng)站，我將在這里分享一些有趣的內(nèi)容。</p>
</div>
<aside role="complementary">
<h2>相關(guān)鏈接</h2>
<ul>
<li><a href="#">鏈接1</a></li>
<li><a href="#">鏈接2</a></li>
<li><a href="#">鏈接3</a></li>
</ul>
</aside>
<div>
<h2>更多內(nèi)容</h2>
<p>這是另一個主要內(nèi)容區(qū)域，用于顯示更多的信息。</p>
</div>

通過使用role="main"屬性，我們可以將頁面中的主要內(nèi)容區(qū)域標(biāo)記出來，提高了可訪問性和結(jié)構(gòu)層次。這有助于使頁面更易于被搜索引擎和輔助技術(shù)理解和解析，同時也使開發(fā)人員和維護者更方便地管理和修改頁面的內(nèi)容。因此，在開發(fā)Web頁面時，我們可以考慮使用role="main"屬性來標(biāo)記頁面的主要內(nèi)容區(qū)域。