在開始學習網頁排版前，必須先釐清一些網站設計的觀念。這樣在正式排版時，才不會時常遇到畫面沒有辦法對齊或沒辦法放到想要的位置。
容器介紹
在進行網站排版前，要先理解一個觀念。那就是網站是由多個容器組合而成的。 以Google搜尋的網站為例子，可以看到這個頁面至少切割成5塊區域。這個區塊就是容器，且容器內也可以再放容器。基本上就把它想成是收納箱裡還有收納盒的概念。
通常設計一個網站，都會根據需求先用大容器畫出特定範圍，在使用小容器呈現功能。
以Logo這個容器為例，他先用大容器設計出這個空間是專門放Logo的，在使用圖片<img>作為小容器，以呈現Google的Logo。
常用的容器排版標籤
知道網頁的設計方式是大的容器搭配小的容器產生出來的效果後，接著就是要向大家介紹，常用來做容器排版的標籤有哪些。
1.div
<div>全名為division，主要是分區的意思。我可以透過三個<div>區分要呈現的內容並使用CSS分別做些設計，來製作一個含有網站名稱、內容及版權的網站。
2.Semantic Elements
因為常見的網站樣式的基本架構都差不多，於是在HTML5就增加了語意元素(Semantic Elements)，
其中針對排版的部分提供了<header>、<section>、<footer>、<aside>、<nav>及<article>幾個標籤。
根據以下範例可以看到，我們將<div>更換為Semantic Elements並呈現相同的網站風格。
Semantic Elements主要目的是希望可以快速了解這段HTML的目的為何，相較之下，若是都使用
<div>可閱讀性就比較差。
3.Frameworks
許多前端Framework也都提供它們的排版方式。比如以ElementPlus為例，
針對排版的部分提供了<el-container>、<el-header>、<el-aside>及<el-footer>幾個標籤讓大家使用。
總結
今天先教大家容器的概念，這對以後網頁排版相當重要。後續會在逐步向大家介紹排版的一些技巧。