HTML5 กับ Semantic Markup

หน้าแรก HTML5 HTML5 กับ Semantic Markup

จากบทความในครั้งที่แล้ว เราก็คงจะพอรู้จัก HTML5 แบบคร่าวๆกันแล้วนะครับ ในวันนี้เราจะมาลงลึกกันใน Feature ต่างๆกันครับ โดยจะเริ่มที่ตัว Semantic Markup ซึ่งถ้าเราจะแปลความหมายกันตรงๆ ก็จะแปลได้ว่า Markup ที่มีความหมาย เพื่อการเข้าใจง่ายๆ ผมขอเริ่มต้นอธิบายด้วยภาพ 2 ภาพนี้ครับ

ภาพข้างบนนี้ หลายคนคงคุ้นเคยกันดีครับ นี้คือการพัฒนาในรูปแบบเดิมๆที่เราเคยพัฒนากัน คือพยายามเน้นการใช้ DIV Element เพื่อแบ่งสัดส่วนพื้นที่ของเนื้อหาในเว็บไซท์ของเรา

และเมื่อเรามาใช้ HTML5 DIV Element ที่รกรุงรังเต็มไปหมดก็จะหายไป เหลือเพียง Element โล่งๆดังรูปข้างบน ซึ่ง Element พวกนี้ จะเป็น Element ที่มีความหมายอยู่ในตัวของมันเองเลย ไม่ต้องไปแฝงตัวอยู่ใน Div Element เหมือนเมื่อก่อน

Element ที่ได้ถูกเพิ่มเติมเข้ามาใน HTML5 ก็มีหลายตัวครับ ซึ่งแต่ละตัวที่ได้ถูกเพิ่ม ก็จะเป็น Element ประเภท Semantic Markup โดยประกอบไปด้วย <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>,<time>, <mark>, <figure>, และ <figcaption>.

ตัวอย่างโค๊ด

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test HTML5 </title>
    <link rel="stylesheet" href="html5reset-1.6.css" type="text/css" />
    <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Test HTML5 [HEADER]</h1>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">IE9TestDrive</a></li>
            <li><a href="#">Microsoft</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <aside>
        <header>
            <h1>Left Siderbar</h1>
        </header>
        <p>TEST WORDING</p>
    </aside>
    <article>
        <header>
            <h1>Article Heading</h1>
        </header>
        <p>Article Content</p>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Section Content</p>
            <figure>
                <img src="item-1.png" alt="Club">
                <img src="item-2.png" alt="Heart">
                <img src="item-3.png" alt="Spade">
                <img src="item-4.png" alt="Diamond">
                <figcaption>Figure Caption</figcaption>
            </figure>
            <p>Content</p>
            <footer>
                <p>Footer of Section</p>
            </footer>
        </section>
        <footer>
            Footer of Article
ขึ้นไปด้านบน