โครงสร้างพื้นฐานของ HTML5
เค้าโครงแบบใหม่ของ HTML5 <header> สำหรับการจัดวาง ข้อมูลในส่วนบนของเว็บเพจ <nav> สำหรับการสร้างลิงก์ไปยัง เว็บเพจ <section> สำหรับแบ่งเว็บเพจ ออกเป็นส่วนๆ <article> สำหรับแสดงข้อมูลหลัก <aside> สำหรับการวางข้อมูลที่อยู่ ด้านข้าง <footer> สำหรับข้อมูลที่อยู่ ด้านล่าง
แท็ก <header> แท็ก <header> เป็นเอลิเมนต์ของ HTML5 ใช้เก็บข้อมูลหลักที่พบใน ทุกๆ เว็บเพจ เช่น รูปภาพโลโก้บริษัท ลิงก์หลักของเว็บไซต์ หรือกล่องค้นหา สำหรับ ค้นหาข้อมูลในเว็บเพจ
<!DOCTYPE HTML> <html> <head> </head> <title>HTML5 header tag</title> <meta charset=“utf-8”> </head> <body> <header> <h3>H3 ลำดับที่ 1</h3> <p>เนื้อหาใน H3 ลำดับที่ 1</p> <h4>H4 ลำดับที่ 1</h4> <p>เนื้อหาใน H4 ลำดับที่ 1</p> <h4>H4 ลำดับที่ 2</h4> <p>เนื้อหาใน H4 ลำดับที่ 2</p> <h3>H3 ลำดับที่ 2</h3> <p>เนื้อหาใน H3 ลำดับที่ 2</p> <h4>H4 ลำดับที่ 3</h4> <p>เนื้อหาใน H4 ลำดับที่ 3</p> <h4>H4 ลำดับที่ 4</h4> <p>เนื้อหาใน H4 ลำดับที่ 4</p> </header> </body> </html>
แท็ก <aside> แท็ก <aside> ใช้แสดงข้อมูลในส่วนที่ไม่ใช่ประเด็นหลักของเว็บเพจ เช่น ข้อความที่เป็นทิปเทคนิค หรือกรอบของข้อความที่เป็นโฆษณา โดยมากแล้วเอลิ เมนต์นี้ จะถูกวางอยู่ที่ด้านข้างของเว็บเพจ จะเป็นทางซ้ายหรือทางขวาก็ได้
<!DOCTYPE HTML> <html> <head> </head> <title>แท็ก aside</title> <meta charset=“utf-8”> <link rel=“stylesheet” href=“aside.css” type=“text/css”> </head> <body> <section id=“main”> <header> <h3>This is header</h3> <p>HTML5 company</p> </header> <aside> <h3>โฆษณา 1</h3> <a href=“#”>คลิกเพื่อติดต่อโฆษณา</a> </aside> </section> </body> </html>
แท็ก <article> แท็ก <article> ใช้แสดงข้อมูลหลักของเว็บเพจ หมายถึง ส่วนที่เราต้องการ ให้ผู้เข้าเยี่ยมชมเว็บไซต์สนใจ โดยการกำหนดแท็ก <article> สามารถใช้ แสดงข้อมูลที่ไม่เกี่ยวข้องกับส่วนอื่นๆ หรือ ใช้แสดงเนื้อหาที่มีลักษณะซ้ำๆกัน เช่น การโพสต์ข้อความในเว็บบอร์ด ข่าวใหม่ๆ ที่มีการเพิ่มเติมทุกวันหรือนำไปใช้งาน ร่วมกับหัวข่าวแบบ RSS Feed
<!DOCTYPE HTML> <html> <head> </head> <title>article tag</title> <meta charset=“utf-8”> <link rel=“stylesheet” href=“article.css” type=“text/css”> </head> <body> <div id=“main”> <header> <h3>article tag</h3> <p>HTML5</p> </header> <aside> <h3>banner</h3> </aside> <article> <header>ข่าวแรก</header> <h1>ข่าวเก่า</h1> <p>รายละเอียดข่าวเก่า</p> </article> <header>ข่าวที่สอง</header> <h1>ข่าวใหม่</h1> <p>รายละเอียดข่าวใหม่</p> </div> </body> </html>
แท็ก <section> แท็ก <section> ใช้เพื่อแบ่งเว็บเพจออกเป็นส่วนๆ เช่น การแบ่งประเภทข่าว ออกเป็น ข่าวการเมือง ข่าวกีฬา และข่าวบันเทิง ในกรณีนี้สามารถกำหนด <article> เพื่อเก็บข้อมูลของแต่ละข่าว แล้วนำข่าวที่เกี่ยวข้องกันไปรวมไว้ใน <section>
<!DOCTYPE HTML> <html> <head> </head> <title>section tag</title> <meta charset=“utf-8”> </head> <body> <h1>ชื่อสำนักข่าว</> <section> <header><h1>ข่าวบันเทิง</h1></header> <article> <h1>ข่าวบันเทิง 1</h1> <p>รายละเอียดข่าวบันเทิง 1</p> </article> <h1>ข่าวบันเทิง 2</h1> <p>รายละเอียดข่าวบันเทิง 2</p> </section> </body> </html>
แท็ก <nav> แท็ก <nav> จะใช้เก็บลิงก์บนเว็บเพจ ซึ่งลักษณะของลิงก์ดังกล่าวนั้น มีอยู่ ด้วยกัน 2 แบบ คือ ลิงก์ไปยังเว็บเพจอื่น หรือลิงก์ไปยังตำแหน่งต่างๆ ของเว็บเพจ ปัจจุบัน
<!DOCTYPE HTML> <html> <head> </head> <title>nav tag</title> <meta charset=“utf-8”> <link rel=“stylesheet” href=“nav.css” type=“text/css”> </head> <body> <header> <nav> <ul> <li><a href=“#”>หน้าแรก</a></li> <li><a href=“#”>เว็บบอร์ด</a></li> <li><a href=“#”>เกี่ยวกับเว็บไซต์</a></li> </ul> </nav> </header> <section> <h1>เนื้อหาเว็บเพจ</h1> <p>รายละเอียดเว็บเพจ</p> </section> </body> </html>
แท็ก <footer> จุดประสงค์หลักของแท็ก <footer> คือ ใช้สำหรับแสดงข้อมูลที่ด้านล่างของ เว็บเพจ ซึ่งใช้แสดงข้อมูลเพิ่มเติม ที่เกี่ยวกับหน้าเว็บเพจนั้นๆ เช่นข้อมูลเกี่ยวกับ เว็บไซต์ ลิงก์ที่เกี่ยวข้องกับเว็บเพจปัจจุบัน ลิงก์สำหรับส่งอีเมล์ไปยังเว็บมาสเตอร์
<!DOCTYPE HTML> <html> <head> </head> <title>footer tag</title> <meta charset=“utf-8”> </head> <body> <header>สำนักข่าว IT</header> <section> <h4>ข่าวกีฬา</h4> <article> <header>header ข่าวที่ 1</header> <p>รายละเอียดข่าวที่1</p> <footer>footer ข่าวที่ 1</footer> </article> <header>header ข่าวที่ 2</header> <p>รายละเอียดข่าวที่ 2</p> <footer>footer ข่าวที่ 2</footer> </section> <footer>footer ของเว็บเพจ</footer> </body> </html>