ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

HTML5 Elements

มารู้จักกับ Elements ต่างๆ เพื่อนำมาใช้ในการทำเว็บไซต์ให้ง่ายขึ้น Elements ที่พบเห็นการใช้งานบ่อย คือ <header> <nav> <main> <footer>

เราจะมาทำความรู้จักและวีธีใช้งาน ขอเริ่มที่ตัวแรกกันเลย

<header> คือ จุดเริ่มต้นของหน้าเว็บ เราสามารถเริ่มต้นด้วยอะไรก็ได้ เช่นต้องการให้แสดงหัวข้อหลักของเว็บไซต์ หรือจะเป็นชื่อ เว็บไซต์ ตัวอย่างเช่น

<h1>HTML5 Elements</h1>

<p>Elements ที่น่าสนใจ</p>

</header>

ซึ่งการเริ่มต้นด้วย <header> ที่น่าสนใจจะทำให้คนเข้ามาที่เว็บไซต์ของเรามากขึ้นด้วย

<nav> คือ ส่วนของการเชื่อมโยงการนำทางไปยังส่วนต่างๆภายในเว็บไซต์หรือไปยังภายนอกเว็บไซต์ เรียกง่ายๆคือส่วนที่ไว้เมนูต่างๆ ตัวอย่างเช่น

<nav>

<a href="http://www.w3schools.com">มาตรฐานในการเขียนภาษาต่างๆ ในการทำเว็บไซต์</a> |

<a href="http://www.wynnsoftsolution.net">รับทำเว็บไซต์ และ SEO</a> |

<a href="/css/">css</a> |

<a href="/jquery/">jQuery</a>

</nav>

การจัดกลุ่มเมนูหรือการนำทางไปส่วนต่างๆ จะทำให้ผู้เข้ามาชมเว็บไซต์สะดวกต่างการใช้งาน

<main> คือ ส่วนที่ใช้แสดงเนื้อต่างๆภายในเว็บไซต์ ตัวอย่างเช่น

<main>

<h1>Web Browsers</h1>

<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser developed by Google,

released in 2008.</p>

</article>

<h1>Internet Explorer</h1>

<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>

</article>

<h1>Mozilla Firefox</h1>

<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

</article>

</main>

<footer> คือ ส่วนสุดท้ายของเว็บไซต์ ตัวอย่างเช่น

<p>รับออกแบบจัดทำเว็บไซต์ และ SEO</p>

<p>ข้อมูลติดต่อ: <a href="http://www.wynnsoftsolution.net">

www.wynnsoftsolution.net</a>.</p>

</footer>

ซึ่งจะนิยมแสดงข้อมูลในการใช้ติดต่อ

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

วันที่ : 11/03/2016 11:47