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

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

เมื่อวันก่อนเขียน แท็ก HTML5 ไปส่วนหนึ่งแล้ว (ดูบทความมารู้จัก Element ใหม่ ๆ ของ HTML5 Part 1) ก็เป็นส่วนหลัก ๆ ที่จำเป็นต้องใช้ หรือใช้ประจำ ส่วนวันนี้มารู้จักแท็กอื่น ๆ กันบ้างแล้วกัน ซึ่งเราจะทะยอยอัพเดทเรื่อย ๆ เพราะว่าตัวเองก็กำลังทำหน้าเว็บไซต์ด้วย HTML5 อยู่เหมือนกัน เอาเป็นว่ามาเรียนไปพร้อม ๆ กัน

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

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

<section>
<h1>Title of this article</h1>
<p>This is article content.</p>
</section>

ผลลัพธ์ของตัวอย่างที่ 1

Title of this article

This is article content.

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

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

ผลลัพธ์ของตัวอย่างที่ 2

Title of this article

This is article content.

<address> เป็นแท็กที่ใช้แสดงส่วนที่เป็นข้อมูลติดต่อของตัวบุคคล ที่ตั้งของเว็บไซต์ หรือบริษัทที่เป็นเจ้าของเว็บไซต์ เพื่อใช้ในการติดต่อกับผู้อื่น โดยแท็กนี้เมื่อใช้แล้วตัวอักษรจะอยู่ในลักษรเอียงไปทางขวาซึ่งเป็นรูปแบบของตัวอักษรที่เรียกว่า Italic

ตัวอย่าง

<address>
Contact Information<br />
<a href="mailto:web.ofebia@example.com">Email us</a><br />
Address: Robot Building, PSU<br />
Phone: +66000000000
</address>

ผลลัพธ์

Contact Information

Email us

Address: Robot Building, PSU

Phone: +66000000000

<base> เป็นแท็กที่ใช้ระบุ url หลักของเว็บไซต์ หรือหน้าเว็บเพจนั้น ซึ่งจะใช้สำหรับองค์ประกอบอื่นที่ต้องใส่ url โดยแท็กนี้ต้องใส่ไว้ในส่วนของ

ตัวอย่าง

<html>
<head>
<base href="http://web.ofebia.com/tags/term/" target="_blank" />
</head>
<body>
<a href="css.htm">Web.Ofebia's CSS Tag</a>
</body>
</html>

ผลลัพธ์

Web.Ofebia's CSS Tag

<keygen> แท็กนี้เห็นชื่อแล้วคุ้น ๆ กันมั๊ย ใช้เป็นส่วนที่บ่งบอกว่าตรงนี้คือ keygen หรือเป็นที่ที่ใช้ใส่ keygen เพื่อทำการสร้าง keygen ให้ผู้ใช้งาน หรือยืนยัน keygen ของผู้ใช้งานนั่นเอง อธิบายไม่ค่อยรู้เรื่อง ดูตัวอย่างดีกว่ามั้ง ^^

ตัวอย่าง

<form action="processkey.cgi" method="post" enctype="multipart/form-data">
 <p><keygen name="key"></p>
 <p><input type=submit value="Submit key..."></p>
</form>

ผลลัพธ์

<form action="processkey.cgi" enctype="multipart/form-data" method="post">
 
 <input type="submit" value="Submit key..." /></p>
</form>

ตัวอย่างเอามาจาก W3C HTML5 Overview

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

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