HTML5 - ไวยากรณ์

ภาษา HTML 5 มีไวยากรณ์ HTML แบบ "กำหนดเอง" ที่เข้ากันได้กับเอกสาร HTML 4 และ XHTML1 ที่เผยแพร่บนเว็บ แต่ไม่สามารถใช้งานร่วมกับคุณลักษณะ SGML ที่ลึกลับของ HTML 4 ได้

HTML 5 ไม่มีกฎไวยากรณ์เดียวกันกับ XHTML ที่เราต้องการชื่อแท็กตัวพิมพ์เล็กโดยอ้างถึงแอตทริบิวต์ของเราแอตทริบิวต์ต้องมีค่าและเพื่อปิดองค์ประกอบว่างทั้งหมด

HTML5 มาพร้อมกับความยืดหยุ่นมากมายและรองรับคุณสมบัติดังต่อไปนี้ -

ชื่อแท็กตัวพิมพ์ใหญ่
เครื่องหมายคำพูดเป็นทางเลือกสำหรับแอตทริบิวต์
ค่าแอตทริบิวต์เป็นทางเลือก
การปิดองค์ประกอบว่างเป็นทางเลือก

DOCTYPE

DOCTYPE ใน HTML เวอร์ชันเก่ามีความยาวมากกว่าเนื่องจากภาษา HTML ใช้ SGML ดังนั้นจึงต้องมีการอ้างอิงถึง DTD

ผู้เขียน HTML 5 จะใช้ไวยากรณ์ง่ายๆในการระบุ DOCTYPE ดังนี้ -

<!DOCTYPE html>

ไวยากรณ์ข้างต้นไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่

การเข้ารหัสอักขระ

ผู้เขียน HTML 5 สามารถใช้ไวยากรณ์อย่างง่ายเพื่อระบุการเข้ารหัสอักขระได้ดังนี้ -

<meta charset = "UTF-8">

ไวยากรณ์ข้างต้นไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่

แท็ก <script>

เป็นเรื่องปกติที่จะเพิ่มแอตทริบิวต์ประเภทที่มีค่า "text / javascript" ให้กับองค์ประกอบสคริปต์ดังนี้ -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 จะลบข้อมูลเพิ่มเติมที่จำเป็นและคุณสามารถใช้ไวยากรณ์ต่อไปนี้ -

<script src = "scriptfile.js"></script>

แท็ก <link>

จนถึงตอนนี้คุณกำลังเขียน <link> ดังนี้ -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 จะลบข้อมูลเพิ่มเติมที่จำเป็นและคุณสามารถใช้ไวยากรณ์ต่อไปนี้ -

<link rel = "stylesheet" href = "stylefile.css">

HTML5 องค์ประกอบ

องค์ประกอบ HTML5 ถูกมาร์กอัปโดยใช้แท็กเริ่มต้นและแท็กปิดท้าย แท็กถูกคั่นด้วยวงเล็บเหลี่ยมโดยมีชื่อแท็กคั่นกลาง

ความแตกต่างระหว่างแท็กเริ่มต้นและแท็กปิดท้ายคือแท็กหลังมีเครื่องหมายทับก่อนชื่อแท็ก

ต่อไปนี้เป็นตัวอย่างขององค์ประกอบ HTML5 -

<p>...</p>

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

องค์ประกอบส่วนใหญ่มีเนื้อหาบางส่วนเช่น <p> ... </p> ประกอบด้วยย่อหน้า อย่างไรก็ตามองค์ประกอบบางอย่างถูกห้ามมิให้มีเนื้อหาใด ๆ เลยและองค์ประกอบเหล่านี้เรียกว่าองค์ประกอบโมฆะ ตัวอย่างเช่น,br, hr, link, metaฯลฯ

นี่คือรายการองค์ประกอบ HTML5ทั้งหมด

HTML5 แอตทริบิวต์

องค์ประกอบอาจมีแอตทริบิวต์ที่ใช้ในการตั้งค่าคุณสมบัติต่างๆขององค์ประกอบ

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

ต่อไปนี้เป็นตัวอย่างของแอตทริบิวต์ HTML5 ซึ่งแสดงให้เห็นถึงวิธีการมาร์กอัปองค์ประกอบ div ด้วยแอตทริบิวต์ที่มีชื่อว่า class โดยใช้ค่า "example" -

<div class = "example">...</div>

สามารถระบุแอตทริบิวต์ได้ภายในแท็กเริ่มต้นเท่านั้นและห้ามใช้ในแท็กปิดท้าย

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

นี่คือรายการแอตทริบิวต์ HTML5ทั้งหมด

เอกสาร HTML5

แท็กต่อไปนี้ได้รับการแนะนำเพื่อโครงสร้างที่ดีขึ้น -

section- แท็กนี้แสดงถึงส่วนเอกสารหรือแอปพลิเคชันทั่วไป สามารถใช้ร่วมกับ h1-h6 เพื่อระบุโครงสร้างเอกสาร
article - แท็กนี้แสดงถึงเนื้อหาที่เป็นอิสระของเอกสารเช่นรายการบล็อกหรือบทความในหนังสือพิมพ์
aside - แท็กนี้แสดงถึงเนื้อหาส่วนหนึ่งที่เกี่ยวข้องกับส่วนที่เหลือของหน้าเพียงเล็กน้อย
header - แท็กนี้แสดงถึงส่วนหัวของส่วน
footer - แท็กนี้แสดงถึงส่วนท้ายของส่วนและอาจมีข้อมูลเกี่ยวกับผู้แต่งข้อมูลลิขสิทธิ์และอื่น ๆ
nav - แท็กนี้แสดงถึงส่วนของเอกสารที่มีไว้สำหรับการนำทาง
dialog - แท็กนี้สามารถใช้เพื่อทำเครื่องหมายการสนทนา
figure - แท็กนี้สามารถใช้เพื่อเชื่อมโยงคำอธิบายภาพเข้ากับเนื้อหาที่ฝังไว้เช่นกราฟิกหรือวิดีโอ

มาร์กอัปสำหรับเอกสาร HTML 5 จะมีลักษณะดังต่อไปนี้ -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -