Người Viết : ViKiMi Editor
Website ngữ nghĩa quan trọng giúp bạn xây dựng và phát triển ổn định hơn, thật thuận tiện
Như chúng ta đã biết rõ sự cần thiết của Website ngữ nghĩa. Nó cho phép phát triển Website có hướng lâu dài, tạo ra Website mà có thể sử dụng và chia sẻ trên nhiều ứng dụng, doanh nghiệp cộng đồng. Semantic Web luôn là yêu cầu khi muốn thiết kế hoặc phát triển bất kỳ Website. Nếu bạn thực sự cần một điều gì quan trọng thì đó là Semantic Web.
Chúng ra có thể tạm thời liệt kê như bên dưới :
[ Thống kê lại một phần nội dung đã nói trước đây ]
// Semantic Elements là các yếu tố ngữ nghĩa
Để hiểu về điều này chúng ta sẽ lấy ví dụ về các yếu tố ngữ nghĩa và yếu tố không ngữ nghĩa :
+ Yếu tố ngữ nghĩa (Semantic Elements) :
Phần tử ngữ nghĩa chúng ta có thể bắt gặp như là <form>, <table>, <article> – Các Phần tử này cho phép Xác định rõ ràng nội dung của nó.
+ Yếu tố không ngữ ngữ (Non-semantic elements) :
Phần tử phi ngữ nghĩa chúng ta có thể bắt gặp như là <div> và <span> – Các Phần tử này Không cho biết gì về nội dung của nó.
Thật dễ dàng để thấy rõ điều này !
Làm quen với Phần Tử Ngữ Nghĩa của HTML
Chúng ta có danh sách các Phần tử Ngữ Nghĩa có thể dùng trong HTML như sau. Danh sách này giúp chúng ta xây dựng một Website đầy đủ yếu tố ngữ nghĩa. Và bạn có thể vận dụng nó xuyên suốt trong quá trình xây dựng một Website.
Danh Sách Phần Tử Ngữ Nghĩa :
Phần Tử 01 : <article>
Phần Tử 02 : <aside>
Phần Tử 03 : <details>
Phần Tử 04 : <figcaption>
Phần Tử 05 : <figure>
Phần Tử 06 : <footer>
Phần Tử 07 : <header>
Phần Tử 08 : <main>
Phần Tử 09 : <mark>
Phần Tử 10 : <nav>
Phần Tử 11 : <section>
Phần Tử 12 : <summary>
Phần Tử 13 : <time>
Bạn có thể thấy bên dưới là Khung của Website với các Phần Tử Ngữ Nghĩa :
Lưu ý : Chúng ta vẫn có thể vận dụng DIV , SPAN etc, để xây dựng một Website tốt như mong muốn.
+ Nhiều Website chứa mã HTML như :
<div id=”nav”> <div class=”header”> <div id=”footer”> để biểu thị điều hướng, đầu trang và chân trang. Và điều này vẫn hoàn toàn hợp lý.
[ Phần Tiếp Theo ]
1 ] Phần Tử Ngữ NGhĩa HTML <nav>
Khi thiết kế tập hợp liên kết điều hướng, danh sách liên kết điều hướng. Cách thông thường :
+ Phần tử <nav> sẽ giúp xác định một tập hợp các liên kết điều hướng.
+ Và Phần tử <nav> chỉ dành cho các khối liên kết điều hướng chính.
Dựa vào đó mà chúng ta có thể thiết kế một Menu như ý. Và điều này cũng sẽ hiển thị tốt hơn trên các thiết bị, điều này có được là do sử dụng các phần tử ngữ nghĩa.
Example :
<nav> <a href="#">Home</a> | <a href="/html/">HTML 5 Tutorials</a> | <a href="/css/">CSS Tutorials</a> | <a href="/jquery/">jQuery</a> </nav>
2 ] Phần Tử Ngữ NGhĩa HTML <aside>
Phần tử <aside> được sử dụng rất phổ biến. Nó giúp tạo ra thông tin nổi bật và quan trọng liên quan đến xung quanh, tạo sự chú ý lâu dài đến người dùng. Phần tử <aside> gần như được ưu tiên nhiều trên các Website.
Những tác dụng của Phần Tử <aside> như sau :
+ Phần tử <aside> xác định một số nội dung ngoài nội dung mà nó được đặt trong đó ( chẳng hạn như sidebar – thanh bên ).
+ Đồng thời nội dung <aside> phải liên quan gián tiếp đến nội dung xung quanh, chẳng hạn như nội dung xung quanh có thể là nội dung Bài Posts.
Example :
<!DOCTYPE html> <html> <head> <style> aside { width: 30%; padding-left: 5%; margin-left: 5%; float: right; } </style> </head> <body> <div id = "content"> Nội Dung Bài Viết !</div> <div id = "sidebar"> <aside> <p>Thông Tin Tác Giả</p> </aside> <p>Những Bài Viết Mới!</p> <p>Lưu Trữ Bài Viêt!</p> </div> </body> </html>
3 ] Phần Tử Ngữ NGhĩa HTML <figure> và <figcaption>
Cách sử dụng 2 phần tử này khá đơn giản, có tác dụng nhiều trong trình diễn
Example :
<figure>
<img src="Flower.jpg" alt="Hydrangea">
<figcaption>
Fig1. - Hydrangea commonly named the hortensia.
</figcaption>
</figure>
+ Thẻ <figure> chỉ định nội dung độc lập, chẳng hạn như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.
+ Thẻ <figcaption> xác định chú thích cho phần tử <figure>.
Chúng ta thấy cách sử dụng rất đơn giản, đem lại hiệu quả rất cao. Chúng ta cũng cần lưu ý sử dụng thiết kế có thể bao gồm CSS, Kết quả của chúng ta có được là rất tốt. Một Website có ngữ nghĩa rõ ràng thì sẽ được đánh giá cao cũng như đạt chuẩn.
+ Semantic Web có thể là một yếu tố quan trọng mà bạn cần dùng.
