HTML – Hiển thị các ký tự đặc biệt trên trang web sao cho đúng chuẩn
Hẳn là ai trong chúng ta cũng đã từng sử dụng chức năng Insert Symbol của phần mềm soạn thảo nổi tiếng MS Word để chèn các ký tự đặc biệt như ©, ®, ™ rồi đúng không? Vậy khi chèn các ký tự đó với ngôn ngữ HTML có khác gì không? Và đúng chuẩn là như thế nào? Ký tự thay thế Hẳn là sẽ có một ...
Hẳn là ai trong chúng ta cũng đã từng sử dụng chức năng Insert Symbol của phần mềm soạn thảo nổi tiếng MS Word để chèn các ký tự đặc biệt như ©, ®, ™ rồi đúng không? Vậy khi chèn các ký tự đó với ngôn ngữ HTML có khác gì không? Và đúng chuẩn là như thế nào?
Ký tự thay thế
Hẳn là sẽ có một số bạn sau khi làm thử sẽ trả lời rằng: “Cũng tương tự như Word thôi chứ có khác gì đâu?” Nhưng hãy tin đi, các bạn đang làm sai mất rồi!
Các bạn nên nhớ HTML là một loại tài liệu đặc biệt, nó khác với tài liệu văn bản thông thường. Các trình duyệt hiện nay rất thông minh. Chúng ta hoàn toàn có thể sử dụng những ký tự hiện có trong bàn phím khi soạn thảo. Và trình duyệt vẫn hiển thị bình thường. Nhưng đó lại là cách làm sai chuẩn.
Vì thế, chúng ta có danh sách các ký tự đặc biệt mà khi ta muốn nó được hiển thị ở trình duyệt thì sẽ sử dụng các mã ký tự thay thế. Các bạn có thể tham khảo qua trang web này để tìm các ký tự đặc biệt mà ta muốn thể hiện. Ví dụ như copyright: © chẳng hạn thì ta sẽ tương ứng với mã hiển thị HTML là © hoặc © hoặc là ©
Tương tự đối với các ký tự đặc biệt khác. Hãy tự thực hành để kiểm chứng điều này các bạn nhé!
Kiểm tra tài liệu HTML có đúng chuẩn W3C?
Đặt vấn đề
Vậy còn hiển thị như bình thường như MS Word kia mà sai chuẩn là như thế nào nữa? Sao mới là đúng chuẩn? Làm sao mới kiểm tra được?
Như đã trình bày, các trình duyệt hiện nay rất thông minh. Chúng ta có thể sử dụng những ký tự hiện có trong bàn phím khi soạn thảo, và trình duyệt vẫn hiển thị bình thường. Ví dụ như các ký tự nháy kép: ", angle bracket: < và >…
Tuy nhiên, các bạn cần đặc biệt lưu ý khi sử dụng angle bracket bởi vì với html thì nó được xem là tag (Cấu trúc tag là ). Giả sử ta có nội dung tài liệu html như sau:
2 <> 5 ?
Nội dung đơn giản là 2 có khác 5 không? Ta sử dụng angle bracket để mô tả toán tử khác, một loại toán tử rất hay sử dụng ở một số ngôn ngữ lập trình.
Và đây là kết quả hiển thị:
2 <> 5 ?
Kiểm tra mã nguồn HTML với công cụ W3C Validator
Đúng như ý của chúng ta, nhưng chúng ta đã sai nguyên tắc đối với chuẩn của W3C. Các bạn nên kiểm tra tài liệu html của mình đã đúng chuẩn của W3C chưa thông qua website sau: http://validator.w3.org/
Trang web trên cho phép kiểm tra các đoạn mã HTML mà bạn viết đã đúng chuẩn chưa, tự động kiểm tra cú pháp HTML và đưa ra phương hướng khắc phục với 3 lựa chọn bằng cách kiểm tra thông qua URI (địa chỉ trang web cụ thể), File Upload (tải lên một file html cụ thể) hoặc dán trực tiếp đoạn mã HTML cần kiểm tra thông qua Direct Input. Và khi kiểm tra trang chủ của CiOne.Vn, chúng tôi rất bất ngờ khi nó hoàn toàn không có lỗi nào hết 8-).
Sử dụng W3C Validator để kiểm tra đoạn mã trên, các bạn sẽ nhận được một thông báo đại loại như thế này:
Error Saw <>. Probable causes: Unescaped < (escape as <) or mistyped start tag
Thông báo này được hiểu như là chúng ta đang gõ sai thẻ, nếu muốn dùng dấu < thì phải gõ là <. Vậy các bạn đã hiểu sai chuẩn chỗ nào rồi chứ?
Kết luận
Giờ thì các bạn đã biết cách hiển thị các ký tự đặc biệt sao cho đúng chuẩn W3C rồi đó, kể từ bây giờ các bạn hãy tự tập thói quen kiểm tra các đoạn mã HTML của mình sau khi thực hiện các project nhé. Hãy tận hưởng cảm giác tuyệt vời khi thông báo xanh của W3C Validator hiện ra
Document checking completed. No errors or warnings to show.
Bảo đảm là sẽ “sướng đến chết ngất” đi.
