สอน HTML และคำสั่งเบื้องต้น (พร้อมตัวอย่างการใช้งานจริง)

ถ้าคุณได้อ่านบทความสอนทำเว็บไซต์ของผม คุณคงรู้ว่าการทำเว็บไซต์ในปัจจุบัน เรานิยมใช้ “เครื่องทุนแรง” ซึ่งก็คือโปรแกรมทำเว็บชื่อ WordPress

ซึ่งการใช้ WordPress เนี่ยทำให้คุณไม่จำเป็นต้องเรียนรู้การเขียนโค้ด HTML เลย (สะดวกสุดๆ)

ตอนนี้คุณเลยอาจสงสัยว่า ผมเขียนบทความสอน HTML นี้ขึ้นมาทำไม คุณจำเป็นต้องเรียน HTML ด้วยหรือ

คำตอบคือ ไม่จำเป็นครับ แต่ถ้าคุณมีพื้นฐาน HTML ซักนิด (นิดเดียวจริงๆ) มันจะเปิดโอกาสให้คุณปรับแต่งเว็บไซต์ WordPress ของคุณได้อีกเยอะเลยทีเดียว

เรียน HTML (ขั้นพื้นฐาน) แล้วจะได้อะไร

อยากแรกเลย ถ้าคุณรู้ HTML บ้าง มันจะช่วยให้คุณเข้าใจการทำงานของเว็บคุณดีขึ้น ส่งผลให้คุณสามารถแก้ไขเว็บไซต์คุณได้เองโดยไม่ต้องพึ่ง web designer (ในบางกรณี)

แน่นอนว่าความรู้ HTML เบื้องต้นนั้นอาจไม่เพียงพอสำหรับทุกเรื่อง (งานบางอย่างคุณอาจต้องจ้าง web designer อยู่) แต่อย่างน้อยการเรียนเรื่องพวกนี้ไว้บ้าง อาจทำให้คุณแก้อะไรเล็กๆ น้อยๆ บนเว็บคุณได้เอง (หรืออย่างน้อยก็รู้ว่าต้องแก้จุดไหน) ไม่ต้องคอยง้อคอยถาม web designer ไปซะทุกเรื่อง

ประโยชน์อีกอย่างของการเรียน HTML คือ มันเป็นความรู้พื้นฐานในการทำ SEO (Search Engine Optimization)

ปัจจุบันการทำ SEO (การทำให้เว็บไซต์ติดอันดับสูงๆ ใน Google) เป็นสิ่งสำคัญ และหนึ่งในปัจจัยที่ส่งผลต่ออันดับใน Google คือ โค้ด HTML ของเว็บไซต์คุณนั่นเองครับ

หมายความว่าถ้าคุณต้องการทำ SEO คุณจำเป็นต้องมีความรู้ HTML ไว้บ้างครับ

ก่อนเข้าเนื้อหา มาทำความเข้าใจกันก่อน

  1. ผมเขียนบทความนี้สำหรับคนที่มีเว็บไซต์ WordPress เป็นหลัก แต่ต่อให้คุณไม่มีเว็บไซต์ WordPress บทความนี้ก็ยังมีประโยชน์กับคุณครับ
  2. บทความนี้จะไม่ได้สอนทุกสิ่งที่เกี่ยวกับ HTML แต่จะสอนเฉพาะส่วนที่ใช้งานจริงเป็นหลัก ผมจะไม่สอนให้คุณเขียนเว็บเพจหรือเว็บไซต์ด้วย HTML (WordPress จัดการส่วนนี้ให้แล้ว) แต่จะสอนให้คุณเอาความรู้ HTML ไปใช้กับเว็บไซต์ WordPress ของคุณ

อารัมภบทมามากพอแล้ว มาเริ่มกันเลยครับ

HTML คืออะไร

HTML คือภาษาคอมพิวเตอร์สำหรับเขียนเว็บเพจ เป็นภาษาที่บอก web browser (Google Chrome, Firefox, IE) ว่าเว็บเพจควรจะแสดงผลอย่างไร

