HTML - บล็อก
องค์ประกอบ HTML ทั้งหมดสามารถแบ่งออกเป็นสองประเภท (a) องค์ประกอบระดับบล็อก (b)องค์ประกอบแบบอินไลน์
องค์ประกอบบล็อก
องค์ประกอบบล็อกจะปรากฏบนหน้าจอราวกับว่ามีเส้นแบ่งก่อนและหลัง ตัวอย่างเช่น <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> และ <address> องค์ประกอบเป็นองค์ประกอบระดับบล็อกทั้งหมด พวกเขาทั้งหมดเริ่มต้นบรรทัดใหม่ของตัวเองและสิ่งที่ตามมาก็จะปรากฏในบรรทัดใหม่ของตัวเอง
องค์ประกอบแบบอินไลน์
ในทางกลับกันองค์ประกอบแบบอินไลน์สามารถปรากฏภายในประโยคและไม่จำเป็นต้องปรากฏในบรรทัดใหม่ของตัวเอง ส่วน <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd> และ <var> องค์ประกอบเป็นองค์ประกอบแบบอินไลน์ทั้งหมด
การจัดกลุ่มองค์ประกอบ HTML
มีแท็กสำคัญสองแท็กที่เราใช้บ่อยมากในการจัดกลุ่มแท็ก HTML อื่น ๆ (i) แท็ก <div> และ (ii) <span> แท็ก
แท็ก <div>
นี่คือแท็กระดับบล็อกที่สำคัญมากซึ่งมีบทบาทสำคัญในการจัดกลุ่มแท็ก HTML อื่น ๆ และการใช้ CSS กับกลุ่มองค์ประกอบ ตอนนี้สามารถใช้แท็ก <div> เพื่อสร้างเค้าโครงหน้าเว็บที่เรากำหนดส่วนต่างๆ (ซ้าย, ขวา, บน ฯลฯ ) ของหน้าโดยใช้แท็ก <div> แท็กนี้ไม่มีการเปลี่ยนแปลงใด ๆ ในบล็อก แต่มีความหมายมากกว่าเมื่อใช้กับ CSS
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างง่ายๆของแท็ก <div> เราจะเรียนรู้ Cascading Style Sheet (CSS) ในบทแยกต่างหาก แต่เราใช้ที่นี่เพื่อแสดงการใช้แท็ก <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
แท็ก <span>
HTML <span> เป็นองค์ประกอบแบบอินไลน์และสามารถใช้เพื่อจัดกลุ่มองค์ประกอบแบบอินไลน์ในเอกสาร HTML แท็กนี้ยังไม่มีการเปลี่ยนแปลงใด ๆ ในบล็อก แต่มีความหมายมากกว่าเมื่อใช้กับ CSS
ความแตกต่างระหว่างแท็ก <span> และแท็ก <div> คือแท็ก <span> ใช้กับองค์ประกอบแบบอินไลน์ในขณะที่แท็ก <div> ใช้กับองค์ประกอบระดับบล็อก
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างง่ายๆของแท็ก <span> เราจะเรียนรู้ Cascading Style Sheet (CSS) ในบทแยกต่างหาก แต่เราใช้ที่นี่เพื่อแสดงการใช้แท็ก <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -