HTML 3列代碼可以讓網頁的布局更加美觀和有序，其基本結構由三個div組成，每個div對應網頁的一個區域，從而實現對網頁內容的精細控制。

<div class="left-column">
左側區域
</div>
<div class="middle-column">
中間區域
</div>
<div class="right-column">
右側區域
</div>

在以上代碼中，每個div用class屬性進行定義，從而為它們設置樣式。通常情況下，我們會在CSS中進行相應的設定，比如寬度、背景顏色、邊距等等。相應的CSS代碼如下：

.left-column {
float: left;
width: 20%;
background-color: #f2f2f2;
margin-right: 5%;
}
.middle-column {
float: left;
width: 60%;
background-color: #ffffff;
margin-right: 5%;
margin-left: 5%;
}
.right-column {
float: left;
width: 20%;
background-color: #f2f2f2;
}
.clearfix {
clear: both;
}

上述CSS代碼分別為三個區域設置了樣式，左側區域寬度為20%，背景顏色為淺灰色，右側區域同理，中間區域寬度為60%，背景顏色為白色，左右間距為5%。同時，為了清除浮動產生的影響，我們在最后定義了一個clearfix類，將浮動的元素清除，從而保證布局的正常顯示。

通過這樣的HTML 3列代碼的編寫，我們可以輕松實現網頁的多區域布局，更好的展示網頁中的各種元素。