ด้านล่างคือตัวอย่างโค้ด HTML (ไม่ใช้โค้ดที่สมบูรณ์ ผมตัดรายละเอียดบางอย่างออกเพื่อให้เข้าใจง่ายขึ้น)

<title>ตัวอย่าง HTML - NoobMarketer.com</title>

<h1>นี่คือหัวข้อหลัก</h1>

<p>นี่คือย่อหน้าแรก</p>

<h2>นี่คือหัวข้อย่อย</h2>

<p>นี่คืออีกย่อหน้า</p>

<a href="https://google.com">นี่คือลิงก์ไป Google.com</a>

ถ้าคุณ copy โค้ดด้านบนไปใส่ Notepad จากนั้น save ไฟล์เป็น test.html (ไฟล์ชื่ออะไรก็ได้แต่ต้องมีนามสกุล .html) แล้ว double click เปิดไฟล์นั้นดู คุณจะเห็นหน้าเว็บด้านล่าง

ตัวอย่าง HTML

จากรูปจะเห็นได้ว่า web browser แสดงผลหน้าเว็บตามที่เราระบุไว้ในไฟล์ HTML ได้อย่างถูกต้องเหมาะสม (หัวข้อหลักและหัวข้อย่อยมีตัวอักษรขนาดใหญ่ ย่อหน้ามีขนาดปกติ ส่วนลิงก์มีสีน้ำเงินและขีดเส้นได้)

อันที่จริง ถ้าคุณอยากเขียนเว็บขึ้นมาเอง คุณก็แค่เขียนโค้ด HTML แบบนี้ขึ้นมา แล้วเอาไฟล์ไปวางไว้บนเว็บโฮสติ้ง แค่นี้คุณก็จะมีเว็บไซต์เป็นของตัวเองแล้วครับ (แต่จะเป็นเว็บไซต์หน้าตาเชยมาก)

ซึ่งนี่คือวิธีที่คนสมัยก่อนสร้างเว็บไซต์ครับ ถ้าอยากเขียนเว็บที่มี 10 หน้า ก็จะต้องเขียนไฟล์ HTML แบบนี้ขึ้นมา 10 ไฟล์เลย (ถือว่าเป็นงานถึกมาก)

โชคดีที่ปัจจุบันมีโปรแกรมอย่าง WordPress ทำให้ชีวิตเราง่ายขึ้น

การดูโค้ด HTML ใน WordPress

ปกติเวลาที่คุณสร้างหรือแก้ไขบทความใน WordPress คุณจะเห็นหน้า preview แบบนี้

Visual Editor ของ WordPress

Editor ที่เห็นด้านบนเรียกว่า Visual Editor ซึ่งโค้ด HTML ทั้งหมดถูกซ่อนไว้

ถ้าคุณอยากเห็นโค้ด HTML คุณก็สามารถทำได้ โดยกดปุ่มในรูปด้านล่าง แล้วเลือก Code Editor

วิธีดูโค้ด HTML ใน WordPress

เพียงเท่านี้คุณจะเห็นโค้ด HTML ของหน้านั้น (ตามรูปด้านล่าง)

Code Editor ของ WordPress

โหมด Code Editor นี้ปกติเราไม่ค่อยได้ใช้ แต่ในบางกรณี เช่นเวลาหน้าเว็บแสดงผลไม่ตรงตามต้องการ (และแก้ไขในโหมด Visual Editor เท่าไหร่ก็ไม่หาย) คุณอาจต้องสลับไปโหมด Code Editor แล้วแก้ไข HTML โดยตรงครับ

Tag (คำสั่ง) ใน HTML คืออะไร

ต่อจากนี้คุณจะเริ่มเห็นคำว่า tag ในบทความ เลยจะขออธิบายสั้นๆ ว่ามันคืออะไร

แท็ก (tag) คือคำสั่งที่บอก web browser ว่าส่วนประกอบต่างๆ ในเว็บเพจคืออะไร

