Tue Jul 17 19:14:12 2018 [7726 views]
มาใช้แท็ก HTML5 เพื่อให้โค้ดเป็นระเบียบมากขึ้นไปอีก
จากบทความที่แล้ว เกี่ยวกับการจัด HTML ให้เป็นระเบียบโดยการใช้ div เป็นหลัก เราสามารถพัฒนาโค้ดของเราได้อีก โดยการใช้แท็กของ HTML5 ซึ่งอ่านง่ายยิ่งขึ้นและช่วยในด้าน SEO มากกว่าด้วย บทความนี้จะมาแนะนำแท็ก HTML5 ที่ใช้บ่อยๆ
Navigation Bar (แถบนำทาง)
บทความที่แล้วเราได้ใช้ div ในการครอบโค้ดแถบนำทาง แต่ถ้าเราใช้แท็ก HTML5 ซึ่งก็คือ nav จะทำให้เราไม่ต้องใช้คุณสมบัติ class หรือ id เพื่อระบุเลยว่าโค้ดก้อนนี้เป็นแถบนำทาง
ก่อนใช้ HTML5
<div id="navbar">
<ul>
<li><a href="index.html">หน้าแรก</a></li>
<li><a href="about-us.html">เกี่ยวกับเรา</a></li>
<li><a href="contact-us.html">ติดต่อเรา</a></li>
</ul>
</div>
หลังใช้ HTML5
<nav>
<ul>
<li><a href="index.html">หน้าแรก</a></li>
<li><a href="about-us.html">เกี่ยวกับเรา</a></li>
<li><a href="contact-us.html">ติดต่อเรา</a></li>
</ul>
</nav>
จะเห็นได้ว่าโค้ดมีความชัดเจนมากยิ่งขึ้นว่าทั้งก้อนๆ นี้เกี่ยวกับแถบนำทาง
Article (บทความ)
เว็บส่วนใหญ่จะมีการให้ข้อมูลผู้ใช้ซึ่งจะหนีไม่พ้นการใช้ article ไม่ว่าจะเป็น บทความ โซเชียลเน็ตเวิร์กโพสต์ คอมเม้น และอื่นๆ
ก่อนใช้ HTML5
<div class="post">
<h1>มาใช้แท็ก HTML5 กันเถอะ!</h1>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</div>
หลังใช้ HTML5
<article>
<h1>มาใช้แท็ก HTML5 กันเถอะ!</h1>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</article>
Section (ส่วน)
เราสามารถใช้ section แบ่งเนื้อหา article ออกมาเป็นส่วนๆ ได้ และส่วนใหญ่ลูกคนแรกของ section จะเป็นหัวข้อเรื่อง (h1 - h6) ทั้งสิ้น เพื่อบอกว่าส่วนๆ นี้เกี่ยวกับอะไร
ก่อนใช้ HTML5
<div class="comment-section">
<h2>แสดงความคิดเห็น</h2>
<div class="comment">
<h4>Pongpat Weesommai</h4>
<p>ใช้ดีจริงๆ ครัช</p>
</div>
</div>
หลังใช้ HTML5
<section>
<h2>แสดงความคิดเห็น</h2>
<article class="comment">
<h4>Pongpat Weesommai</h4>
<p>ใช้ดีจริงๆ ครัช</p>
</article>
</section>
Header (ส่วนหัวเรื่อง) และ Footer (ส่วนท้ายเรื่อง)
header นั้นสามารถใช้ได้สองแบบหลักๆ ก็คือเป็นส่วนหัวเรื่องของหน้านั้นๆ หรือเป็นส่วนหัวเรื่องของส่วนนั้นๆ เช่น
หัวเรื่องของหน้า
<header>
<h1>เกี่ยวกับ MeCode</h1>
<img src="mecode-logo.png" alt="MeCode logo">
</header>
หัวเรื่องของส่วน
<article>
<header>
<h2>มาใช้แท็ก HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
<a href="https://mecode.blog/categories/basics-of-web-development/articles/let-s-use-html5-tags">อ่านต่อ</a>
</article>
ซึ่งหน้านึงของเว็บสามารถมีได้หลาย header ขึ้นอยู่กับวิธีการใช้
footer นั้นก็สามารถใช้ได้สองแบบหลักๆ ก็คือเป็นส่วนท้ายของหน้านั้นๆ หรือเป็นส่วนท้ายของส่วนนั้นๆ เช่น
ส่วนท้ายของหน้า
<footer>
All rights reserved © MeCode
</footer>
ส่วนใหญ่ส่วนท้ายของหน้าตามที่เราเห็นได้จากหลายๆ เว็บก็คือข้อมูลลิขสิทธิ์ ลิงค์ที่เกี่ยวข้องกับเว็บ และสื่อต่างๆ ของเว็บนั้นๆ
ส่วนท้ายของส่วน
<article>
<header>
<h2>มาใช้แท็ก HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
<a href="https://mecode.blog/categories/basics-of-web-development/articles/let-s-use-html5-tags">อ่านต่อ</a>
<footer>
<p>เขียนโดย Pongpat Weesommai</p>
</footer>
</article>
Main (ส่วนสำคัญที่สุด)
ส่วนสำคัญที่สุดของหน้า และควรมี main อันเดียวในหน้าๆ นึง และใน main ไม่ควรมีเนื้อหาที่มีจะมีอยู่ในหลายๆ หน้า เช่น แถบนำทาง โลโก้ และอื่นๆ
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<header>
<h1>MeCode - ใครๆ ก็เขียนโค้ดได้</h1>
</header>
<main>
<article>
<header>
<h2>มาใช้ HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</article>
</main>
<footer>
All rights reserved © MeCode
</footer>
</body>
</html>
โค้ดข้างบนมีการใช้แท็ก HTML5 อื่นๆ ในบทความนี้มาใช้ด้วยเพื่อให้เห็นภาพรวมนะครัช
แล้วเมื่อไหร่ที่เราควรจะใช้ div
เราควรจะยังใช้ div เมื่อเราอยากมีภาชนะทั่วๆ ไปที่ไม่ได้เข้าพวกแท็กข้างบนนี้หรือมีไว้เพื่อตกแต่งเฉยๆ
ทิ้งท้าย
บทความนี้อาจจะน่าเบื่อสำหรับบางคน เพราะว่าจริงๆ ถ้าไม่ใช้แท็ก HTML5 และใช้ div เหมือนเดิมในแง่ของผู้ใช้ก็ไม่มีอะไรเปลี่ยน หน้าตาของเว็บก็ยังเหมือนเดิม แต่ในแง่ของเพื่อนร่วมงานที่จะต้องมานั่งอ่านโค้ดเราและ Search Engine (โปรแกรมค้นหาข้อมูลในเน็ตเช่น Google Bing Yahoo!) มีความสำคัญมากๆ พอโค้ดไปนานๆ การที่เราวางแผนดีๆ ก่อนโค้ด ถึงจะใช้เวลาเยอะกว่าในตอนเริ่มต้น แต่ในระยะยาวจะช่วยประหยัดเวลาได้เยอะขึ้นเลย เพราะความง่ายในการอ่านหรือแก้โค้ดที่เราเขียน ในบทความนี้แท็ก HTML5 ที่นำมาอธิบายนั้นยังไม่หมด ถ้าสนใจสามารถไปดูเพิ่มเติมได้ที่ลิงค์นี้ หรือถ้าสนใจว่า HTML5 แตกต่างกับเวอร์ชั่นก่อนๆ อย่างไรบ้าง เดี๋ยวจะมาเขียนบทความเรื่องนี้วันหลัง หรือถ้ารอไม่ไหวก็อ่านลิงค์นี้ได้เลย
หากไม่เข้าใจเนื้อหาตรงไหนสามารถสอบถามเข้ามาในกลุ่มหรือทางเพจได้เลยนะครับ ถ้าชอบบทความนี้ช่วยกดไลค์และแชร์ไปให้เพื่อนๆ ที่สนใจด้านโค้ดอ่านกันด้วยนะครัช~
ขอขอบคุณรูปภาพจาก Joshua Humphrey from Pexels และข้อมูลอ้างอิงจาก https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520 และ https://www.w3schools.com/htmL/html5_semantic_elements.asp
จากบทความที่แล้ว เกี่ยวกับการจัด HTML ให้เป็นระเบียบโดยการใช้ div เป็นหลัก เราสามารถพัฒนาโค้ดของเราได้อีก โดยการใช้แท็กของ HTML5 ซึ่งอ่านง่ายยิ่งขึ้นและช่วยในด้าน SEO มากกว่าด้วย บทความนี้จะมาแนะนำแท็ก HTML5 ที่ใช้บ่อยๆ
Navigation Bar (แถบนำทาง)
บทความที่แล้วเราได้ใช้ div ในการครอบโค้ดแถบนำทาง แต่ถ้าเราใช้แท็ก HTML5 ซึ่งก็คือ nav จะทำให้เราไม่ต้องใช้คุณสมบัติ class หรือ id เพื่อระบุเลยว่าโค้ดก้อนนี้เป็นแถบนำทาง
ก่อนใช้ HTML5
<div id="navbar">
<ul>
<li><a href="index.html">หน้าแรก</a></li>
<li><a href="about-us.html">เกี่ยวกับเรา</a></li>
<li><a href="contact-us.html">ติดต่อเรา</a></li>
</ul>
</div>หลังใช้ HTML5
<nav>
<ul>
<li><a href="index.html">หน้าแรก</a></li>
<li><a href="about-us.html">เกี่ยวกับเรา</a></li>
<li><a href="contact-us.html">ติดต่อเรา</a></li>
</ul>
</nav>จะเห็นได้ว่าโค้ดมีความชัดเจนมากยิ่งขึ้นว่าทั้งก้อนๆ นี้เกี่ยวกับแถบนำทาง
Article (บทความ)
เว็บส่วนใหญ่จะมีการให้ข้อมูลผู้ใช้ซึ่งจะหนีไม่พ้นการใช้ article ไม่ว่าจะเป็น บทความ โซเชียลเน็ตเวิร์กโพสต์ คอมเม้น และอื่นๆ
ก่อนใช้ HTML5
<div class="post">
<h1>มาใช้แท็ก HTML5 กันเถอะ!</h1>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</div>หลังใช้ HTML5
<article>
<h1>มาใช้แท็ก HTML5 กันเถอะ!</h1>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</article>Section (ส่วน)
เราสามารถใช้ section แบ่งเนื้อหา article ออกมาเป็นส่วนๆ ได้ และส่วนใหญ่ลูกคนแรกของ section จะเป็นหัวข้อเรื่อง (h1 - h6) ทั้งสิ้น เพื่อบอกว่าส่วนๆ นี้เกี่ยวกับอะไร
ก่อนใช้ HTML5
<div class="comment-section">
<h2>แสดงความคิดเห็น</h2>
<div class="comment">
<h4>Pongpat Weesommai</h4>
<p>ใช้ดีจริงๆ ครัช</p>
</div>
</div>หลังใช้ HTML5
<section>
<h2>แสดงความคิดเห็น</h2>
<article class="comment">
<h4>Pongpat Weesommai</h4>
<p>ใช้ดีจริงๆ ครัช</p>
</article>
</section>Header (ส่วนหัวเรื่อง) และ Footer (ส่วนท้ายเรื่อง)
header นั้นสามารถใช้ได้สองแบบหลักๆ ก็คือเป็นส่วนหัวเรื่องของหน้านั้นๆ หรือเป็นส่วนหัวเรื่องของส่วนนั้นๆ เช่น
หัวเรื่องของหน้า
<header>
<h1>เกี่ยวกับ MeCode</h1>
<img src="mecode-logo.png" alt="MeCode logo">
</header>หัวเรื่องของส่วน
<article>
<header>
<h2>มาใช้แท็ก HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
<a href="https://mecode.blog/categories/basics-of-web-development/articles/let-s-use-html5-tags">อ่านต่อ</a>
</article>ซึ่งหน้านึงของเว็บสามารถมีได้หลาย header ขึ้นอยู่กับวิธีการใช้
footer นั้นก็สามารถใช้ได้สองแบบหลักๆ ก็คือเป็นส่วนท้ายของหน้านั้นๆ หรือเป็นส่วนท้ายของส่วนนั้นๆ เช่น
ส่วนท้ายของหน้า
<footer>
All rights reserved © MeCode
</footer>ส่วนใหญ่ส่วนท้ายของหน้าตามที่เราเห็นได้จากหลายๆ เว็บก็คือข้อมูลลิขสิทธิ์ ลิงค์ที่เกี่ยวข้องกับเว็บ และสื่อต่างๆ ของเว็บนั้นๆ
ส่วนท้ายของส่วน
<article>
<header>
<h2>มาใช้แท็ก HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
<a href="https://mecode.blog/categories/basics-of-web-development/articles/let-s-use-html5-tags">อ่านต่อ</a>
<footer>
<p>เขียนโดย Pongpat Weesommai</p>
</footer>
</article>Main (ส่วนสำคัญที่สุด)
ส่วนสำคัญที่สุดของหน้า และควรมี main อันเดียวในหน้าๆ นึง และใน main ไม่ควรมีเนื้อหาที่มีจะมีอยู่ในหลายๆ หน้า เช่น แถบนำทาง โลโก้ และอื่นๆ
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<header>
<h1>MeCode - ใครๆ ก็เขียนโค้ดได้</h1>
</header>
<main>
<article>
<header>
<h2>มาใช้ HTML5 กันเถอะ!</h2>
<p>Tue Jul 17 21:00:00 2018</p>
</header>
<p>การใช้แท็ก HTML5 ทำให้โค้ดเราอ่านง่ายขึ้นและช่วยให้อันดับเว็บเราใน Google ดีขึ้นด้วยเน้อ</p>
</article>
</main>
<footer>
All rights reserved © MeCode
</footer>
</body>
</html>โค้ดข้างบนมีการใช้แท็ก HTML5 อื่นๆ ในบทความนี้มาใช้ด้วยเพื่อให้เห็นภาพรวมนะครัช
แล้วเมื่อไหร่ที่เราควรจะใช้ div
เราควรจะยังใช้ div เมื่อเราอยากมีภาชนะทั่วๆ ไปที่ไม่ได้เข้าพวกแท็กข้างบนนี้หรือมีไว้เพื่อตกแต่งเฉยๆ
ทิ้งท้าย
บทความนี้อาจจะน่าเบื่อสำหรับบางคน เพราะว่าจริงๆ ถ้าไม่ใช้แท็ก HTML5 และใช้ div เหมือนเดิมในแง่ของผู้ใช้ก็ไม่มีอะไรเปลี่ยน หน้าตาของเว็บก็ยังเหมือนเดิม แต่ในแง่ของเพื่อนร่วมงานที่จะต้องมานั่งอ่านโค้ดเราและ Search Engine (โปรแกรมค้นหาข้อมูลในเน็ตเช่น Google Bing Yahoo!) มีความสำคัญมากๆ พอโค้ดไปนานๆ การที่เราวางแผนดีๆ ก่อนโค้ด ถึงจะใช้เวลาเยอะกว่าในตอนเริ่มต้น แต่ในระยะยาวจะช่วยประหยัดเวลาได้เยอะขึ้นเลย เพราะความง่ายในการอ่านหรือแก้โค้ดที่เราเขียน ในบทความนี้แท็ก HTML5 ที่นำมาอธิบายนั้นยังไม่หมด ถ้าสนใจสามารถไปดูเพิ่มเติมได้ที่ลิงค์นี้ หรือถ้าสนใจว่า HTML5 แตกต่างกับเวอร์ชั่นก่อนๆ อย่างไรบ้าง เดี๋ยวจะมาเขียนบทความเรื่องนี้วันหลัง หรือถ้ารอไม่ไหวก็อ่านลิงค์นี้ได้เลย
หากไม่เข้าใจเนื้อหาตรงไหนสามารถสอบถามเข้ามาในกลุ่มหรือทางเพจได้เลยนะครับ ถ้าชอบบทความนี้ช่วยกดไลค์และแชร์ไปให้เพื่อนๆ ที่สนใจด้านโค้ดอ่านกันด้วยนะครัช~
ขอขอบคุณรูปภาพจาก Joshua Humphrey from Pexels และข้อมูลอ้างอิงจาก https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520 และ https://www.w3schools.com/htmL/html5_semantic_elements.asp
เกี่ยวกับผู้เขียน
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom
แสดงความคิดเห็น
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom