Ý nghĩa thực sự của việc tách nội dung và bản trình bày là gì?

Question

Ý nghĩa thực sự của việc tách nội dung và bản trình bày là gì?

Chỉ có nghĩa là để tránh css nội tuyến?

Điều đó có nghĩa là thiết kế sẽ có thể thao tác mà không thay đổi HTML?

Chúng tôi có thể thực sự thực hiện bất kỳ thay đổi nào về thiết kế từ CSS không?

• Nếu chúng ta muốn thay đổi kích thước của hình ảnh thì chúng ta sẽ phải đến trong HTML code
• Nếu chúng ta wan để thêm một ngắt dòng ở đoạn sau đó một lần nữa chúng tôi sẽ phải đến trong HTML code
• Nếu chúng ta muốn thêm một tách tại một số vị trí sau đó một lần nữa chúng ta sẽ có đến trong HTML code

nào X/HTML tag chúng ta nên tránh cho chúng tôi e để giữ tách nội dung và bản trình bày?

Việc tách nội dung và bản trình bày cũng hữu ích cho người dùng có khả năng truy cập/trình đọc màn hình không? ... và cho lập trình viên/nhà phát triển/nhà thiết kế?

Answer 1

Khi xác định nội dung và bản trình bày là gì, hãy xem tài liệu HTML của bạn dưới dạng vùng chứa dữ liệu. Sau đó, hãy tự hỏi sau đây trên mỗi phần tử và thuộc tính:

• Liệu thuộc tính/yếu tố đại diện cho một tổ chức có ý nghĩa trong dữ liệu của tôi?
  Ví dụ: các từ giữa thẻ <b> có in đậm chỉ dành cho mục đích hiển thị hay tôi muốn thêm trọng tâm vào dữ liệu đó?

• Tôi có sử dụng thuộc tính/yếu tố thích hợp cho thuộc tính thể hiện loại dữ liệu tôi muốn đại diện không?
  Vì tôi muốn nhấn mạnh vào phần cụ thể đó, tôi nên sử dụng <em> (nó không có nghĩa là nghiêng, có nghĩa là nhấn mạnh và có thể được in đậm) hoặc <strong> tùy thuộc vào mức độ nhấn mạnh mong muốn.

• Tôi có sử dụng thuộc tính/yếu tố chỉ cho mục đích hiển thị không? Nếu có, phần tử có thể được xóa và phần tử cha được tạo kiểu bằng CSS không?
  Đôi khi thẻ trình bày có thể được thay thế đơn giản bằng các quy tắc CSS trên phần tử gốc.Trong trường hợp đó, thẻ trình bày cần được loại bỏ.

Sau khi tự hỏi mình ba câu hỏi đơn giản này, bạn thường có thể đưa ra quyết định sáng suốt. Một ví dụ:

gốc Mã số: <label for="name"><b>Name:</b></label>

Kiểm tra thẻ <b> ...

Liệu thuộc tính/yếu tố đại diện cho một tổ chức có ý nghĩa trong dữ liệu của tôi?
Không, thẻ không đại diện cho nút dữ liệu. Nó là hoàn toàn cho trình bày.

Tôi có sử dụng thuộc tính/yếu tố thích hợp cho thuộc tính thể hiện loại dữ liệu tôi muốn đại diện không?
<b> được sử dụng để trình bày các phần tử in đậm.

Tôi có sử dụng thuộc tính/yếu tố chỉ cho mục đích hiển thị không? Nếu có, phần tử có thể được xóa và phần tử cha được tạo kiểu bằng CSS không?
Vì <b> là thuyết trình và tôi đang sử dụng nó để trình bày, có. Và kể từ khi yếu tố <b> ảnh hưởng đến toàn bộ <label>, nó có thể bị xóa và kiểu được áp dụng cho <label>.

Mục tiêu của HTML ngữ nghĩa là không đơn giản hóa thiết kế và thiết kế lại hoặc để tránh tạo kiểu nội tuyến, nhưng để giúp trình phân tích cú pháp hiểu những gì thẻ cụ thể đại diện trong tài liệu của bạn. Bằng cách đó, các ứng dụng có thể được tạo ra (tức là: công cụ tìm kiếm) để thông minh quyết định nội dung của bạn có ý nghĩa gì và phân loại nó cho phù hợp.