ตัวอย่างเช่น ถ้าข้อความไหนอยู่ในแท็ก <p> แปลว่าส่วนนั้นคือย่อหน้า (p ย่อมาจาก paragraph)

ในโค้ดตัวอย่าง html ด้านบน พวก <title>, <body>, <h1>, <h2>, <p>, <a> พวกนี้คือแท็กหมดเลยครับ

แท็กส่วนมากจะมีตัวเปิด <p> และตัวปิด </p> เพื่อบอก web browser ให้รู้ว่าแท็กนั้นสิ้นสุดตรงไหน

<p>สวัสดี นี่คือย่อหน้า</p>

แต่แท็กบางตัวก็ไม่มีตัวปิด อย่างเช่นแท็ก <br> สำหรับเว้นบรรทัด แท็ก <img> สำหรับแสดงรูปภาพ หรือแท็ก <hr> สำหรับแสดงเส้นแนวนอน

<br>
<img src="html-tutorial.png" alt="สอนเขียน html" />
<hr>

แท็กหนึ่งๆ สามารถอยู่ภายใต้แท็กอื่นได้ เช่นถ้าเราสร้างย่อหน้าขึ้นมา และอยากให้ประโยคไหนในย่อหน้านั้นเป็นตัวหนา (ใช้แท็ก <strong>) ก็ให้เขียนโค้ดแบบนี้

<p>ตัวอักษรปกติ <strong>นี่คือตัวหนา</strong> ตัวอักษรปกติ</p>

ผลลัพธ์ที่ได้จะเป็นดังนี้ครับ

ตัวอักษรปกติ นี่คือตัวหนา ตัวอักษรปกติ

แท็กสำคัญๆ ใน HTML

แท็กใน HTML มีมากมาย แต่คุณไม่จำเป็นต้องรู้จักทั้งหมด

ผมจะแนะนำให้รู้จักแท๊กที่สำคัญๆ ให้ เริ่มที่แท็กแรกกันเลย

คอมเม้นท์

เวลาคุณสลับไป Code Editor ใน WordPress คุณจะเห็นโค้ดบางส่วนอยู่ในแท็ก <!– และ –>

<!-- wp:paragraph -->
<p>สวัสดี นี่คือย่อหน้า</p>
<!-- /wp:paragraph -->

โค้ดในแท็ก <!– และ –> คือ “คอมเม้นท์” ครับ

คอมเม้นท์มีไว้เพื่อให้มนุษย์อ่านและเข้าใจโค้ดได้ง่ายขึ้น แต่คอมเม้นท์ไม่มีผลกับการแสดงผลของเว็บเพจ (คือมีหรือไม่มี เว็บเพจก็แสดงผลเหมือนเดิม)

เพราะฉะนั้น ถ้าเราเอาคอมเม้นท์ในโค้ดด้านบนออก เว็บเพจของคุณจะยังแสดงผลเหมือนเดิม

<p>สวัสดี นี่คือย่อหน้า</p>

เพราะฉะนั้น ถ้าคุณเห็นอะไรอยู่ในแท็ก <!– และ –> ให้รู้ไว้ว่ามันเป็นแค่คอมเม้นท์นะครับ

หัวข้อ (Headings) : <h1>, <h2>, …, <h6>

เราใช้แท็ก heading เพื่อแสดงหัวข้อหลัก (<h1>) และหัวข้อย่อย (<h2> ถึง <h6>) ของบทความ

h1>นี่คือหัวข้อหลัก</h1>

<p>นี่คือย่อหน้าแรก</p>

<h2>นี่คือหัวข้อย่อย</h2>

<p>นี่คืออีกย่อหน้า</p>

