มารู้จัก Element ใหม่ ๆ ของ HTML5 Part 1

หน้าแรก HTML5 มารู้จัก Element ใหม่ ๆ ของ HTML5 Part 1

มารู้จัก Element ใหม่ ๆ ของ HTML5 (Part 1) ตอนนี้กระแสเรื่อง HTML5 เริ่มมาแรงกันเรื่อย ๆ แล้ว ตอนนี้อาจมีหลายท่านหันมาสนใจ HTML5 กันมากขึ้น เพื่อน ๆ หลาย ๆ คนใน Facebook พูดกันว่า HTML5 คืออนาคตของเว็บไซต์ จะจริงรึป่าวนั้นเราต้องคอยดูกัน ซึ่งตอนนี้ HTML5 มาใหม่แต่ถึงจะใหม่ก็ยังไม่ได้ทิ้งของเก่าไปหมดยังคงใช้อยู่เหมือนเดิม โดยหลาย ๆ ตัวนั้นก็เป็นที่รู้จักกันดีอยู่แล้ อย่างเช่น metadata ซึ่งได้แก่ head,title,meta,link,style,script ฯลฯ ที่อยู่ภายใน ...นั้นยังคงเหมือนเดิมไม่ได้เปลี่ยนแปลงอะไร คงไม่ต้องอธิบายกันเพราะว่าถ้าเคยใช้ HTML ก็ต้องรู้จัก element พวกนี้อยู่แล้ว แต่ element ใหม่ ๆ ที่เพิ่มขึ้นมานะสิมันใช้กันยังไง แล้วเอาไปใช้อย่างไรได้บ้าง อย่างเช่น header,section,nav,article,aside,footer ฯลฯ ซึ่งอ่านชื่อ element เหล่านี้ก็คงจะเข้าใจความหมายทันทีว่ามันคืออะไร (ประมาณว่าเข้าใจภาษาอังกฤษก็รู้ว่ามันแปลว่าอะไร) แต่มันเอาไปใช้ยังไง แล้วทำอะไรได้บ้างนั้น ต้องมาดูกัน

<header></header> แท็กนี้จะเป็นส่วนที่แสดงส่วนที่เป็น header ซึ่งเป็นหัวเว็บไซต์ที่เป็นส่วนประกอบหลักแล้ว ยังสามารถนำแท็ก header นี้มาใส่ในส่วนของหัวข้อของเนื้อหาได้อีกด้วย

ตัวอย่างที่ 1 ใช้มาแสดงส่วนหัวของเว็บไซต์

<header>
<h1>This is website logo.</h1>
</header>

ตัวอย่างที่ 2 ใช้เป็นหัวข้อของบทความ

<article>
    <header>
        <h1>Title of this article</h1>
    </header>
    <p>This is article content.</p>
    <footer>
        <a href="#">Read more</a>
    </footer>
</article>

นอกจากจะใช้แบบดังที่กล่าวมาแล้วนั้น ยังสามารถประยุกต์ใช้ได้อีกหลายแบบ แล้วแต่ผู้นำไปใช้จะคิดหาทางนำไปใช้ในรูปแบบใดได้อีก

<nav></nav> แท็กนี้คนที่เขียน CSS จะคุ้นเคยกันมาก เพราะว่าเวลาจะสร้างเมนูสำหรับเว็บไซต์ ตอนเขียนโค้ด CSS หลาย ๆ (รวมทั้งข้าพเจ้าด้วย)มักชอบตั้งชื่อ id หรือ class ว่า nav กันเป็นส่วนใหญ่จะมีต่อท้ายว่าอะไรขึ้นอยู่กับการใช้งาน หรือหน้าที่ของมัน ไม่ต้องบอกอะไรมากทุกคนก็รู้ว่าเอาไว้ทำอะไร แท็ก นั้นเอาไว้สร้างเมนูนั่นเอง ซึ่งใครจะนำไปสร้างหรือประยุกต์ใช้ยังไงนั้นก็ล้วนแต่เป็นเทคนิคของแต่ละคน

ตัวอย่าง แท็ก <nav></nav> แบบคร่าว ๆ

<nav>
    <ul>
        <li class="current"><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</nav>

<article></article> แท็กนี้ใช้เป็นส่วนที่บ่งบอกให้ทราบว่าภายใต้แท็ก <article></article> นั้นเป็นบทความต่าง ๆ บนเว็บไซต์ ซึ่งมีหลากหลายมากมาย ตัวอย่างเช่น ข่าว บทความของบล็อก สินค้า ข้อคิดเห็น ฯลฯ ซึ่งสามารถนำมาใช้ได้หลายรูปแบบตามความถนัดของผู้เขียนเอง

ตัวอย่างที่ 1

<body>
    <article>
        <h2><a href="#">HTML 5 คืออะไร</a></h2>
        <p>HTML5 เป็นภาษาที่ถูกพัฒนาขึ้นเพื่อเป็นภาษามาร์กอัปสำหรับ WWW รุ่นต่อไปของ HTML ถูกพัฒนาขึ้นในปี 2004 โดยกลุ่ม WHATWG(The Web Hypertext Application Technology Working Group) โดยเรียกชื่อว่า Web applications 1.0 โดยดราฟต์แรกได้ปรากฏออกมาเมื่อ 22 มกราคม พ.ศ. 2551 </p>
    </article>
</body>

ตัวอย่างที่ 2

<body>
    <header>
        <h1>Web.Ofebia HTML5 Tutorial</h1>
    </header>
    <section>
        <article>
            <header>
                <h2><a href="#">HTML 5 คืออะไร</a></h2>
            </header>
            <p>HTML5 เป็นภาษาที่ถูกพัฒนาขึ้นเพื่อเป็นภาษามาร์กอัปสำหรับ WWW รุ่นต่อไปของ HTML ถูกพัฒนาขึ้นในปี 2004 โดยกลุ่ม WHATWG(The Web Hypertext Application Technology Working Group) โดยเรียกชื่อว่า Web applications 1.0 โดยดราฟต์แรกได้ปรากฏออกมาเมื่อ 22 มกราคม พ.ศ. 2551 </p>
            <footer><a href="#">Read more</a></footer>
        </article>
    </section>
    <footer>
        2010 Ofebia. Creative Commons Attribution 3.0 License
    </footer>
</body>

<aside></aside> แท็กนี้ใช้ในการระบุส่วนประกอบอื่น ๆ ของเว็บไซต์ส่วนที่ไม่เกี่ยวข้องกับเนื้อหา หรือเป็นส่วนประกอบหนึ่งของเนื้อหา หรือองค์ประกอบอื่น ๆ ของเว็บไซต์ที่เราไม่สามารถนำไปใส่รวมในส่วนของ article ซึ่งส่วนนี้ก็คือ sidebar ของเว็บไซต์นั่นเอง

ตัวอย่างที่ 1

<aside>
    <h1>เรื่องที่เกี่ยวข้อง :</h1>
    <ul>
        <li><a href="">HTML5 คืออะไร</a></li>
        <li><a href="">การ เริ่มต้นเขียน HTML5</a></li>
        <li><a href="">บท ความหัวข้อ HTML5 กับ FLASH</a></li>
    </ul>
</aside>

ตัวอย่างที่ 2

<aside>
    <article>
        <p>ยินดีตอนรับทุกท่านเข้าสู่ web.ofebia นะค่ะ ทางเว็บไซต์จัดทำขึ้นเพื่อเผยแพร่ความรู้เกี่ยวกับการพัฒนาเว็บไซต์ และเรื่องน่ารู้ต่าง ๆ ที่น่าสนใจเกี่ยวกับการพัฒนาเว็บไซต์ เพื่อให้ผู้ที่สนใจได้เข้ามาทำการศึกษาหาความรู้ และแบ่งปันประสบการณ์เกี่ยวกับการพัฒนาเว็บไซต์ค่ะ</p>
    </article>

    <h1>บทความทั้งหมด</h1>
    <ul>
        <li><a href="">2010 มกราคม</a></li>
        <li><a href="">2010 กุมภาพันธ์</a></li>
        <li><a href="">2010 มีนาคม</a></li>
    </ul>
</aside>

ส่วนใหญ่ <aside> จะประยุกต์ใช้ยังไงนั้น แล้วแต่คนเขียน CSS และ HTML 5 เองด้วยว่าจะใช้องค์ประกอบอะไรบ้าง

<footer></footer> แท็กนี้สามารถใช้เป็น footer ของเว็บไซต์ หรือเป็นส่วนประกอบของบทความก็ได้

ตัวอย่างที่ 1 เป็นส่วนประกอบหนึ่งของบทความ

ตัวอย่างที่ 2 เป็น footer ให้กับเว็บไซต์

<footer>
    <p>2010 Ofebia. Creative Commons Attribution 3.0 License</p>
    <ul>
        <li>Home</li>
             <li>Sitemap</li>
             <li>About Us</li>
             <li>contact US</li>

    </ul>
</footer>

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

ขึ้นไปด้านบน