Một trong những điều chúng tôi phải xem xét với tư cách là nhà phát triển là làm thế nào để trang web của chúng tôi có thể truy cập được đối với những người cần trình đọc màn hình để sử dụng trang web. HTML hỗ trợ nỗ lực đó bằng cách cung cấp việc sử dụng các phần tử ngữ nghĩa trong đánh dấu. Trong bài viết này, chúng tôi sẽ đề cập đến một số yếu tố ngữ nghĩa phổ biến hơn để sử dụng trong phát triển web.
HTML ngữ nghĩa
Khi nói đến việc mô tả ‘ngữ nghĩa HTML’ có nghĩa là gì, chúng ta có thể đi thẳng vào định nghĩa của từ ‘ngữ nghĩa’ để giúp chúng ta. Theo Merriam-Webster, ngữ nghĩa là nghiên cứu các ý nghĩa hoặc ý nghĩa của một dấu hiệu. Vì vậy, khi chúng ta viết HTML ngữ nghĩa, chúng ta đang tạo một mã HTML hoàn toàn ngụ ý ý nghĩa của các thẻ.
Chúng tôi sử dụng đánh dấu ngữ nghĩa để có thể mô tả cấu trúc của các trang web theo cách chuẩn:điều này cho phép trình đọc màn hình và trợ lý giọng nói quét các phần tử HTML của chúng tôi và trả lại thông tin có liên quan cho người dùng nếu họ yêu cầu.
Yếu tố ngữ nghĩa
Khi đặc tả HTML5 được phát hành vào năm 2014, nó đi kèm với các yếu tố ngữ nghĩa bổ sung để chỉ rõ cấu trúc của một trang web tốt hơn. Dưới đây là một số thẻ được coi là thẻ ngữ nghĩa:
Tiêu đề chủ yếu là các phần tử vùng chứa hoạt động như các phần tử HTML ngữ nghĩa từng phần. Chúng thường chứa biểu trưng, <nav> và một <h1> mô tả chính trang web. Điều này thường nhất quán trên tất cả các trang trong trang web của bạn.
A <nav> phần tử là viết tắt của một phần tử điều hướng. Nó chứa các liên kết đưa người dùng đến các phần khác trên trang web của bạn:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
Các phần tử điều hướng có thể có các liên kết, menu và menu con. Tuy nhiên, các phần tử không được chứa <nav> khác các yếu tố. Trong ví dụ trên, tôi có <img> hoạt động như một trình giữ chỗ cho biểu trưng và một <nav> chứa các phần tử neo () của chúng tôi. Tất cả chúng đều được lồng vào bên trong một <header> .
, , -
-
<main> cho chúng tôi biết nội dung chính của trang web, bên ngoài <header> ban đầu . Nó có thể có <section> các thẻ có thể có <header> của riêng chúng và <h2> - <h6> các yếu tố.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Quy tắc chung về thẻ tiêu đề là chỉ có một <h1> phần tử trên mỗi trang phù hợp với tiêu đề được đưa ra cho trang. Ngoài ra, bạn không thể sử dụng tiêu đề được đánh số cao hơn cho đến khi bạn sử dụng tiêu đề được đánh số thấp hơn. Tuy nhiên, bạn có khả năng đi từ tiêu đề được đánh số cao hơn sang tiêu đề được đánh số thấp hơn không theo thứ tự. Về cơ bản, điều này tuân theo cấu trúc của một trang web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header.main-header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
h6 {
text-decoration: line-through;
}
h6.ok {
text-decoration: none;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="main-header">
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<body>
<main>
<header>
<h2>
I'm an h2 -- Semantic Elements -- Describes purpose of main content
</h2>
</header>
<section>
<header>
<h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
</header>
<div>Content and More stuff and things that pertain to h3 </div>
<h4> I'm an h4 -- Even less important heading </h4>
<div>More content that pertains to h4</div>
</section>
<section>
<header>
<h3> We can go back up to h3 even though we used h4</h3>
</header>
<div>More stuff and things that pertain to h3 </div>
<h6>No h6 until h4 and h5</h6>
<h4> This can't be h6, unless h4</h4>
<div>More content that pertains to h4</div>
<h5> and h5 are used first. </h5>
<div>More content that pertains to h5</div>
<h6 class="ok">Now h6 can be used!</h6>
</section>
</main>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html> Hãy nhớ rằng mặc dù chúng ta có thể sử dụng các thẻ tiêu đề không theo thứ tự, nhưng thực tế không phải là tốt nhất để làm như vậy. Có hệ thống phân cấp thích hợp dẫn đến khả năng tiếp cận tốt hơn.
Kết luận
Có rất nhiều khả năng sử dụng HTML ngữ nghĩa Tài liệu hướng dẫn sử dụng HTML ngữ nghĩa có trên trang web MDN cũng như trang W3C. Các thẻ khác mô tả ý định của họ được liệt kê trên cả hai trang web. Đảm bảo biết cách tra cứu tài liệu và nhận ra rằng bộ xử lý HTML sử dụng ngữ nghĩa để cung cấp cho người dùng thông tin phân cấp bổ sung nếu cần.