Một nguyên tắc quan trọng của phong trào Tiêu chuẩn Web chịu trách nhiệm cho ngành chúng ta có ngày nay là ý tưởng sử dụng các phần tử HTML cho những gì chúng thay vì cách chúng có thể xuất hiện trong trình duyệt theo mặc định. Điều này được gọi là sử dụng HTML ngữ nghĩa.
HTML ngữ nghĩa là gì
HTML ngữ nghĩa hoặc đánh dấu ngữ nghĩa là HTML giới thiệu ý nghĩa cho trang web chứ không chỉ là bản trình bày. Ví dụ, một thẻ
cho biết rằng văn bản được đính kèm là một đoạn văn.
Đây là cả ngữ nghĩa và thuyết trình, bởi vì mọi người biết đoạn văn nào là gì và trình duyệt biết cách hiển thị chúng.
Ở phía bên kia của phương trình này, các thẻ như và không phải là ngữ nghĩa, vì chúng chỉ xác định văn bản trông như thế nào (in đậm hoặc in nghiêng) và không cung cấp thêm bất kỳ ý nghĩa nào cho đánh dấu.
Ví dụ về các thẻ HTML ngữ nghĩa bao gồm các thẻ tiêu đề
đến , , và . Có nhiều thẻ HTML ngữ nghĩa hơn có thể được sử dụng khi bạn xây dựng trang web tuân thủ tiêu chuẩn.
Tại sao bạn nên quan tâm về ngữ nghĩa
Lợi ích của việc viết HTML ngữ nghĩa bắt nguồn từ những gì nên là mục tiêu lái xe của bất kỳ trang web nào - mong muốn giao tiếp. Bằng cách thêm các thẻ ngữ nghĩa vào tài liệu của bạn, bạn cung cấp thêm thông tin về tài liệu đó, hỗ trợ trong giao tiếp. Cụ thể, các thẻ ngữ nghĩa làm cho nó rõ ràng với trình duyệt ý nghĩa của một trang và nội dung của nó là gì.
Sự rõ ràng đó cũng được liên lạc với các công cụ tìm kiếm, đảm bảo rằng các trang bên phải được phân phối cho các truy vấn phù hợp.
Các thẻ HTML ngữ nghĩa cung cấp thông tin về nội dung của các thẻ đó vượt ra ngoài cách chúng trông như thế nào trên một trang. Văn bản được đính kèm trong thẻ được trình duyệt nhận ra ngay lập tức dưới dạng một số loại ngôn ngữ mã hóa.
Thay vì cố gắng hiển thị mã đó, trình duyệt hiểu rằng bạn đang sử dụng văn bản đó làm ví dụ về mã cho mục đích của một bài viết hoặc hướng dẫn trực tuyến thuộc loại nào đó.
Sử dụng thẻ ngữ nghĩa cung cấp cho bạn nhiều móc hơn để tạo kiểu cho nội dung của bạn. Có lẽ hôm nay bạn thích hiển thị mẫu mã theo kiểu trình duyệt mặc định, nhưng ngày mai, bạn muốn gọi chúng bằng màu nền xám và sau đó bạn muốn xác định nhóm phông chữ hoặc khoảng cách phông chữ chính xác để sử dụng cho mẫu của bạn. Bạn có thể dễ dàng làm tất cả những điều này bằng cách sử dụng đánh dấu ngữ nghĩa và CSS được áp dụng thông minh.
Sử dụng các thẻ ngữ nghĩa chính xác
Khi bạn muốn sử dụng các thẻ ngữ nghĩa để truyền tải ý nghĩa hơn là cho mục đích trình bày, bạn cần phải cẩn thận rằng bạn không sử dụng chúng một cách không chính xác chỉ cho các thuộc tính hiển thị chung của chúng. Một số thẻ ngữ nghĩa phổ biến nhất được sử dụng sai bao gồm:
- blockquote - Một số người sử dụng thẻ cho văn bản thụt lề không phải là một báo giá. Điều này là do các blockquotes được thụt lề theo mặc định. Nếu bạn chỉ đơn giản là muốn lợi ích của thụt lề, nhưng văn bản không phải là một blockquote, hãy sử dụng lề CSS để thay thế.
- p - Một số trình chỉnh sửa web sử dụng
& nbsp; (một khoảng trống không có trong paragraoph) để thêm khoảng trống giữa các phần tử trang, thay vì xác định các đoạn văn thực tế cho văn bản của trang đó. Như với ví dụ thụt lề đã đề cập trước đó, bạn nên sử dụng thuộc tính lề hoặc kiểu đệm để thêm dấu cách.
- ul - Giống như blockquote, kèm theo văn bản bên trong một thẻ
cho biết văn bản đó trong hầu hết các trình duyệt. Đây là cả HTML ngữ nghĩa không chính xác và không hợp lệ, vì chỉ các thẻ - hợp lệ trong thẻ
. Một lần nữa, sử dụng lề hoặc kiểu đệm để thụt lề văn bản.
- h1 – h6 - Các thẻ tiêu đề có thể được sử dụng để làm cho phông chữ lớn hơn và táo bạo hơn, nhưng nếu văn bản không phải là một tiêu đề, nó không nên nằm trong thẻ tiêu đề. Sử dụng các thuộc tính CSS có kích thước phông chữ và kích thước phông chữ thay vào đó nếu bạn muốn thay đổi kích thước hoặc trọng lượng của văn bản cụ thể trên trang của mình ..
Bằng cách sử dụng các thẻ HTML có ý nghĩa, bạn tạo các trang truyền đạt nhiều thông tin hơn là chỉ xung quanh mọi thứ bằng các thẻ
.
Thẻ HTML nào là ngữ nghĩa?
Mặc dù gần như mọi thẻ HTML4 và tất cả các thẻ HTML5 đều có ý nghĩa ngữ nghĩa, một số thẻ chủ yếu là ngữ nghĩa trong tự nhiên.
Ví dụ, HTML5 đã định nghĩa lại ý nghĩa của các thẻ và thành ngữ nghĩa. Thẻ không truyền đạt thêm tầm quan trọng, mà đúng hơn là văn bản thường được in đậm. Thẻ cũng không chuyển tải tầm quan trọng hoặc nhấn mạnh, mà là định nghĩa văn bản thường được hiển thị bằng chữ in nghiêng.
Thẻ HTML ngữ nghĩa
Tên viết tắt Từ viết tắt
Báo giá dài Định nghĩa <địa chỉ> Địa chỉ cho tác giả (s) của tài liệu Trích dẫn Tham chiếu mã Văn bản Teletype Phân chia hợp lý Thùng chứa kiểu nội tuyến chung Văn bản đã xóa Văn bản được chèn Nhấn mạnh Nhấn mạnh
Dòng tiêu đề cấp một
Dòng tiêu đề cấp hai
Dòng tiêu đề cấp ba
Dòng tiêu đề cấp bốn
Tiêu đề cấp thứ năm
Tiêu đề cấp thứ sáu
Nghỉ theo chủ đề Văn bản được người dùng nhập
Văn bản được định dạng trước
Báo giá nội tuyến ngắn Đầu ra mẫu Chỉ số Siêu văn bản Văn bản được xác định hoặc người dùng xác định
, và . Có nhiều thẻ HTML ngữ nghĩa hơn có thể được sử dụng khi bạn xây dựng trang web tuân thủ tiêu chuẩn.
Tại sao bạn nên quan tâm về ngữ nghĩa
Lợi ích của việc viết HTML ngữ nghĩa bắt nguồn từ những gì nên là mục tiêu lái xe của bất kỳ trang web nào - mong muốn giao tiếp. Bằng cách thêm các thẻ ngữ nghĩa vào tài liệu của bạn, bạn cung cấp thêm thông tin về tài liệu đó, hỗ trợ trong giao tiếp. Cụ thể, các thẻ ngữ nghĩa làm cho nó rõ ràng với trình duyệt ý nghĩa của một trang và nội dung của nó là gì.
Sự rõ ràng đó cũng được liên lạc với các công cụ tìm kiếm, đảm bảo rằng các trang bên phải được phân phối cho các truy vấn phù hợp.
Các thẻ HTML ngữ nghĩa cung cấp thông tin về nội dung của các thẻ đó vượt ra ngoài cách chúng trông như thế nào trên một trang. Văn bản được đính kèm trong thẻ được trình duyệt nhận ra ngay lập tức dưới dạng một số loại ngôn ngữ mã hóa.
Thay vì cố gắng hiển thị mã đó, trình duyệt hiểu rằng bạn đang sử dụng văn bản đó làm ví dụ về mã cho mục đích của một bài viết hoặc hướng dẫn trực tuyến thuộc loại nào đó.
Sử dụng thẻ ngữ nghĩa cung cấp cho bạn nhiều móc hơn để tạo kiểu cho nội dung của bạn. Có lẽ hôm nay bạn thích hiển thị mẫu mã theo kiểu trình duyệt mặc định, nhưng ngày mai, bạn muốn gọi chúng bằng màu nền xám và sau đó bạn muốn xác định nhóm phông chữ hoặc khoảng cách phông chữ chính xác để sử dụng cho mẫu của bạn. Bạn có thể dễ dàng làm tất cả những điều này bằng cách sử dụng đánh dấu ngữ nghĩa và CSS được áp dụng thông minh.
Sử dụng các thẻ ngữ nghĩa chính xác
Khi bạn muốn sử dụng các thẻ ngữ nghĩa để truyền tải ý nghĩa hơn là cho mục đích trình bày, bạn cần phải cẩn thận rằng bạn không sử dụng chúng một cách không chính xác chỉ cho các thuộc tính hiển thị chung của chúng. Một số thẻ ngữ nghĩa phổ biến nhất được sử dụng sai bao gồm:
- blockquote - Một số người sử dụng thẻ cho văn bản thụt lề không phải là một báo giá. Điều này là do các blockquotes được thụt lề theo mặc định. Nếu bạn chỉ đơn giản là muốn lợi ích của thụt lề, nhưng văn bản không phải là một blockquote, hãy sử dụng lề CSS để thay thế.
- p - Một số trình chỉnh sửa web sử dụng
& nbsp; (một khoảng trống không có trong paragraoph) để thêm khoảng trống giữa các phần tử trang, thay vì xác định các đoạn văn thực tế cho văn bản của trang đó. Như với ví dụ thụt lề đã đề cập trước đó, bạn nên sử dụng thuộc tính lề hoặc kiểu đệm để thêm dấu cách.
- ul - Giống như blockquote, kèm theo văn bản bên trong một thẻ
cho biết văn bản đó trong hầu hết các trình duyệt. Đây là cả HTML ngữ nghĩa không chính xác và không hợp lệ, vì chỉ các thẻ - hợp lệ trong thẻ
. Một lần nữa, sử dụng lề hoặc kiểu đệm để thụt lề văn bản.
- h1 – h6 - Các thẻ tiêu đề có thể được sử dụng để làm cho phông chữ lớn hơn và táo bạo hơn, nhưng nếu văn bản không phải là một tiêu đề, nó không nên nằm trong thẻ tiêu đề. Sử dụng các thuộc tính CSS có kích thước phông chữ và kích thước phông chữ thay vào đó nếu bạn muốn thay đổi kích thước hoặc trọng lượng của văn bản cụ thể trên trang của mình ..
Bằng cách sử dụng các thẻ HTML có ý nghĩa, bạn tạo các trang truyền đạt nhiều thông tin hơn là chỉ xung quanh mọi thứ bằng các thẻ
.
Thẻ HTML nào là ngữ nghĩa?
Mặc dù gần như mọi thẻ HTML4 và tất cả các thẻ HTML5 đều có ý nghĩa ngữ nghĩa, một số thẻ chủ yếu là ngữ nghĩa trong tự nhiên.
Ví dụ, HTML5 đã định nghĩa lại ý nghĩa của các thẻ và thành ngữ nghĩa. Thẻ không truyền đạt thêm tầm quan trọng, mà đúng hơn là văn bản thường được in đậm. Thẻ cũng không chuyển tải tầm quan trọng hoặc nhấn mạnh, mà là định nghĩa văn bản thường được hiển thị bằng chữ in nghiêng.
Thẻ HTML ngữ nghĩa
Tên viết tắt Từ viết tắt
Báo giá dài Định nghĩa <địa chỉ> Địa chỉ cho tác giả (s) của tài liệu Trích dẫn Tham chiếu mã Văn bản Teletype Phân chia hợp lý Thùng chứa kiểu nội tuyến chung Văn bản đã xóa Văn bản được chèn Nhấn mạnh Nhấn mạnh
Dòng tiêu đề cấp một
Dòng tiêu đề cấp hai
Dòng tiêu đề cấp ba
Dòng tiêu đề cấp bốn
Tiêu đề cấp thứ năm
Tiêu đề cấp thứ sáu
Nghỉ theo chủ đề Văn bản được người dùng nhập
Văn bản được định dạng trước
Báo giá nội tuyến ngắn Đầu ra mẫu Chỉ số Siêu văn bản Văn bản được xác định hoặc người dùng xác định