Do đó, bạn nên sử dụng thuộc tính CSS content: để thêm dấu ngoặc kép xung quanh văn bản nằm trong thẻ <q> (không có giá trị cho dữ liệu trong tài liệu của bạn khác bản trình bày đó), nhưng không có ý nghĩa Thuộc tính CSS để thêm biểu tượng © vào chân trang của bạn vì nó có giá trị trong dữ liệu của bạn.

Cùng áp dụng cho các thuộc tính. Sử dụng thuộc tính width và height trên thẻ <img> đại diện cho biểu tượng ở kích thước 16x16 có ý nghĩa ngữ nghĩa vì điều quan trọng là hiểu ý nghĩa của thẻ <img> (biểu tượng có thể có các biểu diễn khác nhau tùy thuộc vào kích thước được hiển thị). Sử dụng các thuộc tính giống nhau trên thẻ <img> thể hiện hình thu nhỏ của hình ảnh lớn hơn thì không.

Đôi khi bạn sẽ cần phải thêm các phần tử không ngữ nghĩa để có thể đạt được bản trình bày mong muốn của bạn, nhưng thường thì những điều đó có thể tránh được.

Không có yếu tố sai. Có sử dụng sai các yếu tố cụ thể. <b> không nên được sử dụng khi thêm nhấn mạnh. <small> nên được sử dụng cho văn bản phụ hợp pháp, không làm cho văn bản nhỏ hơn (xem HTML5 - Section 4.6.4 vì lý do), v.v ... Tất cả các phần tử đều có một kịch bản sử dụng cụ thể và tất cả đều biểu diễn dữ liệu (trừ các phần tử thuyết trình, nhưng chúng có sử dụng một số trường hợp). Không có yếu tố nào được đặt sang một bên.

Thuộc tính là một điều khác.Hầu hết các thuộc tính đều mang tính chất thuyết trình. Các thuộc tính như <img border> và <body fgcolor> hiếm khi có dấu hiệu trong dữ liệu bạn đại diện do đó bạn không nên sử dụng chúng (ngoại trừ trong những trường hợp hiếm hoi).

---

Công cụ tìm kiếm là một ví dụ tốt về lý do tài liệu ngữ nghĩa quan trọng như vậy. Microformats là tập hợp các phần tử và lớp được xác định trước mà bạn có thể sử dụng để trình bày dữ liệu mà công cụ tìm kiếm sẽ hiểu theo một cách nhất định. The product price information in Google Searches là một ví dụ về ngữ nghĩa tại nơi làm việc.

Bằng cách sử dụng các quy tắc được xác định trước trong tiêu chuẩn đã đặt để lưu trữ thông tin trong tài liệu của bạn cho phép chương trình của bên thứ ba hiểu nội dung có vẻ là tường văn bản mà không sử dụng thuật toán chẩn đoán có thể dễ bị lỗi. Nó cũng giúp người đọc màn hình và các ứng dụng trợ năng khác dễ dàng hiểu được ngữ cảnh trong đó thông tin được trình bày. Nó cũng giúp duy trì khả năng đánh dấu của bạn vì mọi thứ được gắn với một định nghĩa đã định.

Answer 2

Ví dụ tốt nhất có lẽ là CSS Zen Garden.

Mục tiêu của trang web này là để giới thiệu những gì có thể với thiết kế dựa trên CSS, với sự tách biệt nội dung khỏi thiết kế. Phong cách trang được đóng góp bởi các nhà thiết kế đồ họa khác nhau được sử dụng để thay đổi cách trình bày trực quan of a single HTML file, sản xuất hàng trăm mẫu thiết kế khác nhau. Bản thân đánh dấu HTML không bao giờ thay đổi giữa các thiết kế khác nhau.

Trên mỗi trang thiết kế, bạn sẽ có liên kết để xem tệp CSS của thiết kế đó.

Answer 3

Đặt ngắt dòng tại một số điểm nhất định là không thể tránh khỏi, thường sẽ có một số trùng lặp về bản trình bày và nội dung. Bạn nên luôn luôn nhằm mục đích tách hoàn hảo mặc dù.

Đem theo thái cực khác: Trang chứa tải và vô số bảng chỉ được sử dụng cho mục đích bố cục. Đây là mẫu chống xác định cần tránh bằng mọi giá. Nội dung đóng một fiddle thứ hai sau khi bố trí ở đây; nó thường không đúng thứ tự và do đó hầu như không thể đọc được. Không phải nội dung có thể đọc được máy không phù hợp với khả năng truy cập và không tốt cho xếp hạng công cụ tìm kiếm của trang.

