Lv.18 HTML Id

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 กล่อง ซ้ายและขวา การใช้งานก็ประมาณนี้ครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top