คู่มือ HTML พื้นฐานสำหรับ Dummies

อัพเดตล่าสุด 05 ตุลาคม 2020


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

ปัญหานี้คือหากคุณไม่รู้พื้นฐานบางประการคุณสามารถประสบปัญหาในบล็อกของคุณได้อย่างง่ายดายและต้องจ้างนักพัฒนาราคาแพงเพื่อแก้ไขสิ่งที่อาจเป็นปัญหาเล็กน้อย ไม่เพียงแค่นั้น แต่การสร้างการเปลี่ยนแปลงในบล็อกของคุณเช่นการเพิ่มวิดเจ็ตข้อความที่กำหนดเองต้องใช้ความรู้เล็กน้อย

รหัส HTML
HTML“ รหัส”

และหากคุณกำลังประสบกับรูปแบบเนื้อหาไม่ถูกต้องความรู้ด้าน HTML จะช่วยให้คุณกลับมาได้อีกครั้ง

ต่อไปนี้คือคู่มือ HTML HTML สำหรับนักเขียนบล็อกและเจ้าของธุรกิจออนไลน์ที่ไม่ใช้เทคโนโลยี

HTML เป็นกระดูกสันหลังของอินเทอร์เน็ตในปัจจุบัน เว็บไซต์หลายล้านแห่งรวมตัวกันเป็นอินเทอร์เน็ต HTML อยู่ที่ไหน Building Block ของเว็บไซต์เหล่านี้ทั้งหมด.

ก่อนที่เราจะเริ่ม ...

1. HTML คืออะไร?

HTML เป็นคำย่อของ Hyper Tต่อ MArkupe Language เป็นภาษามาตรฐานสำหรับการติดแท็กเนื้อหาสำหรับเว็บเบราเซอร์

HTML แสดงด้วย“ องค์ประกอบ” องค์ประกอบเรียกอีกอย่างว่า "แท็ก"

2. ทำไมต้องใช้ HTML?

เว็บเบราเซอร์สามารถแสดงเว็บไซต์ได้เมื่อเขียนลงในภาษาที่สนับสนุนเท่านั้น HTML เป็นภาษามาร์คอัปที่พบมากที่สุดและมีการยอมรับสูงสุดสำหรับเว็บเบราเซอร์

นั่นเป็นเหตุผลที่คุณต้องการ HTML

3. HTML case มีความอ่อนไหวหรือไม่

HTML ไม่สำคัญต่อกรณี แต่วิธีที่ดีที่สุดคือการเขียน HTML ด้วยกรณีที่เหมาะสม

ขั้นตอนในการสร้างไฟล์ HTML แรกของคุณ

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

คุณต้องมีโปรแกรมแก้ไขโค้ด โปรแกรมแก้ไขรหัสที่ดีจะช่วยให้เขียนและจัดระเบียบโค้ดขนาดใหญ่ได้ง่ายขึ้น

ฉันใช้และแนะนำ Notepad + + (ฟรีและโอเพ่นซอร์ส) สำหรับการเขียนภาษาบนเว็บ มีบรรณาธิการคนอื่น ๆ ที่คุณอาจใช้เช่นกัน lime ข้อความ, Atom เป็นต้น

นี่คือสิ่งที่คุณต้องทำ:

  1. ติดตั้งโปรแกรมแก้ไขโค้ด
  2. เปิดขึ้น
  3. สร้างไฟล์ใหม่
  4. บันทึกเป็นไฟล์. html

คุณพร้อมที่จะไปแล้ว!

ตัวอย่างโปรแกรมแก้ไขโค้ด Atom
ตัวแก้ไขโค้ด - Atom

1. สวัสดีชาวโลก - - '

คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ HTML ใหม่และบันทึก ตอนนี้รันบนเว็บเบราเซอร์ของคุณ

รหัส:

หน้าแรกของฉัน สวัสดีชาวโลก!

Output:

ยินดีด้วย! คุณสร้างไฟล์ HTML ไฟล์แรกของคุณแล้ว คุณไม่ต้องเข้าใจในตอนนี้ เราจะครอบคลุมในไม่ช้า

ทำความเข้าใจเกี่ยวกับโครงสร้าง HTML