แท็ก heading มีความสำคัญมาก ด้วยเหตุผลสองประการ

  1. การใส่ heading ทำให้บทความอ่านง่าย ดูเป็นระเบียบ และทำให้ผู้อ่าน(ที่ใจร้อน)สามารถสแกนบทความได้เร็วๆ ว่ามีเนื้อหาอะไรบ้าง
  2. Google จะวิเคราะห์แท็ก heading เพื่อเรียนรู้ว่าเว็บเพจคุณมีเนื้อหาเกี่ยวกับอะไร เพราะฉะนั้นถ้าคุณใส่ keyword สำคัญๆ ในแท็ก heading ก็อาจช่วยเพิ่มอันดับใน Google ให้คุณได้

แท็ก heading มีให้เลือกใช้ถึง 6 แบบด้วยกัน คือ <h1> ถึง <h6>

<h1> คือหัวข้อหลักของบทความคุณ หน้าเว็บแต่ละหน้าจะมี <h1> อันเดียว มันคือส่วนที่บอกผู้อ่านและ Google ว่าบทความของคุณเกี่ยวกับอะไร

ใน WordPress เวลาคุณตั้งชื่อ title ให้บทความของคุณ WordPress จะเอาชื่อนั้นไปใส่ในแท็ก <h1> ให้ครับ

ส่วนแท็ก <h2> ถึง <h6> เราใช้กับ “หัวข้อย่อย” ของบทความ มีความสำคัญลดหลั่นกันไปตามตัวเลข โดยเว็บเพจหน้าหนึ่งจะมีแท็ก <h2> ถึง <h6> กี่อันก็ได้

ในทางปฏิบัติ เรามักจะใช้แค่ <h1> ถึง <h4> ไม่ค่อยได้ใช้ <h5> และ <h6> เท่าไหร่นัก (ส่วนตัวผมไม่เคยใช้เลย)

ที่นี้คุณอาจสงสัยว่า เมื่อไหร่ควรใช้ <h2>, <h3>, หรือ <h4>?

หลักการก็ง่ายๆ ดังนี้ครับ

  • หลังจากกำหนดชื่อ title (หรือ <h1>) แล้ว ถ้าต้องการสร้างหัวข้อย่อย ให้ใช้ <h2> ก่อนเสมอ
  • ถ้าหัวข้อย่อย <h2> มีหัวข้อย่อยลงไปอีก ก็ให้ใช้ <h3>
  • ถ้าหัวข้อย่อย <h3> มีหัวข้อย่อยลงไปอีก ก็ใช้ <h4>

เพื่อให้เห็นภาพ ให้ดูรูปด้านล่างครับ คุณจะเห็นวิธีใช้งานแท็ก heading ที่ถูกต้อง

ตัวอย่างการใช้แท็ก heading ใน html

โครงสร้างในรูปมาจากบทความที่ยาวมาก ผมจึงใช้ <h1> ถึง <h4> ถ้าเป็นบทความขนาดไม่ยาวมาก อาจใช้แค่ <h1> และ <h2> ก็พอแล้วครับ (หรือจะใช้ <h1> อย่างเดียวก็ไม่ผิดอะไร เว็บเพจบางหน้าไม่จำเป็นต้องมีหัวข้อย่อย)

เพื่อประโยชน์ในด้าน SEO เวลาคุณใช้แท็ก heading พวกนี้ คุณควรใส่ keyword ที่เกี่ยวข้องกับบทความคุณลงไปบ้าง (อยากให้เว็บเพจคุณติดอันดับคำไหน ก็ให้ใส่คำนั้นลงไป) โดยเฉพาะในชื่อบทความ (หรือก็คือแท็ก <h1>) ซึ่งเป็นแท็กที่สำคัญที่สุดของเว็บเพจ (ในแง่ SEO)

ย่อหน้า (paragraph) : <p>

หลังจากสร้างหัวข้อแล้ว คุณก็ต้องสร้างย่อหน้าต่างๆ ขึ้นมา

ใน WordPress ถ้าคุณสลับไปโหมด Code Editor คุณจะเห็นว่าย่อหน้าต่างๆ อยู่ในแท็ก <p>

