HTML องค์ประกอบในระดับบล็อกและอินไลน์
บทความนี้อธิบายเกี่ยวกับองค์ประกอบในระดับบล็อกและอินไลน์ของ HTML
นี่อธิบายความแตกต่างระหว่างองค์ประกอบระดับบล็อกและองค์ประกอบในบรรทัด รวมถึงองค์ประกอบหลักระดับบล็อกและองค์ประกอบในบรรทัด
YouTube Video
องค์ประกอบระดับบล็อกและองค์ประกอบแบบอินไลน์
HTML มีองค์ประกอบหลักสองประเภทที่กำหนดวิธีการแสดงผลบนหน้าจอ: 'block-level elements' และ 'inline elements' องค์ประกอบเหล่านี้มีบทบาทสำคัญในการจัดวางหน้าเว็บ และส่งผลโดยตรงต่อการกำหนดตำแหน่ง ที่นี่ เราจะอธิบายรายละเอียดเกี่ยวกับคุณลักษณะและการใช้งานของแต่ละองค์ประกอบ
องค์ประกอบประเภท block-level คืออะไร?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>องค์ประกอบ block-level มักจะใช้พื้นที่ความกว้างทั้งหมดของหน้า และปรากฏเป็นบรรทัดใหม่แยกจากองค์ประกอบอื่น ๆ องค์ประกอบเหล่านี้สามารถมี block-level หรือ inline elements อื่น ๆ ภายใน และใช้กำหนดโครงสร้างใหญ่ของเอกสาร
คุณสมบัติ:
- องค์ประกอบเหล่านี้เริ่มต้นที่บรรทัดใหม่และขยายให้กว้างที่สุดเท่าที่เป็นไปได้ (โดยปกติจะเต็มความกว้างขององค์ประกอบพาเรนต์)
- องค์ประกอบเหล่านี้ถูกแยกจาก block elements อื่น ๆ ในแนวตั้ง โดยมีระยะห่าง (margin) ระหว่างกัน
- พวกมันสามารถมีองค์ประกอบในระดับบล็อกหรืออินไลน์อื่นๆ อยู่ภายใน
ที่นี่ มีการใช้องค์ประกอบ block-level ต่อไปนี้:
- แท็ก
<div>มักถูกใช้เพื่อสร้างเลย์เอาท์ - แท็ก
<p>ถูกใช้เพื่อกำหนดย่อหน้า <h1>ถึง<h6>เป็นองค์ประกอบที่ใช้กำหนดหัวเรื่อง<h1>คือหัวเรื่องที่ใหญ่ที่สุด และ<h6>คือหัวเรื่องที่เล็กที่สุด- แท็ก
<ul>ใช้ในการสร้างรายการที่ไม่เรียงลำดับ - แท็ก
<ol>ใช้ในการสร้างรายการที่เรียงลำดับ - แท็ก
<section>ถูกใช้เพื่อกำหนดส่วนหนึ่งในเอกสาร
อะไรคือองค์ประกอบอินไลน์?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>องค์ประกอบ inline จะถูกวางในบรรทัดเดียวกับองค์ประกอบอื่น ๆ และมักใช้พื้นที่เฉพาะตามขนาดเนื้อหาภายใน องค์ประกอบเหล่านี้ถูกมองเป็นส่วนหนึ่งของข้อความ และต่างจากองค์ประกอบบล็อกระดับที่ไม่ใช้ทั้งบรรทัด
คุณสมบัติ:
- องค์ประกอบปรากฏบนบรรทัดเดียวกันและวางเคียงข้างกับองค์ประกอบอินไลน์อื่น ๆ
- ความกว้างถูกกำหนดโดยเนื้อหาขององค์ประกอบ (ข้อความหรือภาพ)
- องค์ประกอบเหล่านี้สามารถอยู่ภายใน block-level elements ได้ แต่ไม่สามารถทำกลับกันได้
ที่นี่ มีการใช้องค์ประกอบ inline ต่อไปนี้:
- แท็ก
<span>ใช้เพื่อเน้นส่วนหนึ่งของข้อความด้วยสไตล์เฉพาะ. - แท็ก
<a>ใช้เพื่อกำหนดลิงก์แบบไฮเปอร์ลิงก์ - แท็ก
<img>คือตัวองค์ประกอบที่ใช้ฝังภาพ <strong>เน้นข้อความสำคัญ (มักแสดงในตัวหนา)<em>แสดงข้อความเน้น (มักแสดงเป็นตัวเอียง)
ความแตกต่างระหว่าง block-level elements และ inline elements
- วิธีการแสดงผล: block-level elements จะแสดงบนบรรทัดใหม่และใช้ความกว้างเต็มของหน้า ส่วน inline elements จะแสดงบนบรรทัดเดียวกับองค์ประกอบอื่น ๆ และความกว้างของมันจะถูกกำหนดโดยเนื้อหาภายใน
- การจัดการองค์ประกอบภายใน: block-level elements สามารถมีได้ทั้ง block-level และ inline elements ภายใน แต่ inline elements ไม่สามารถมี block-level elements ภายในได้
- บทบาทในการจัดหน้า: block-level elements มักถูกใช้เพื่อสร้างโครงสร้างเลย์เอาท์ของหน้าเว็บ ในขณะที่ inline elements กำหนดองค์ประกอบขนาดเล็กเช่นข้อความและลิงก์
จุดสำคัญสำหรับการแยกแยะ
การสร้างเลย์เอาท์: ใช้ block-level elements เช่น <div>, <section>, <article> เพื่อกำหนดส่วนใหญ่และบล็อกเนื้อหา
การตกแต่งข้อความและลิงก์: ใช้ inline elements เช่น <span>, <a>, <strong>, <em> เพื่อตกแต่งส่วนของข้อความหรือเพิ่มลิงก์
การผสมผสานระหว่างองค์ประกอบระดับบล็อกและองค์ประกอบในบรรทัด
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- องค์ประกอบบล็อกเช่น
<main>,<header>, และ<section>ถูกใช้ และมักจะถูกแสดงบนบรรทัดใหม่ โดยครอบครองความกว้างเต็มขององค์ประกอบแม่ของมัน - องค์ประกอบอินไลน์เช่น
<a>,<strong>,<span>, และ<img>ถูกใช้ และพวกมันจะถูกวางภายในบรรทัดโดยไม่ต้องครอบครองความกว้างเต็มในองค์ประกอบบล็อก
การรวมองค์ประกอบ inline ไว้ในองค์ประกอบระดับบล็อกเป็นรูปแบบที่พบได้บ่อย ตัวอย่างเช่น มักจะมีการใส่ลิงก์ (<a>) หรือเน้นข้อความ (<strong>) ภายในย่อหน้า (<p>) อย่างไรก็ตาม เนื่องจากคุณไม่สามารถใส่องค์ประกอบระดับบล็อกไว้ในองค์ประกอบระดับอินไลน์ได้ จึงเป็นสิ่งสำคัญที่ต้องใช้งานให้เหมาะสม
สรุป
องค์ประกอบระดับบล็อกและองค์ประกอบระดับอินไลน์เป็นประเภทพื้นฐานสองประเภทขององค์ประกอบ HTML แต่ละประเภทมีหน้าที่ของตัวเอง องค์ประกอบระดับบล็อกเป็นพื้นฐานของการจัดเค้าโครงหน้า ในขณะที่องค์ประกอบระดับอินไลน์ถูกใช้เพื่อประดับตกแต่งและจัดการเนื้อหาละเอียดภายในพวกมัน การทำความเข้าใจและใช้งานสองประเภทขององค์ประกอบนี้อย่างเหมาะสมช่วยให้การเขียนโค้ด HTML มีประสิทธิภาพมากขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย