สิ่งหนึ่งที่เราต้องพิจารณาในฐานะนักพัฒนาคือการทำให้ไซต์ของเราสามารถเข้าถึงได้สำหรับผู้ที่ต้องการโปรแกรมอ่านหน้าจอเพื่อใช้งานเว็บไซต์ HTML ช่วยในความพยายามนั้นโดยจัดให้มีการใช้องค์ประกอบเชิงความหมายในมาร์กอัป ในบทความนี้ เราจะกล่าวถึงองค์ประกอบเชิงความหมายที่ได้รับความนิยมมากขึ้นเพื่อใช้ในการพัฒนาเว็บ
HTML เชิงความหมาย
เมื่อพูดถึงความหมายของ 'HTML เชิงความหมาย' เราสามารถไปที่คำจำกัดความของคำว่า 'semantics' เพื่อช่วยเราได้ ตาม Merriam-Webster ความหมายคือการศึกษาความหมายหรือความหมายของเครื่องหมาย ดังนั้น เมื่อเราเขียน HTML เชิงความหมาย เรากำลังสร้างโค้ด HTML ที่บอกเป็นนัยถึงความหมายของแท็ก
เราใช้มาร์กอัปเชิงความหมายเพื่อให้เราสามารถอธิบายโครงสร้างของหน้าเว็บของเราในลักษณะมาตรฐาน:ช่วยให้โปรแกรมอ่านหน้าจอและผู้ช่วยเสียงสแกนองค์ประกอบ HTML ของเราและส่งคืนข้อมูลที่เกี่ยวข้องไปยังผู้ใช้หากพวกเขาร้องขอ
องค์ประกอบเชิงความหมาย
เมื่อข้อกำหนด HTML5 ออกมาในปี 2014 นั้นมาพร้อมกับองค์ประกอบเชิงความหมายเพิ่มเติมเพื่อระบุโครงสร้างของหน้าเว็บได้ดียิ่งขึ้น นี่คือแท็กบางส่วนที่จะถือว่าเป็นแท็กเชิงความหมาย:
ส่วนหัวเป็นหลักองค์ประกอบคอนเทนเนอร์ที่ทำหน้าที่เป็นองค์ประกอบ HTML เชิงความหมายส่วน โดยทั่วไปจะมีโลโก้ <nav> และ <h1> ที่อธิบายตัวเว็บไซต์เอง ซึ่งมักจะสอดคล้องกันในทุกหน้าในไซต์ของคุณ
<nav> องค์ประกอบสั้นสำหรับองค์ประกอบการนำทาง มีลิงก์ที่นำผู้ใช้ไปยังส่วนอื่นๆ ของไซต์ของคุณ:
<!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>
องค์ประกอบการนำทางสามารถมีลิงก์ เมนู และเมนูย่อยได้ อย่างไรก็ตาม องค์ประกอบไม่สามารถมี <nav> . อื่นได้ องค์ประกอบ ในตัวอย่างข้างต้น ฉันมี <img> ที่ทำหน้าที่เป็นตัวยึดสำหรับโลโก้และ <nav> ที่มีองค์ประกอบสมอ () ของเรา ทั้งหมดนี้ซ้อนอยู่ภายใน <header> .
, , –
–
<main> tag บอกเราถึงเนื้อหาหลักของไซต์ นอก <header> เริ่มต้น . สามารถมี <section> แท็กที่สามารถมี <header> . ของตัวเองได้ และ <h2> –<h6> องค์ประกอบ
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
กฎทั่วไปเกี่ยวกับแท็กหัวเรื่องคือมีเพียง หนึ่ง <h1> องค์ประกอบต่อหน้าที่ตรงกับชื่อที่กำหนดให้กับหน้า นอกจากนี้ คุณไม่สามารถใช้หัวเรื่องที่มีตัวเลขสูงกว่าได้ จนกว่าคุณจะใช้หัวเรื่องที่มีตัวเลขต่ำกว่า อย่างไรก็ตาม คุณมีความสามารถในการเปลี่ยนจากหมายเลขที่สูงกว่าไปยังหมายเลขที่ต่ำกว่าที่ไม่เป็นระเบียบ โดยพื้นฐานแล้วจะเป็นไปตามโครงสร้างของสิ่งที่หน้าเว็บควรเป็น:
<!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> จำไว้ว่าถึงแม้เราจะใช้แท็กหัวเรื่องไม่เป็นระเบียบ แต่ก็ไม่ใช่แนวทางปฏิบัติที่ดีที่สุด การมีลำดับชั้นที่เหมาะสมจะทำให้เข้าถึงได้ง่ายขึ้น
บทสรุป
มีความเป็นไปได้มากมายสำหรับการใช้ HTML เชิงความหมาย เอกสารสำหรับการใช้ HTML เชิงความหมายจะอยู่ที่เว็บไซต์ MDN เช่นเดียวกับไซต์ W3C แท็กอื่นๆ ที่อธิบายความตั้งใจของพวกเขาจะแสดงอยู่ในทั้งสองไซต์ อย่าลืมรู้วิธีค้นหาเอกสารประกอบและตระหนักว่าตัวประมวลผล HTML ใช้ความหมายเพื่อให้ข้อมูลตามลำดับชั้นเพิ่มเติมแก่ผู้ใช้หากจำเป็น
