พัฒนาเว็บไซต์ด้วย HTML5

HTML5 Description List

การใช้งาน Description List ใน HTML5 ใช้ในการสร้างรายการที่มีการจับคู่ระหว่าง ชื่อหัวข้อ (Term) และ คำอธิบาย (Description) โดยใช้แท็ก <dl>, <dt>, และ <dd> ซึ่งมีการใช้งานดังนี้:

  • <dl>: ใช้ในการกำหนด Description List เป็นตัวแทนของรายการทั้งหมด
  • <dt>: ใช้ในการกำหนด ชื่อหัวข้อ หรือ คำศัพท์ ที่จะอธิบาย
  • <dd>: ใช้ในการกำหนด คำอธิบาย ที่เกี่ยวข้องกับชื่อหัวข้อ

ตัวอย่างการใช้งานพื้นฐาน

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Description List Example</title>
</head>
<body>

    <h2>Animal List</h2>
    <dl>
        <dt>Cat</dt>
        <dd>A small domesticated carnivorous mammal.</dd>

        <dt>Dog</dt>
        <dd>A domesticated carnivorous mammal, often kept as a pet or for work.</dd>

        <dt>Elephant</dt>
        <dd>The largest land animal, known for its large ears and tusks.</dd>
    </dl>

</body>
</html>

ผลลัพธ์: จะได้รายการที่แสดงคำศัพท์พร้อมคำอธิบาย

Animal List

Cat
A small domesticated carnivorous mammal.
Dog
A domesticated carnivorous mammal, often kept as a pet or for work.
Elephant
The largest land animal, known for its large ears and tusks.

การใช้งานขั้นสูง: รายการที่ซ้อนกัน (Nested Description List)

สามารถสร้างรายการที่ซ้อนกันได้ เช่น ในกรณีที่ต้องการอธิบายรายละเอียดเพิ่มเติมในลำดับชั้น

HTML
<h2>Programming Languages</h2>
<dl>
    <dt>JavaScript</dt>
    <dd>A versatile scripting language used for web development.</dd>
    
    <dd>
        <dl>
            <dt>Frameworks</dt>
            <dd>React, Angular, Vue</dd>
            <dt>Libraries</dt>
            <dd>jQuery, Lodash</dd>
        </dl>
    </dd>

    <dt>Python</dt>
    <dd>A high-level programming language known for its readability and versatility.</dd>
    
    <dd>
        <dl>
            <dt>Libraries</dt>
            <dd>Numpy, Pandas, TensorFlow</dd>
        </dl>
    </dd>
</dl>

ผลลัพธ์: จะมีคำอธิบายซ้อนที่แสดงรายการภายในคำอธิบายอีกทีหนึ่ง

Programming Languages

JavaScript
A versatile scripting language used for web development.
Frameworks
React, Angular, Vue
Libraries
jQuery, Lodash
Python
A high-level programming language known for its readability and versatility.
Libraries
Numpy, Pandas, TensorFlow

การใช้งานในรูปแบบหลายคำอธิบายสำหรับหนึ่งหัวข้อ

บางครั้งหนึ่งหัวข้ออาจต้องการคำอธิบายมากกว่า 1 รายการ สามารถทำได้โดยการใช้ <dd> หลายครั้งภายใต้ <dt> เดียวกัน

HTML
<h2>Software Development Phases</h2>
<dl>
    <dt>Planning</dt>
    <dd>Define project goals.</dd>
    <dd>Estimate resources and time.</dd>
    
    <dt>Design</dt>
    <dd>Create system architecture.</dd>
    <dd>Develop user interface designs.</dd>
    
    <dt>Development</dt>
    <dd>Write code for the application.</dd>
    <dd>Test and debug the application.</dd>
</dl>

ผลลัพธ์: แต่ละหัวข้อจะมีคำอธิบายหลายบรรทัดแสดงต่อกัน

Software Development Phases

Planning
Define project goals.
Estimate resources and time.
Design
Create system architecture.
Develop user interface designs.
Development
Write code for the application.
Test and debug the application.

การปรับรูปแบบ Description List ด้วย CSS

เราสามารถปรับแต่ง Description List ให้มีรูปแบบตามที่ต้องการได้ด้วยการใช้ CSS เช่น การเพิ่มการเว้นระยะห่าง การปรับแต่งตัวอักษร หรือการจัดตำแหน่ง

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Description List with CSS</title>
    <style>
        dl {
            margin: 20px;
        }
        dt {
            font-weight: bold;
            color: navy;
        }
        dd {
            margin-left: 20px;
            font-style: italic;
        }
    </style>
</head>
<body>

    <h2>Planets of the Solar System</h2>
    <dl>
        <dt>Mercury</dt>
        <dd>The closest planet to the Sun.</dd>
        
        <dt>Venus</dt>
        <dd>The second planet, often called Earth's twin.</dd>
        
        <dt>Earth</dt>
        <dd>The only planet known to support life.</dd>
    </dl>

</body>
</html>

ผลลัพธ์: รายการจะถูกแสดงด้วยการปรับรูปแบบให้ดูเป็นทางการมากขึ้น

Planets of the Solar System

Mercury
The closest planet to the Sun.
Venus
The second planet, often called Earth’s twin.
Earth
The only planet known to support life.

สรุป

การใช้งาน Description List ใน HTML5 มีความยืดหยุ่นสูง เหมาะสำหรับการแสดงข้อมูลที่มีความสัมพันธ์ระหว่างหัวข้อและคำอธิบาย และสามารถปรับแต่งด้วย CSS เพื่อให้เหมาะกับการออกแบบเว็บได้

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