Bằng cách đánh dấu nội dung mà không cần quan tâm đến bản trình bày, trước hết bạn sẽ làm cho máy có thể đọc được. Sau đó, bạn cũng ở một vị trí để phân phối cùng một nội dung cho các khách hàng khác nhau ở các định dạng khác nhau, ví dụ như trong phiên bản được tối ưu hóa cho thiết bị di động. Bạn cũng có thể thay đổi bản trình bày dễ dàng mà không cần phải gây rối với các tệp HTML, nói cho một thiết kế lại lớn.

Một lợi ích khác xuất hiện một cách tự nhiên bằng cách tách nội dung và bản trình bày (HTML - tệp CSS) là bạn ít phải nhập và ít hơn để duy trì, cộng với các trang của bạn có thể có kiểu dáng nhất quán được áp dụng rất dễ dàng. Tương phản hàng nghìn kiểu nội tuyến so với một định nghĩa kiểu trong một tệp CSS, được "tự nhiên" áp dụng cho tất cả các phần tử có cùng "ý nghĩa" (đánh dấu).

Lý tưởng nhất là (X) HTML của bạn chỉ bao gồm đánh dấu ý nghĩa, ngữ nghĩa và CSS của các kiểu bằng cách sử dụng đánh dấu này cho các bộ chọn của nó. Trong thế giới thực, bạn thường sẽ kết hợp các lớp và ID vào đánh dấu của bạn mà không thêm ý nghĩa, bởi vì bạn cần thêm "móc" để tạo kiểu cho mọi thứ theo cách bạn muốn. Nhưng ngay cả ở đây cũng có sự khác biệt giữa class="blue right-aligned" và class="contact-info secondary". Luôn cố gắng thêm nghĩa là vào nội dung chứ không phải kiểu. Cân bằng điều này là khá một nghệ thuật trong chính nó. :)

Answer 4

Ý nghĩa thực sự của việc tách nội dung và bản trình bày là gì?

Đó là một triết lý thiết kế hơn là hơi cụ thể. Nói chung, điều đó có nghĩa là bạn nên duy trì ngữ nghĩa của nội dung, suy nghĩ về nội dung của bạn như một phần thông tin có cấu trúc. Và điều đó cũng có nghĩa là bạn nên giữ tất cả các chi tiết thẩm mỹ tránh xa thông tin có cấu trúc này.

chỉ có nghĩa là tránh css nội tuyến?

Như đã lưu ý ở trên, kiểu nội tuyến không liên quan gì đến ngữ nghĩa nội dung của bạn và phải tránh bằng mọi giá. Nhưng không phải là chỉ điều đó.

là nó chỉ có nghĩa là nếu sau khi viết html theo thiết kế sau đó nếu sau đó nếu chúng tôi muốn làm bất kỳ thay đổi trong thiết kế sau đó nó nên được chỉ với css, không cần phải html

Thật không may, nó không phải lúc nào cũng có thể đạt được một số mục tiêu thẩm mỹ cụ thể mà không sửa đổi đánh dấu cơ bản; CSS3 cố gắng hết sức để giải quyết những vấn đề này.

Thẻ X/HTML nào chúng ta nên tránh sử dụng để giữ tách nội dung và bản trình bày?

Look cho thẻ bị phản đối trong W3C HTML 4.01/XHTML 1.0 Reference

là tách nội dung và trình bày cũng hữu ích cho người dùng đọc tiếp cận/màn hình?

Chắc chắn. Thông tin có cấu trúc tốt hơn thường vẫn có thể đọc được ngay cả khi một số trình duyệt nhất định hiển thị kiểu không chính xác (hoặc không hiển thị chúng ở tất cả). Nội dung như vậy cũng có thể trông đầy đủ hơn trên phương tiện truyền thông in (mặc dù các kiểu in có thể được áp dụng để đạt được các tính năng tốt hơn nữa - chúng lại không liên quan gì đến ngữ nghĩa nội dung).

Việc tách nội dung và bản trình bày cũng hữu ích cho lập trình viên/nhà phát triển/nhà thiết kế không?

Tất nhiên. Việc tách nội dung và bản trình bày lấy nguồn gốc từ triết lý chung chung hơn, sự tách biệt các mối quan tâm. Mọi người đều được hưởng lợi từ việc tách biệt: nhà cung cấp nội dung không phải là nhà thiết kế tốt và ngược lại.