Bố cục website như thế nào ?

Hiện nay phiên bản HTML mà hầu hết mọi người sử dụng và tuân theo đó là phiên bản HTML5, phiên bản ra đời giúp cải thiện khả năng đọc hiểu cho con người và các phương tiện thiết bị khác như công cụ tìm kiếm, trình duyệt web, các công cụ phân tích .... Chính vì thế mà mỗi thẻ đều có ý nghĩa riêng.

Bố cục của 1 trang web

bố cục

Trước tiên bố cục của 1 trang web rất đa dạng và linh hoạt tùy theo nhu cầu thẩm mỹ, phân loại web .... nên có rất rất nhiều các bố cục khác nhau. Nhưng tựu chung 1 web cơ bản đều chứa 3 phần Đầu trang , phần thân trang, phần cuối trang

Đầu trang

Đây là phần đầu tiên của mỗi trang chứa logo , menu, ô tìm kiếm, thông tin thời tiết, ngày tháng ... Theo chuẩn HTML5 để cho người và các công cụ khác hiểu được đây là phần đầu tiên của trang thì chúng ta dùng thẻ <header >... </header > bên trong thẻ này có thể sẽ chứa rất nhiều thẻ con khác nhưng nếu chúng ta viết mã phần đầu trang thì nên có thẻ này đầu tiên. Trong phần này chúng ta cũng có thẻ <nav >... </nav > thẻ này mục đính là chứa những nội dung chính của trang và giúp điều hướng chuyển người dùng đến các chủ đề khác trong trang.

Thân trang

Đây là phần quan trọng nhất của bất kỳ trang web nào nó thể hiện nội dung mà trang đó truyền đạt thông thường để bắt đầu xây dựng phần thân chúng ta sẽ bắt đầu với thẻ <section >... </section > thẻ này dùng để xác định hay chọn lấy 1 vùng , 1 phần tử độc lập (như 1 đoạn văn bản 1 bức ảnh ...) Nó như 1 cái thùng catton nơi mà bạn có thể bỏ vào đó bất cứ thứ gì bạn muốn.

Thẻ <artical >... </artical > thường được sử dụng để đánh dấu một bài viết trong trang như 1 bài báo, 1 bài review đây là các nội khung khép kín và độc lập . Phân biệt 2 thẻ này nhé các bạn. Thẻ <section > bên trong nó bắt buộc phải có thẻ tiêu đề ( thẻ <h1 -> h6 > ) và các nội dung bên trong phải cùng 1 chủ đề. Thẻ <artical > nội dung trong thẻ độc lập riêng biệt tách rời với các nội dung khác của web.

Thẻ <aside > các thành phần bên trong thẻ này có liên quan đến phần nội dung chính, và hay được sử dụng để thiết kế sidebar các phần như bài viết liên quan, video liên quan ... Trong thực tế thì việc sử dụng 2 thẻ này rất linh hoạt thẻ <artical > có thể là thẻ cha của thẻ <section > hoặc ngược lại. Ví dụ như blog này của mình , thẻ <section > là thẻ cha của thẻ <artical > .

Cuối trang

Đây là phần cuối của mỗi trang web thường chứa các thông tin liên quan đến web như thông tin liên hệ , chính sách và điều khoản, nhưng lưu ý , .... Và để xây dựng phần cuối trang chúng ta nên bắt đầu với thẻ <footer > . Thường thì lúc mới đầu thiết kế mình thường không thấy được phần quan trọng của phần này, nhưng giờ thì mình đã biết nó có độ quan trọng trong việc Google cảm thấy web của bạn là an toàn và uy tín.

Kết lại

Xây dựng bố cục website đẹp và ưng ý không hẳn dễ dàng những thứ mình chia sẻ bên trên hầu như website nào cũng phải có và tùy theo từng mục đính thiết kế mà chúng ta sử dụng linh hoạt các thẻ trên. Chúc các bạn 1 ngày thành công. Cảm ơn bạn đã đọc.

Tag: HTML