在HTML中，我們可以使用語義標簽來描述頁面中各個元素的含義。這不僅能增加網頁的可讀性，還有助于SEO優化。而在CSS中，我們可以利用這些語義標簽來實現布局。

header {
height: 60px;
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
} 
nav {
display: flex;
} 
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
} 
nav ul li {
margin-right: 20px;
} 
section {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px);
}

在上述代碼中，我們利用了HTML5中的header、nav和section標簽來表示網頁的頭部、導航欄和主要內容區域。結合CSS的display屬性，我們可以輕松地實現布局效果，例如設置header為flex布局，使其子元素水平排列、垂直居中；nav為flex布局，使其子元素水平排列。通過這種方式實現布局，我們不僅提高了代碼的可讀性和維護性，還能保證網頁的語義正確，同時增加網頁的SEO價值。