Tôi thừa nhận mình là một trong những mắc hội chứng này khi thiết kế trang web với CSS, Div là thứ dễ quen tay để đưa vào tất cả mọi thứ khi làm layout. Thậm chí đôi khi mỗi đoạn text cũng bị bao quanh bởi thẻ div đại loại như <div class=”para”>…</div> thật là thái quá, nhưng hoàn dễ hiểu. Khi bắt đầu học CSS, mối bận tâm lớn nhất của bạn đó là làm sao để dàn trang web như ý muốn chứ không phải vấn đề là tạo các trang web có cấu trúc đánh dấu ngữ nghĩa (semantic markup). Cạnh đó hầu hết các bài mẫu đều sử dụng thẻ div để trình bày cách dàn trang bằng CSS. Vậy thì điều đó có gì khác biệt.

Hãy bắt đầu nghĩa về cấu trúc đánh dấu ngữ nghĩa (semantic markup)

Khi bạn khởi tạo thiết kế một trang web, một công việc mà sự tạo kiểu tách rời với nội dung, bạn cũng nên đánh dấu (markup) nội dung trang web theo cách xác định nghĩa chính xác những gì mà nội dung nó hàm chứa. Để thực hiện cách làm này, bạn có thể nên nghĩ đến cấu trúc của trang và những phần tử (element) được đặt trên trang hơn là những thứ trông ở bề ngoài, bởi vì với CSS bạn thể tạo kiểu dáng tùy ý ở các thẻ. Để dễ hiểu bạn tham khảo ví dụ  các thành phần cơ bản thường thấy ở một trang web bao gồm dưới đây:

  • Logo
  • Dòng dẫn đến trang hiện hữu (breadcrum)
  • Thanh/hộp tìm kiếm (search bar/box)
  • Bản điều hướng bên trái (Navigation on the left)
  • Tiêu đề, phụ đề và thông tin tác giả ( title, sub-title, and author information)
  • Nội dung thân bài (body content)

Thông thường chúng ta thường thêm các markup với div và gán vào cho chúng các id. Về mặt ngữ nghĩa, không phải tất cả chúng là một phần của nội dung. Thực tế, tùy trường hợp mỗi thành phần đều có vai trò cụ thể trên trang. (nếu bạn đang sử dụng html5 bạn có thể tham khảo một số thẻ mới như nav, footer, aside, article ..vv)

Logo

Nếu bạn nghĩ đây là một phần quan trọng của trang bạn nên dùng thẻ <h1> bao ngoài hình ảnh. Nếu đơn giản chỉ sử dụng một hình ảnh bạn có thể sử dụng thẻ <img> và đặt một id để chỉ định đó là một logo

Dòng điều hướng dẫn đến trang hiện hữu (breadcrumb)

Có thể đây không phải là một phần quan trọng của trang nhưng vẫn thuộc phần tiêu đề, bạn có thể sử dụng thẻ <h5> hoặc <h6> để đánh dấu cho trình duyệt biết đây là một phần tiêu đề, nhưng đó không phải là phần quan trọng nhất. NÊN NHỚ rằng khi sử dụng CSS chúng ta có thể tạo kiểu bề ngoài của chúng theo cách ta muốn, đừng quá đắn đo nếu sợ rằng thẻ <h1> thường mặc định có chữ to kệch và xấu xí – hãy nghĩ theo cách là bạn dùng thẻ <h5> để chỉ rằng đây là một tiêu đề có tầm quan trọng thấp hơn chứ không phải vì vẻ bề ngoài của chúng.

Thanh/hộp tìm kiếm (search bar/box)

Có thể dùng <h4> vì nó nằm trên thanh tiêu đề nhưng tầm quan trọng thấp hơn breadcrumb.

Thanh/Bảng điều hướng – navigation

Hầu hết đây là bảng danh sách các liên kết, vì vậy bạn nên sử dụng các đánh dấu danh sách như <ul>, những phần tiêu đề chính của danh sách bạn có thể dùng thẻ header như <li><h4>tiêu đề liên kết</h4></li> và gán các id để xác định từng loại.

Tiêu đề, phụ đề và thông tin tác giả ( title, sub-title, and author information)

Đây cũng rõ ràng là một phần của tiêu đề, bạn có thể sử dụng hình ảnh trong phần thông tin tác giả, nhưng nên hạn chế nếu không cần thiết.

Nội dung thân bài (body content)

Ở phần này bạn có thể dùng các thẻ div nhưng nên sử dụng thẻ header <h1>,<h2>,<h3> … cho các tiêu đề và thẻ <p> cho các đoạn văn bản.

Kết luận

Bài viết này không phải khuyên bạn không dùng <div> mà nên dùng chúng đúng mục đích, <div> có nghĩa là division: sự phân chia, do vậy chúng ta chỉ sử dụng chúng khi để phân chia hợp lý các nội dung khi không thể sử dụng các thẻ khác cùng mục đích. Sử dụng đánh dấu ngữ cảnh không những giúp trang web của bạn có cấu trúc hợp lý  mà còn giúp tăng khả năng thu thập nội dung từ các cổ máy tìm kiếm, cải thiện khả năng tìm kiếm đúng nội dung và tăng thứ hạng trong các kết quả tìm kiếm.

Xem ví dụ một trang web HTML5 mẫu được thiết kế có cấu trúc đánh dấu ngữ cảnh:

Layout
html5pagelayout

HTML5 Code


	

CSS

/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
	width: 960px;
}

#pageHeader {
    margin:0px auto 0px auto;
    width:960px;
    height:82px;
    position:relative;
}

#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}

#pageFooter {
    margin: 0px auto;
    padding-bottom: 20px;
	width: 960px;
	position: relative;
}

/* Clear Floated Elements */
.clearfix:before, .clearfix:after {content: "\0020"; 
display: block; height: 0; visibility: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Nguồn: webdesign.about.com & codeproject.com

Facebook Comments