ทุกไฟล์ HTML มีโครงสร้างที่เปลือยเปล่าทั่วไป นี่คือที่ทุกอย่างเริ่มต้น และทุกหน้าใหญ่ของรหัสจะมาถึงโครงสร้างนี้หลังจากตัดแต่ง

เรามาลองทำความเข้าใจจาก“ Hello World!” รหัส. องค์ประกอบต่อไปนี้เป็นส่วนที่จำเป็นสำหรับไฟล์ HTML ทุกไฟล์

  • = เป็นการประกาศให้เบราว์เซอร์ทราบว่านี่คือไฟล์ HTML คุณต้องระบุก่อนไฟล์ แท็ก
  • = นี่คือองค์ประกอบรูทของไฟล์ HTML ทุกสิ่งที่คุณเขียนอยู่ระหว่าง และ .
  • = นี่เป็นส่วนของข้อมูลเมตาสำหรับเบราเซอร์ รหัสภายในแท็กนี้ไม่มีการแสดงภาพ
  • = นี่คือส่วนที่เว็บเบราว์เซอร์แสดงผล สิ่งที่คุณเห็นบนเว็บไซต์คือการแสดงผลรหัสระหว่าง และ .

2. แท็ก HTML

HTML คือการทำงานร่วมกันของแท็กต่างๆนับร้อย คุณจำเป็นต้องเรียนรู้วิธีการทำงาน นอกจากนี้คุณยังต้องตรวจสอบให้แน่ใจว่าได้ใช้พวกเขาในทางที่ถูกต้อง

แท็ก HTML มักจะมีแท็กเปิดและแท็กปิด แท็กเปิดมีคีย์เวิร์ดล้อมรอบด้วยเครื่องหมายน้อยกว่า (<) และมากกว่า (>) แท็กปิดมีทุกอย่างเหมือนกัน แต่มีเครื่องหมายทับ (/) อยู่หลังเครื่องหมายน้อยกว่า (<)

(2a) ส่วนหัว

แท็กหัวทั้งหมดอยู่ระหว่าง และ . มีข้อมูลเมตาสำหรับเว็บเบราว์เซอร์และเครื่องมือค้นหา โดยพื้นฐานแล้วพวกเขาไม่มีเอาต์พุตภาพ

แท็กชื่อกำหนดชื่อเรื่องของหน้าเว็บที่สามารถมองเห็นได้บนแท็บเบราเซอร์ ข้อมูลนี้ถูกใช้โดยโปรแกรมเว็บและเครื่องมือค้นหา คุณสามารถมีชื่อไฟล์ได้สูงสุดหนึ่งไฟล์ต่อไฟล์ HTML

รหัส:

หน้าแรกของฉัน
Title Tag - ตัวอย่าง HTML
แท็กชื่อจะปรากฏที่ด้านบนของเบราเซอร์

แท็กลิงก์เชื่อมโยงหน้า HTML ของคุณกับทรัพยากรภายนอก การใช้งานหลักคือการเชื่อมโยงหน้า HTML กับสไตล์ชีต CSS เป็นแท็กปิดตัวเองและไม่ต้องการตอนจบ . ที่นี่ rel ย่อมาจากความสัมพันธ์กับไฟล์และ src หมายถึงแหล่งที่มา

รหัส:

Meta เป็นอีกหนึ่งแท็กปิดเองที่ให้ข้อมูลเมตาของไฟล์ html เครื่องมือค้นหาและบริการเว็บอื่น ๆ ใช้ข้อมูลเหล่านี้ ต้องใช้เมตาแท็กหากต้องการเพิ่มประสิทธิภาพหน้าเว็บสำหรับเครื่องมือค้นหา

รหัส:

<meta name="description" content="This is the short description that search engines show"

แท็กสคริปต์ใช้สำหรับรวมสคริปต์ฝั่งเซิร์ฟเวอร์หรือเชื่อมโยงไปยังไฟล์สคริปต์ภายนอก แอตทริบิวต์นี้สามารถมีได้สองแอตทริบิวต์ในแท็กเปิด หนึ่งคือชนิดและอีกแหล่งคือ src (แหล่งข้อมูล)

รหัส:

แท็ก Noscript ทำงานเมื่อสคริปต์ถูกปิดใช้งานในเว็บเบราว์เซอร์ มันทำให้หน้าเข้ากันได้กับผู้ที่ไม่อนุญาตสคริปต์ในเว็บเบราว์เซอร์ของพวกเขา

รหัส:

อนิจจา สคริปต์ถูกปิดใช้งาน

(2b) แท็ก Body

แท็กร่างกายทั้งหมดอยู่ระหว่าง และ . พวกเขามีเอาต์พุตภาพ นี่คือที่ที่มีงานทำมากที่สุด คุณต้องใช้แท็กเหล่านี้เพื่อจัดโครงสร้างเนื้อหาหน้าหลักของคุณ

ถึง

นี่คือแท็กหัวเรื่อง ส่วนหัวที่สำคัญที่สุดถูกแท็กด้วย และสำคัญน้อยที่สุดด้วย . คุณควรใช้ตามลำดับชั้นที่ถูกต้อง

รหัส:

นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h2 นี่คือหัวเรื่อง h2 นี่คือหัวเรื่อง h2

Output:

แท็กการจัดรูปแบบ

ข้อความในไฟล์ html สามารถจัดรูปแบบได้โดยใช้แท็กการจัดรูปแบบจำนวนมาก คุณจะต้องเน้นคำหรือบรรทัดจากเนื้อหาของคุณ

รหัส:

คุณสามารถเน้นข้อความของคุณได้หลายวิธี คุณสามารถ ตัวหนา ขีดเส้นใต้ ตัวเอียง เครื่องหมาย , ตัว ห้อย , ตัวยก และอีกมากมาย!

Output:

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

ตัวอย่าง:

You can comment out any code by surrounding them in this way -->

(2c) แท็ก HTML ที่สำคัญอื่น ๆ

Anchor เป็นแท็กที่ทรงคุณค่าซึ่งใช้กันเกือบทุกแห่ง คุณจะไม่เห็นหน้าเว็บออนไลน์ใด ๆ โดยไม่มีลิงก์ anchor อย่างน้อยหนึ่งลิงก์

โครงสร้างก็เหมือนกัน มีส่วนเปิด และส่วนปิด ข้อความที่คุณต้องการยึดจะอยู่ระหว่าง และ

มีคุณลักษณะบางอย่างที่กำหนดตำแหน่งและวิธีการที่ผู้ใช้ไปหลังจากคลิกที่นี่

  • ahref =”“ = กำหนดลิงก์ปลายทาง ลิงค์ไประหว่างเครื่องหมายคำพูดคู่
  • เป้าหมาย =”“ = กำหนดว่า URL จะเปิดในแท็บเบราว์เซอร์ใหม่หรือในแท็บเดียวกัน target =” _ blank” ใช้สำหรับแท็บใหม่และ target =” _ self” ใช้สำหรับเปิดในแท็บเดียวกัน
  • rel =”“ = เป็นการกำหนดความสัมพันธ์ของเพจปัจจุบันกับเพจที่เชื่อมโยง หากคุณไม่เชื่อถือหน้าที่เชื่อมโยงคุณสามารถกำหนด rel =” nofollow”

รหัส:

คลิกที่นี่ เพื่อไปที่ Google จะเปิดขึ้นในแท็บใหม่ คลิกที่นี่ มันจะพาคุณไปที่ Google แต่จะเปิดในแท็บปัจจุบัน

Output:

แท็กรูปภาพเป็นอีกหนึ่งแท็กที่สำคัญโดยที่คุณไม่สามารถนึกภาพเว็บไซต์ที่ใช้รูปภาพจำนวนมากได้

คือแท็กปิดตัวเอง ไม่จำเป็นต้องปิดแบบดั้งเดิมเช่น . มีคุณลักษณะบางอย่างที่คุณต้องทราบก่อนจึงจะใช้งานได้อย่างถูกต้อง

  • src =”“ = นี่เป็นการกำหนดลิงค์ต้นทางของภาพ ใส่ลิงค์ด้านขวาระหว่างเครื่องหมายคำพูดคู่
  • alt =”“ = หมายถึงข้อความอื่น เมื่อภาพของคุณไม่ได้โหลดข้อความนี้จะทำให้ผู้ใช้มีความคิดเกี่ยวกับภาพที่หายไป
  • width =”“ = กำหนดความกว้างของภาพเป็นพิกเซล
  • ความสูง =”“ = กำหนดความสูงของภาพเป็นพิกเซล

ตัวอย่าง:

นี่คือ Googleplex ในเดือนสิงหาคม 2014 ภาพนี้มีความกว้าง 500 พิกเซลและสูง 375 พิกเซล

Output:

เคล็ดลับ: ต้องการแทรกรูปภาพที่คลิกได้หรือไม่? ห่อโค้ดรูปภาพด้วย แท็ก ดูว่าจะเป็นอย่างไร

หรือ

แท็กรายการมีไว้สำหรับสร้างรายการ ย่อมาจากรายการสั่งซื้อ (รายการลำดับเลข) และ ย่อมาจากรายการที่ไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)

รายการภายใน หรือ ถูกแท็กด้วย . li ย่อมาจาก list คุณสามารถมีได้มาก ตามที่คุณต้องการภายในผู้ปกครอง หรือ แท็ก

รหัส:

นี่คือรายการสั่งซื้อ: รายการที่ 1 รายการที่ 2 รายการที่ 3 นี่คือรายการที่ไม่เรียงลำดับ: รายการที่ 1 รายการที่ 2 รายการที่ 3

Output:

แท็กตารางคือการสร้างตารางข้อมูล มีแท็กระดับภายในที่กำหนดส่วนหัวตารางแถวและคอลัมน์

คือรหัสหลักภายนอก ในแท็กนี้ ย่อมาจากแถวตาราง ย่อมาจากคอลัมน์ตารางและ ย่อมาจากส่วนหัวของตาราง

รหัส:

ชื่อ อายุ วิชาชีพ โจ้ 27 นักธุรกิจ แครอล 26 พยาบาล Simone 39 ศาสตราจารย์

Output:

หมายเหตุ: ค่าภายในตัวแรก เป็นหัวเรื่อง ดังนั้นเราจึงใช้ ซึ่งใช้เอฟเฟกต์ข้อความเป็นตัวหนากับข้อความ

การจัดกลุ่มตาราง

คุณสามารถขยายฟังก์ชันการทำงานของตารางโดยใช้องค์ประกอบการจัดกลุ่มตาราง จะมีบางครั้งที่คุณต้องสร้างตารางขนาดใหญ่ที่แบ่งออกเป็นหลายหน้า

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

แท็กการจัดกลุ่มตารางมีดังนี้:

  • = สำหรับการตัดส่วนหัวของตาราง มันจะพิมพ์ไปทุกหน้าแยกของตาราง
  • = สำหรับการตัดข้อมูลหลักของตาราง คุณสามารถมีได้มาก ตามที่คุณต้องการ ก แท็กหมายถึงกลุ่มข้อมูลที่แยกจากกัน
  • = สำหรับการตัดข้อมูลส่วนท้ายของตาราง มันจะพิมพ์ไปทุกหน้าแยกของตาราง

โปรดทราบว่าไม่จำเป็นต้องใช้การจัดกลุ่ม คุณสามารถใช้เพื่อสร้างตารางที่ใหญ่กว่าให้อ่านได้ แม้ว่านักพัฒนาซอฟต์แวร์พิเศษบางรายใช้แท็กเหล่านี้เป็นตัวเลือก CSS อย่างชัดเจน

นี่คือวิธีที่เราสามารถจัดกลุ่มตารางตัวอย่างของเราเป็นไฟล์ , และ :

รหัส:

ชื่อ อายุ วิชาชีพ จอห์น 27 นักธุรกิจ แครอล 26 พยาบาล Simone 39 ศาสตราจารย์ จำนวนคนทั้งหมด: 3

Output:

องค์ประกอบของฟอร์มใช้สำหรับสร้างฟอร์มโต้ตอบสำหรับเว็บเพจ รูปแบบ HTML ประกอบด้วยองค์ประกอบหลายอย่างที่ต่อเนื่องกัน ตัวอย่างเช่น: , เป็นต้น

แอตทริบิวต์ action ในรูปแบบมีความสำคัญมาก จะชี้ไปยังฝั่งเซิร์ฟเวอร์หรือหน้าของ บริษัท อื่นเพื่อประมวลผลข้อมูล สำหรับการประมวลผลคุณต้องกำหนดวิธีการก่อน

คุณสามารถใช้สองวิธีได้หรือโพสต์ รับส่งข้อมูลทั้งหมดในรูปแบบ URL ที่โพสต์ส่งข้อมูลในเนื้อหาของข้อความ

การป้อนข้อมูลสำหรับฟอร์มมีหลายประเภท ประเภทการป้อนข้อมูลพื้นฐานคือข้อความ มันเขียนเป็น . ประเภทอาจเป็นวิทยุช่องทำเครื่องหมายอีเมลและอื่น ๆ ควรมีการป้อนข้อมูลประเภทส่งที่ด้านล่างเพื่อสร้างปุ่มส่ง

แท็กใช้สำหรับสร้างป้ายกำกับและเชื่อมโยงกับอินพุต กฎของการเชื่อมโยงเลเบลกับอินพุตคือมีค่าเดียวกันในแอตทริบิวต์ for =”” ของ label และ id =”” ของอินพุต

รหัส:

ชื่อจริง: นามสกุล: ชีวภาพสั้น: เพศ: ชาย หญิง

Output:

หมายเหตุ: ฉันได้ชี้แอ็คชันไปเป็นค่าว่างเนื่องจากไม่ได้เชื่อมต่อกับเซิร์ฟเวอร์ใด ๆ เพื่อประมวลผลข้อมูล

3. แอตทริบิวต์ HTML

แอตทริบิวต์เป็นประเภทหนึ่งของการปรับเปลี่ยนสำหรับแท็ก HTML พวกเขาเพิ่มการกำหนดค่าใหม่ลงในแท็ก HTML

แอตทริบิวต์ดูเหมือนแอตทริบิวต์ = "" และอยู่ในแท็ก HTML เปิด ค่าของแอตทริบิวต์จะอยู่ระหว่างเครื่องหมายคำพูดคู่

id =”” และ class =””

id และ class เป็นตัวระบุแท็ก HTML ชื่อที่ต่างกันจะถูกกำหนดให้กับองค์ประกอบ HTML ต่างๆโดยใช้ตัวระบุ คุณสามารถใช้ตัวระบุคลาสหนึ่งสำหรับหลายองค์ประกอบได้ แต่คุณไม่สามารถใช้รหัสประจำตัวเดียวสำหรับองค์ประกอบหลายรายการได้

รหัส:

นี่คือชื่อเรื่องหลัก

href =””

href ย่อมาจาก Hypertext Reference พวกเขาชี้ให้ผู้ใช้ไปยังลิงก์อ้างอิง แท็ก Anchor ใช้ href เพื่อส่งผู้ใช้ไปยัง URL ปลายทาง

รหัส:

Google

src =””

src ย่อมาจาก source กำหนดแหล่งที่มาของสื่อหรือทรัพยากรที่คุณใช้ในไฟล์ HTML แหล่งที่มาอาจเป็น URL ท้องถิ่นหรือบุคคลที่สามก็ได้

รหัส:

alt =””

alt หมายถึงทางเลือก เป็นข้อความสำรองที่ใช้งานได้เมื่อองค์ประกอบ HTML ไม่สามารถโหลดได้

รหัส:

style =””

style มักใช้ในแท็ก HTML นี่เป็นงาน CSS ภายในแท็ก HTML คุณสมบัติการจัดแต่งทรงผมของคุณอยู่ระหว่างเครื่องหมายคำพูดคู่

รหัส:

นี่เป็นอีกชื่อเรื่อง

4. การแสดงรหัส: บล็อกเทียบกับอินไลน์

องค์ประกอบบางอย่างจะขึ้นบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่มีอยู่ องค์ประกอบเหล่านี้คือองค์ประกอบ "บล็อก"

เช่น: , , - , แบบฟอร์ม ฯลฯ

องค์ประกอบบางอย่างใช้พื้นที่ที่จำเป็นเท่านั้นและไม่ได้ขึ้นบรรทัดใหม่ สิ่งเหล่านี้คือองค์ประกอบ "แบบอินไลน์"

เช่น: ,, ,, เป็นต้น

คุณจะต้องแยกแยะองค์ประกอบของบล็อกออกจากอินไลน์เมื่อคุณใช้รูปแบบ CSS ในคู่มือ HTML นี้จะไม่จำเป็นมากนัก

รหัส:

หน้าแรกของฉัน นี่คือหัวข้อ H2 มีการแสดงบล็อก นี่คือ อีก หัวเรื่อง H2 ที่นี่แท็กขีดเส้นใต้มีการแสดงผลแบบอินไลน์

Output:

5. คำพูดคู่เทียบกับคำพูดเดี่ยวใน HTML

คำถามนี้ชัดเจนมาก สิ่งที่คุณควรใช้ใน HTML? อ้างเพียงครั้งเดียวหรือสองครั้ง? คนดูเหมือนจะใช้ทั้งสอง แต่ที่หนึ่งถูกต้อง?

ใน HTML เครื่องหมายคำพูดเดี่ยวและเครื่องหมายคำพูดคู่เหมือนกัน พวกเขาไม่ได้สร้างความแตกต่างในผลลัพธ์

คุณสามารถใช้คนที่คุณต้องการ แต่การผสมทั้งในหน้าของรหัสถือว่าเป็นการปฏิบัติที่ไม่ดี คุณควรจะสอดคล้องกับคนใดคนหนึ่ง

6. HTML เชิงความหมายเทียบกับ HTML ที่ไม่ใช่ความหมาย

ความหมาย HTML เป็น HTML รุ่นล่าสุดซึ่งเรียกอีกอย่างว่า HTML5 เป็นเวอร์ชันที่พัฒนาโดย HTML และ XHTML แบบไม่ใช้ความหมาย

ทำไม HTML5 ถึงดีกว่า? ในเวอร์ชันก่อนหน้านี้องค์ประกอบ HTML ถูกระบุโดยชื่อรหัส / คลาส ตัวอย่างเช่น: ถือเป็นบทความ

ใน HTML5 แท็กแทนตัวเองว่าเป็นบทความโดยไม่จำเป็นต้องมีตัวระบุ id / คลาส

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

นี่คือรายการของแท็ก HTML5 ที่เป็นที่นิยม:

  • = เป็นการตัดเนื้อหาหลักที่คุณต้องการให้ผู้ดูของคุณเห็น
  • = เป็นการทำเครื่องหมายส่วนหัวของเนื้อหาเช่นชื่อหรือเมตาผู้เขียน
  • = ระบุเนื้อหาที่ผู้ใช้กำหนดหรือเป็นอิสระให้กับผู้ดูของคุณ
  • = สามารถจัดกลุ่มโค้ดต่างๆเช่นส่วนหัวส่วนท้ายหรือแถบด้านข้าง คุณสามารถพูดได้ว่าเป็นรูปแบบความหมายของ div
  • = นี่คือเนื้อหาส่วนท้ายข้อความปฏิเสธความรับผิดชอบหรือลิขสิทธิ์ของคุณ
  • = ช่วยให้คุณสามารถแทรกไฟล์เสียงโดยไม่ต้องมีปัญหาปลั๊กอินใด ๆ
  • = ชอบ คุณสามารถแทรกวิดีโอโดยใช้แท็กนี้ได้โดยไม่มีปัญหาเกี่ยวกับปลั๊กอิน

โครงสร้างแบบ HTML5 แบบง่ายๆจะมีลักษณะดังนี้:

หน้าแรกของฉัน เมนู 8 เมนู 1 นี่คือชื่อบทความ โพสต์โดย John Doe เนื้อหาของบทความอยู่ที่นี่ ลิขสิทธิ์ 2 John Doe

7. การตรวจสอบ HTML

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

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

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

Validator W3C เป็นบริการที่ได้รับความนิยมมากที่สุดสำหรับการตรวจสอบรหัส มีหลายวิธีในการตรวจสอบรหัส คุณสามารถอัปโหลดไฟล์หรือใส่รหัสโดยตรงในเครื่องมือตรวจสอบความถูกต้องของไฟล์

8. แหล่งข้อมูลที่เป็นประโยชน์อื่น ๆ

HTML เป็นหัวข้อที่เคยเรียนรู้ HTML เวอร์ชันที่อัปเดตเพิ่มเติมอาจมาเร็วขึ้น ดังนั้นคุณต้องปรับปรุงและฝึกซ้อมอยู่เสมอ การปฏิบัติเป็นสิ่งที่เอซ HTML

ต่อไปนี้เป็นแหล่งข้อมูลที่เป็นประโยชน์สำหรับคุณ: