HTML Id นั้นเหมือนเลขบัตรประชาชนครับ ใช้ชื่อ Id ซ้ำไม่ได้ หนึ่งอิลิเมนต์มีชื่อ Id ได้แค่หนึ่งชื่อเท่านั้น
ตัวอย่าง
<h1 id="h1">หัวเรื่อง</h1>
HTML Id การใช้งานที่เหมาะสม
คำแนะนำจากการใช้งานจริง ตั้ง Id ให้กับอิลิเมนต์ที่อยู่ชั้นบนสุด
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | HTML การใช้งาน Id</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
#wrap {
margin: auto;
width: 100%;
height: 100vh;
background-color: blue;
}
.left {
margin: auto;
width: 75%;
float: left;
height: 500px;
background-color: green;
}
.right {
margin: auto;
width: 25%;
float: left;
height: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div class="left">
<h1>Left Side</h1>
<p>พารากราฟ</p>
</div>
<div class="right">
<h2>Right Side</h2>
</div>
</div>
</body>
</html>
จากตัวอย่างผมตั้ง Id wrap ให้ <div> เพื่อห่อทั้ง 2 กล่อง ซ้ายและขวา การใช้งานก็ประมาณนี้ครับ