<!-- wp:paragraph -->
<p>ตอนนี้คุณเลยอาจสงสัยว่า ผมเขียนบทความสอน HTML นี้ขึ้นมาทำไม คุณจำเป็นต้องเรียน HTML ด้วยหรือ</p>
<!-- /wp:paragraph -->

อย่าลืมนะครับว่าโค้ด <!– wp:paragraph –> (บรรทัดแรกและบรรทัดสุดท้าย) เป็นแค่คอมเม้นท์ที่ WordPress ใส่เข้ามา เพราะฉะนั้นไม่ต้องไปสนใจมันครับ

เพื่อให้บทความอ่านง่าย คุณควรแบ่งข้อความเป็นย่อหน้าสั้นๆ หลายๆ ย่อหน้า แทนการเขียนย่อหน้ายาวๆ ไม่กี่ย่อหน้า

การเขียนย่อหน้ายาวๆ อาจส่งผลเสียต่ออันดับใน Google ได้ครับ สมมุติผู้อ่านจาก Google คลิกเข้ามาเว็บเพจคุณแล้วเห็นย่อหน้ายาวๆ อ่านยากๆ แบบในรูปข้างล่าง มีโอกาสสูงที่เค้าจะกดปุ่ม back หรือปิดหน้าเว็บคุณทันทีครับ

ตัวอย่างย่อหน้ายาวๆ อ่านยากๆ

ซึ่ง Google เนี่ยจะเก็บข้อมูลพฤติกรรมพวกนี้ไว้ ถ้า Google เห็นว่าคนส่วนมากเปิดเว็บเพจคุณแล้วคลิกปุ่ม back แทบจะในทันที Google จะมองว่าเว็บเพจคุณไม่มีคุณภาพ และลดอันดับของเว็บเพจคุณลง

ในทางตรงอันข้าม หากคุณทำเว็บเพจให้น่าอ่าน คนจะใช้เวลาบนเว็บเพจคุณนานขึ้น ซึ่งอาจส่งผลดีกับอันดับใน Google ได้ครับ

เวลาพูดถึง SEO ผมใช้คำว่า “อาจ” บ่อยๆ (ถ้าคุณทำแบบนี้ อาจทำให้อันดับเว็บคุณดีขึ้น) เหตุผลก็เพราะมีปัจจัยมากมายที่ส่งผลต่ออันดับใน Google (ผู้เชี่ยวชาญบางคนบอกว่ามีเป็นร้อยปัจจัยเลยทีเดียว) ผมไม่สามารถการันตีได้ว่าถ้าคุณทำตามที่ผมแนะนำแล้ว อันดับของเว็บเพจคุณจะขึ้น 100% แน่นอน

ลิงก์ (Hyperlinks) : <a>

ลิงก์มีหน้าตาแบบนี้ครับ

<a href="https://noobmarketer.com">โฮมเพจ NoobMarketer</a>

ในโค้ดด้านบน href ใช้ระบุว่าจะให้ลิงก์ไปที่ไหน ส่วนข้อความที่อยู่ระหว่างแท็ก <a> และ </a> คือข้อความที่เราต้องการให้คนอ่านเห็น (เรียกว่า anchor text)

โค้ดด้านบนจะให้ผลลัพธ์เป็น: โฮมเพจ NoobMarketer

โดยปกติลิงก์จะเปิดในหน้าต่างเดิม ถ้าคุณอยากให้ลิงก์เปิดในหน้าต่างใหม่ ให้เพิ่มโค้ด target=”_blank” เข้าไป

<a href="https://noobmarketer.com" target=”_blank”>โฮมเพจ NoobMarketer</a>

คราวนี้ถ้าคุณกดลิงก์นี้ดู โฮมเพจ NoobMarketer หน้าเว็บจะเปิดในหน้าต่างใหม่ครับ

รูปภาพ (Image) : <Img>

หากต้องการใส่รูปภาพใน HTML เขียนโค้ดแบบนี้ครับ

<img src="html-tutorial.png" alt="สอนเขียน html" />

ซึ่งจริงๆ ถ้าคุณใช้ Visual Editor ใน WordPress คุณก็ไม่ต้องมานั่งจำโค้ดพวกนี้หรอก แต่ที่ผมอยากให้สนใจคือส่วนนี้นี้ alt=”…” (alternative text)

ข้อความตามหลัง alt คือเอาไว้สำหรับกรณีที่ web browser แสดงรูปภาพไม่ได้ด้วยเหตุผลบางอย่าง (อาจจะหารูปไม่เจอ) เราสามารถกำหนดให้แสดงข้อความแทนได้ ซึ่งก็คือข้อความใน alt=”…” นั้นเองครับ

ถ้าคุณใช้ Visual Editor ของ WordPress เวลาที่คุณกดไปบนรูปภาพ คุณสามารถกำหนดข้อความ alt ได้ตามรูปด้านล่างครับ

วิธีกำหนด Alt Text

เคล็ดลับอย่างหนึ่งที่อาจช่วยเพิ่มอันดับใน Google คือเวลาเราใส่ข้อความ alt text ให้รูปภาพของเรา ให้ใส่ keyword ที่เกี่ยวข้องกับบทความลงไปด้วย (Google จะได้เห็นว่าบทความของเรามีความเกี่ยวข้องกับ keyword นั้นๆ จริง)


จบแล้วครับสำหรับบทความสอน HTML หวังว่าจะเป็นประโยชน์ต่อผู้อ่านบ้างนะครับ

2 thoughts on “สอน HTML และคำสั่งเบื้องต้น (พร้อมตัวอย่างการใช้งานจริง)”

  1. ผมไล่อ่านทุกบทความในเวบไซต์นี้ ตอนแรกคิดว่าจะข้ามบทความนี้ เพราะคิดว่าอาจยากไป แต่พออ่านพบว่าไม่ยากขนาดนั้น และนำไปใช้ได้จริงอีกด้วย

    ขออนุญาตถามคำถามครับ

    ตอนนี้เวบ marketplace ที่ผมลงสินค้าขายไว้ เค้าอนุญาตให้ใช้หัวข้อแค่ H4 ถึง H6 เท่านั้นในส่วนของคำบรรยายสินค้า

    ไม่ทราบว่า H4 ถึง H6 ก็(อาจ)มีน้ำหนักต่อ Google SEO มากกว่าส่วนของ paragraph หรือเปล่าครับ?

    และ ถ้าเราเป็นผู้เขียน html ของคำบรรยายสินค้าของเราด้วยตัวเองบน marketplace (อย่างในกรณีนี้) จะมีอะไรช่วย SEO เราได้อีกบ้างนอกจากส่วนของ Heading เหรอครับ? (นับเฉพาะในส่วนของ’คำบรรยายสินค้า’ ไม่รวม’รูปภาพ’หรือ’ชื่อสินค้า’ อะไรแบบนั้นน่ะครับ)

    • ผมไม่ทราบเหมือนกันครับว่า H4 ถึง H6 มีน้ำหนักต่อ Google SEO มากกว่าส่วนของ paragraph หรือเปล่า
      สิ่งที่มีผลต่อ SEO นอกจาก heading ก็คือตัวเนื้อหาใน paragraph นั่นแหละครับ ถ้าเราไม่สามารถใช้แท็ก heading ได้ เราสามารถใส่ keywords ใน paragraph แทนได้ ช่วย SEO ได้เหมือนกันครับ

      สรุปคือ สำหรับผม ถ้าคำบรรยายสินค้าไม่ยาวมาก ก็จะไม่ใช้ H4 – H6 เลยครับ แต่จะใส่ keywords ที่คนอาจค้นหาไปในแท็ก paragraph
      ถ้าคำบรรยายสินค้ายาวหน่อย ก็อาจจะใช้ H4 เพื่อทำให้เนื้อหามันอ่านง่าย มีหัวข้อชัดเจน แต่คงจะไม่ใช้ H5 และ H6 ครับ เพราะอาจจะทำให้โครงสร้างซับซ้อนไป

Comments are closed.