Người Viết : ViKiMi Editor
Xây dựng Website Ngữ Nghĩa phù hợp cho Cá Nhân, Doanh Nghiệp dễ dàng và thuận tiện
Chúng ta luôn quan tâm liệu rằng sản phẩm đem ra có thể được hiểu cách rõ ràng hay không? Có vẻ như là câu hỏi này là không thừa, Một Website rõ ràng thì sẽ luôn có khả năng chia sẻ cao và tái sử dụng trên mọi nền tảng. Chính điều này khiến cho các Nhà Phát Triển đặt ra câu hỏi về một Website ngữ nghĩa! Và HTML đã đem lại cho mọi người điều này.
Xây dựng một Website ngữ ngữ có quan trọng không?
Câu trả lời là rất qua trọng! Website ngữ nghĩa như một quy chuẩn giúp cho nó hoạt động trơn chu.
Vậy điều chúng ta cần tìm ở đây là gì ?
+ HTML Semantics chính là câu trả lời
Chúng ta nghĩ rằng HTML có vẻ chỉ là một ngôn ngữ khá là yếu. Tuy nhiên, chính ngôn ngữ nền tảng này đã có những yếu tố rất tốt. HTML Semantic Elements là yếu tố đó, Nó cho phép Lập Trình Viên và Nhà Phát Triển yên tâm về khả năng kiểm soát và xây dựng Website có thể hoạt động và kế thừa, tái sử dụng trên nhiều thiết bị, nền tảng, ứng dụng khác nhau.
HTML Semantic Elements là gì ?
+ Đó là các Phần tử ngữ nghĩa mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển.
+ Nhờ vậy đặc tính của nó cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, doanh nghiệp và cộng đồng
+ Nó thực sự rất quan trọng, và bạn không nên bỏ qua. Vì những ích lợi nó mang lại
// 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 !
1 ] 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ý.
2 ] Phần Tử Ngữ NGhĩa HTML <section>
Phần tử <section> giúp bạn thực hiện xác định một phần trong Document ( / Tài Liệu ).
Phần của Tài Liệu là một nhóm nội dung theo chủ đề, và thường có tiêu đề.
+ Khi thiết kế Website, Bạn có thể tạo ra Các Phần Bằng cách sử dụng Phần tử Section đúng chỗ. Các Phần có thể có như là :
>> Chương
>> Giới thiệu
>> Mục tin tức
>> Thông tin liên lạc
Một Website luôn có nhiều phần khác nhau, các phần này luôn được thiết kế phù hợp nhất có thể.
Example :
<section>
<h1> Thông Tin Mới Nhất </h1>
<p> Danh Sách các thông tin hiển thị cho người dùng </p>
</section>
3 ] Phần Tử Ngữ NGhĩa HTML <article>
Phần tử <article> giúp bạn dễ dàng tạo nội dung độc lập, khép kín.
Và Thông thường thì phần tử này sẽ được dùng để tạo các Bài Posts cho Website hoặc Diễn Đàn.
+ Một Bài Post luôn có ý nghĩa riêng của nó và có thể phân phối nó một cách độc lập với phần còn lại của trang web.
Cách sử dụng phần tử <article> phổ biến :
>> Bài đăng trên diễn đàn
>> Bài đăng trên blog
>> Ý kiến người sử dụng
>> Thẻ sản phẩm
>> Bài báo
Example :
<html>
<head>
<style>
.all-posts {
margin: 0%;
padding: 2%;
background-color: white;
}
</style>
</head>
<body>
<article class="all-posts">
<h1>Tất cả Bài Viết :</h1>
<article>
<h2>Bài Viết Số 1</h2>
<p>Nội Dung Bài Viết Số 1</p>
</article>
<article>
<h2>Bài Viết Số 2</h2>
<p>Nội Dung Bài Viết Số 2</p>
</article>
</article>
</body>
</html>
4 ] Kết hơp <Article> và <Section>
+ Phần tử <article> chỉ định nội dung độc lập, khép kín.
+ Phần tử <section> xác định phần trong tài liệu.
Chúng ta có 2 khả năng xảy ra là :
+ Trang HTML có phần tử <section> chứa phần tử <article>
+ Trang HTML có phần tử <article> chứa phần tử <section>
Thật đơn giản để thực hiện điều này và tạo ra một Website ngữ nghĩa như mong muốn.
5 ] Phần Tử Ngữ NGhĩa HTML <header>
Chúng ta có thể sử dụng HTML Header để tạo một vùng chứa đầu – vùng chứa Tiêu đề .
Phần tử ngữ nghĩa HTML <header> có thể sử dụng :
+ Tạo ra một vùng chứa nội dung giới thiệu
+ Tạo ra vùng chứa một tập hợp các liên kết điều hướng.
etc
Phần tử <header> thường thông chứa:
+ Một hoặc nhiều thành phần tiêu đề (<h1> cho tới <h6>)
+ Một hoặc nhiều Logo hoặc biểu tượng
+ Thông tin tác giả
Tuỳ theo vị trí PT Header được sử dụng mà có nội dụng cụ thể.
+ Chúng ta cũng biết một Trang HTML có thể chứa nhiều Header
+ Tuy nhiên, <Header> không thể được đặt trong phần tử <footer>, <address> hoặc phần tử <header> khác.
Example :
<article>
<header>
<h1>Thông Tin Tài Chính?</h1>
<p>Điều Đăng Xảy Ra:</p>
</header>
<p> Nội Dung Bài Báo Tại Đây </p>
</article>
6 ] Phần Tử Ngữ NGhĩa HTML <footer>
Phần tử <footer> xác định chân trang cho Document hoặc Article.
Phần tử ngữ nghĩa HTML <footer> thường chứa:
+ Thông tin tác giả
+ Thông tin bản quyền
+ Thông tin liên lạc
+ Sơ đồ trang web
+ Liên kết quay lại đầu trang
+ Tài liệu liên quan
Etc
Tuỳ theo vị trí PT Footer được sử dụng mà có nội dụng cụ thể.
+ Chúng ta cũng biết một Trang HTML có thể chứa nhiều Footer
Chúng ta có thể thấy cách sử dụng HTML Semantics rất đơn giản. Nhưng hiệu quả thì thật tốt, Nó giúp Website có khả năng Phát triển, Chia Sẻ, Tương Thích, Cập Nhật trên rất nhiều nền tảng, ứng dụng, thiết bị etc. Sử dụng HTML Semantics giúp bạn tạo một Website dễ hiểu ngữ nghĩa nhờ vào việc sử dụng các phần tử Ngữ Nghĩa trên Website.
+ HTML Semantics nên sử dụng khi làm việc
