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

ในบทความนี้ เราจะค่อยๆ สร้างหน้า HTML และตกแต่งด้วยแท็ก HTML5 ที่มีความหมาย

รูปภาพ - โครงสร้างความหมายสำหรับหน้า HTML5

DOCTYPE และเมตาแท็กในชื่อหน้า

เริ่มต้นด้วยเทมเพลตเอกสาร HTML5 มาตรฐานและเพิ่มเมตาแท็กที่ส่วนหัว:

ชื่อหน้า

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

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

ชื่อหน้า

ส่วนหัวของหน้าถูกจัดรูปแบบในแท็กส่วนหัว โปรดทราบว่าชื่อหน้าเขียนโดยใช้แท็ก h1

ชื่อไซต์

หากเรามีสโลแกนถัดจากชื่อเรื่อง เราจะวางมันไว้ใน p, div หรือ span

ชื่อไซต์

สโลแกนของเว็บไซต์

หมายเหตุเกี่ยวกับแท็ก H1

ควรสังเกตว่าใน HTML5 แท็ก H1 ใช้เพื่อระบุชื่อของคอนเทนเนอร์ที่คอนเทนเนอร์นั้นตั้งอยู่ (ซึ่งอาจเป็นส่วนหัว ส่วน บทความ ฯลฯ)

ก่อนการถือกำเนิดของแท็ก HTML5 ความหมายค่อนข้างแตกต่างและแตกต่าง ดังนั้นใน HTML4 อาจมีส่วนหัว H1 ได้เพียงหนึ่งส่วนหัวต่อหน้าเท่านั้น! ตามกฎแล้ว นี่คือชื่อของบทความหรือชื่อของหน้า (เช่น หากเป็นหน้าหมวดหมู่ที่แสดงบทความหลายบทความ) H2 ใช้สำหรับหัวข้อย่อยหรือสำหรับส่วนของบทความหลัก H3 สำหรับส่วนย่อยและอื่นๆ

การนำทางหน้า

การออกแบบการนำทางหลักบนเว็บไซต์ควรมีอยู่ในแท็ก nav คุณควรจำไว้ว่าการออกแบบการนำทางด้วยองค์ประกอบรายการถือเป็นแนวทางปฏิบัติที่ดี

• บ้าน
• ผลงาน
• แกลเลอรี่
• รายชื่อผู้ติดต่อ

เนื้อหาบนหน้า

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

...เนื้อหาหน้าหลัก...

การออกแบบบทความ

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

ในตัวอย่างด้านล่าง ฉันแสดงการออกแบบบทความตามบริบทภายในแท็กหลัก บทความนี้มีบล็อกส่วนหัวพร้อมชื่อบทความ วันที่ตีพิมพ์ของบทความจะระบุด้วยแท็กเวลาพิเศษ ซึ่งแสดงเป็นองค์ประกอบอินไลน์ปกติ แท็กเวลามีแอตทริบิวต์พิเศษซึ่งต้องระบุเวลาการเผยแพร่ในรูปแบบเครื่อง นี่อาจเป็นเพียง datetime="2015-09-30" หรือชั่วโมงนาทีและวินาที datetime="2015-09-30T15:25:55" พารามิเตอร์ pubdate ระบุว่าบทความได้รับการเผยแพร่ในเวลาเดียวกันกับที่เขียน หากเป็นข่าว อาจเป็นไปได้ว่าเวลาของข่าวเป็นเวลาเดียวและเวลาในการเผยแพร่แตกต่างกัน คุณต้องระบุแท็กเวลาสองครั้ง และใส่ pubdate ในแท็กที่ระบุเวลาการเผยแพร่เท่านั้น

... ชื่อบทความ 30 กันยายน หัวข้อย่อยของบทความ

Lorem ipsum dolor นั่ง amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem ยั่วยวน! Deserunt repudiandae aperiam pariatur นั่ง harum ที่ a, quo, est neque Adipisci beatae eaque unde?

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

แถบด้านข้างหรือคอลัมน์พร้อมวิดเจ็ต

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

ชื่อวิดเจ็ต ... โพสต์ล่าสุด ... ความคิดเห็นยอดนิยม ...

แท็กส่วน

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

เพื่อให้เป็นตัวอย่างของบทความที่คุณกำลังอ่านอยู่ คุณสามารถล้อมแต่ละย่อหน้าไว้ในแท็กได้ ตัวอย่างเช่น แท็กส่วนสามารถใช้เพื่อไฮไลต์กลุ่มเนื้อหาบนหน้า Landing Page ฟังดูคล้ายกับคำจำกัดความขององค์ประกอบ div ซึ่งมักใช้เป็นคอนเทนเนอร์สำหรับเนื้อหา ความแตกต่างก็คือ div ไม่มีความหมายเชิงความหมาย และไม่ได้พูดอะไรเกี่ยวกับเนื้อหาที่อยู่ภายใน ตรงกันข้ามแท็กส่วนใช้เพื่อระบุอย่างชัดเจนว่าเนื้อหาภายในนั้นเกี่ยวข้องกับความหมาย คุณสามารถแทนที่แท็ก div บางส่วนด้วยแท็กส่วนได้ แต่ให้ถามตัวเองเสมอว่า “เนื้อหานี้เกี่ยวข้องหรือไม่”

ตัวอย่างการใช้แท็กส่วนในรายการเมืองต่างๆ:

เหตุการณ์นอกเมือง

เข้าร่วมกับเราในเมืองเหล่านี้ในปี 2010

ซีแอตเทิล

ไปตามถนนอิฐสีเหลือง

บอสตัน

นั่นคือ Beantown สำหรับเพื่อนๆ

มินนีแอโพลิส

มันดีมาก

ไม่มีที่พักให้.

ส่วนท้ายของไซต์ - ส่วนท้าย

ส่วนท้ายของไซต์ได้รับการออกแบบพร้อมกับแท็ก

© 2015 เว็บไซต์ลิขสิทธิ์

บทสรุป

คุณสามารถใช้เครื่องมือเค้าร่าง HTML5 เพื่อตรวจสอบโครงสร้างหน้าได้ มันแสดงโครงสร้างหน้าตามบล็อกและส่วนหัว

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

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

หมายเหตุสำคัญเกี่ยวกับการใช้แท็ก HTML5

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

บทความและวัสดุ

ตอนนี้เราพร้อมที่จะทำให้มือของเราสกปรกด้วยหมึกแล้ว รู้สึกเหมือนเป็นนักออกแบบเลย์เอาต์ในโรงพิมพ์ในช่วงกลางศตวรรษที่ 20 เสียงจังหวะของแท่นพิมพ์ กลิ่นของการพิมพ์สด เสียงคลิกของตัวอักษรทองเหลืองถูกผลักเข้าที่ กระดาษหนังสือพิมพ์ม้วนใหญ่ รอรับข้อมูลการหมุนเวียนบางส่วน และคุณนั่งอยู่ที่เครื่องเรียงพิมพ์ วางบล็อคข้อมูลให้ถูกที่...

ในการทำงานให้เสร็จสิ้นคุณจะต้องมี (จะมีเหตุผลในการอัพเกรด):

หากสนใจสามารถตรวจสอบได้ว่าเว็บเบราว์เซอร์ของคุณรองรับมาตรฐาน HTML5 มากน้อยเพียงใด ตามลิงค์ http://html5test.com คุณจะเห็นคะแนนซึ่งผลรวมนั้นเกิดจากจำนวนคะแนนที่รองรับจากมาตรฐาน ในขณะที่เขียนบนเครื่องของฉัน (Ubuntu10.10) Opera11.10 ได้คะแนน 258 คะแนนและ FireFox4 เพียง 240 คะแนน ฉันสงสัยว่าคุณมีอะไรบ้าง?

ในบทช่วยสอนนี้ เรา:

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

ในการทำงาน เราจะต้องสร้างไฟล์ HTML เพียงไฟล์เดียวเท่านั้น ดัชนี.htmlและไฟล์ CSS หนึ่งไฟล์ สไตล์.css- สคริปต์จะปรากฏบนหน้าเมื่อคุณทำงานเสร็จสิ้น ดังนั้นควรเตรียมเบราว์เซอร์ของคุณเพื่อเตือนคุณเกี่ยวกับเรื่องนี้ คุณจะต้องอนุญาตให้สคริปต์ทำงานบนเพจ

การเตรียมกรอบหน้า

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

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

มาเริ่มกันเลย สร้างโฟลเดอร์บนเดสก์ท็อปของคุณ ซึ่งจะมีไฟล์ HTML และ CSS ที่น่ารักของเรา สร้างไฟล์ข้อความธรรมดาindex.htmlในการเข้ารหัส utf-8 การเข้ารหัสอักขระนี้เป็นมาตรฐานสำหรับข้อความที่ไม่ใช่ภาษาอังกฤษมานานแล้ว

บรรทัดแรกคือตำแหน่งที่เราเขียนประเภทเอกสาร
ประการที่สองเราเปิดแท็กหลักของเอกสาร html ทั้งหมดและระบุพารามิเตอร์ lang โดยเขียนภาษาหลักของหน้า - รัสเซีย
เรามาดูชื่อเรื่องกันดีกว่า
สิ่งแรกที่เราจะระบุคือการเข้ารหัสอักขระของเอกสาร
จากนั้นเป็นชื่อหน้าต่างเบราว์เซอร์
จากนั้นเราจะเชื่อมต่อไฟล์สไตล์โดยไม่ลังเล
สุดท้ายนี้ มาเพิ่มคอนเทนเนอร์เนื้อหาเอกสารเปล่ากัน

ทุกสิ่งที่เราอธิบายไว้ที่นี่อยู่ในรายการหมายเลข 1:

รายการ 1 โครงสร้างเอกสาร HTML5 พื้นฐาน

นักลงทุนมองเห็นอนาคต

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

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

เราทำเครื่องหมายเนื้อหา เราวางบล็อกความหมายไว้บนเฟรม

ตอนนี้เรามาดูสิ่งที่เราจะมีในหน้านี้ให้ชัดเจนยิ่งขึ้น เราจะดำเนินการต่อจากสิ่งต่อไปนี้: เราจำเป็นต้องใช้ให้เกิดประโยชน์สูงสุดจากองค์ประกอบความหมายใหม่ของ HTML5

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

มาวางบล็อกในภาชนะกันเถอะ เราจะปฏิบัติตามลำดับขององค์ประกอบเหล่านี้:

– ส่วนหัว
– – เอชกรุ๊ป
– นำทาง
- บทความ
– – ส่วนหัว
- - "เนื้อหา"
- - ส่วน
– – – ส่วนหัว
- - - "เนื้อหา"
– ส่วนท้าย

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

ทุกสิ่งที่เราได้อธิบายไว้ที่นี่จะแสดงอยู่ในรายการหมายเลข 2 เราไม่ได้ระบุโค้ดแบบเต็มของหน้า แต่ระบุเฉพาะโค้ดที่ควรอยู่ระหว่างแท็กเท่านั้น... .

รายการ 2. การวางบล็อกความหมาย HTML5

LLC Horns and Hooves ข้อความเต็มของข่าว

• บ้าน
• เกี่ยวกับเรา
• รายชื่อผู้ติดต่อ
• คลังข่าว

26 เม.ย. นักลงทุนมองแนวโน้ม

ไม่มีอะไรขัดขวางผู้คนจากการใช้เขาของฮาเรโลป อย่างไรก็ตามเขาไม่มีกีบ

ประชาชนคิดอย่างไร

ในความเป็นจริงมีเพียง Ubuntu เท่านั้นที่มีชื่อแปลก ๆ เช่น "Harelope"

2011 LLC เขาและกีบ เรารักษาสิทธิของเราไว้ในที่ปลอดภัย

ตอนนี้สามารถดูเพจได้ในเบราว์เซอร์ อย่างไรก็ตาม มันยังคงดูไม่น่าดึงดูด แต่มันก็ไม่ไร้ประโยชน์เลยที่เราดูแลและรวมไฟล์ที่มีสไตล์ไว้แล้ว

มาทาสีส่วนหน้ากันดีกว่า

เพจของเรายังดูน่าเบื่อและไม่น่าดึงดูด มาแต่งหน้าของเธอกันเถอะ มาปรับใช้ในไฟล์สไตล์ของเรา สไตล์.cssสิ่งแรกที่เราจะทำคือตัดสินใจเลือกแบบอักษรสำหรับทั้งเอกสาร หากใครไม่ทราบ สมมติว่ามีการวิจัยว่าแบบอักษรใดที่รับรู้ได้ดีกว่าจากหน้าจอมอนิเตอร์ และปรากฎว่าเป็นแบบอักษรที่ไม่มีเซอริฟ แบบอักษรดังกล่าวเรียกว่า sans-serif - โดยไม่มี serif ซึ่งรวมถึงตัวอย่าง: Arial, Helvetica, Verdana มาดูกันดีกว่าว่าเราจะกำหนดกฎสำหรับการออกแบบองค์ประกอบทั้งหมดในหน้าของเราตามลำดับ เพื่อไม่ให้ล้ำหน้าเกินไป ลองใช้คุณสมบัติบางอย่างในตอนนี้ - เงาและขอบโค้งมนบนบล็อก

สิ่งที่เราจะเขียนโค้ดที่นี่ส่วนใหญ่มีอยู่ในมาตรฐาน CSS ยุคแรกๆ เราจะแสดงรายการคุณสมบัติใหม่

กล่องเงา
พารามิเตอร์นี้ระบุไว้สำหรับองค์ประกอบหน้าบล็อกและสร้างเงารอบๆ ตัวเลขสี่ตัวแรกเป็นพารามิเตอร์เชิงเส้นของเงา ตามลำดับ โดยระบุเป็นพิกเซล พิกเซลหรือหน่วยเชิงเส้นอื่นๆ ( em, จุด) หรือไม่มีพวกมัน ในกรณีที่มีขนาดเป็นศูนย์ ตัวเลขแรกหมายถึงการลากเงาไปทางขวาในแนวนอน หากคุณต้องการโยนเงาไปทางซ้าย ให้ใส่ตัวเลขติดลบ อันถัดไปเป็นแนวตั้งลง หากจะประกอบ ให้ใส่จำนวนลบ ต่อไปคือปริมาณเงาเบลอ จากนั้นเงาจะกระจาย หลังจากมิติเชิงเส้นแล้ว สีเงาจะถูกระบุ และถ้าคุณต้องการเงาภายใน ให้เลือกคำสำคัญ สิ่งที่ใส่เข้าไป- หากเงาเดียวไม่เพียงพอสำหรับคุณ ลองจินตนาการถึงจินตนาการเรื่องเงาของคุณโดยคั่นด้วยเครื่องหมายจุลภาค

ข้อความเงา
พารามิเตอร์นี้มีความคล้ายคลึงในการตั้งค่ากับพารามิเตอร์ก่อนหน้า ข้อแตกต่างเพียงอย่างเดียวคือการไม่มีเงากระจายและเงาภายใน และไม่มีใครหยุดคุณจากการเพ้อฝันเกี่ยวกับจำนวนเงาโดยคั่นด้วยเครื่องหมายจุลภาค

รัศมีเส้นขอบ (-moz-border-radius, -webkit-border-radius)
รัศมีการปัดเศษของบล็อก บล็อกสามารถมีสี่มุมได้ ดังนั้นพารามิเตอร์นี้สามารถมีจำนวนองค์ประกอบเท่ากันได้ เรียงตามเข็มนาฬิกาโดยเริ่มจากมุมซ้ายบน ชื่อของพารามิเตอร์ที่ระบุในวงเล็บจะใช้ในเบราว์เซอร์ของตระกูล Mozilla และบนเอ็นจิ้น Webkit (Chrome, Safari) ทำซ้ำในกฎการตั้งค่าที่ระบุไว้ รัศมีชายแดนในพารามิเตอร์สองสามตัวนี้ด้วย

การออกแบบที่เราคิดและเขียนโค้ดจะมีลักษณะตามที่แสดงในรายการหมายเลข 3 รหัสนี้คุณต้องใส่ในไฟล์ สไตล์.css.

รายการ 3 CSS สำหรับองค์ประกอบความหมาย HTML5 ใหม่

* ( ตระกูลฟอนต์: Lucida Sans, Arial, Helvetica, sans-serif; ) เนื้อความ ( กว้าง: 480px; ระยะขอบ: 0px auto; ) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; : 36px; ระยะขอบ: 0px; ) ส่วนหัว h2 ( ขนาดตัวอักษร: 18px; ระยะขอบ: 0px; สี: #888; รูปแบบตัวอักษร: ตัวเอียง; ) nav ul ( รูปแบบรายการ: ไม่มี; จอแสดงผล: บล็อก; สีพื้นหลัง: #666; ความสูง: 24px; : 12px; รัศมีเส้นขอบ: 12px; ) nav ul li ( ) nav ul li a ( สี: #EFD3D3; ข้อความ -การตกแต่ง: ไม่มี; ขนาดตัวอักษร: 13px; น้ำหนักตัวอักษร: ตัวหนา; ) nav ul li a:hover ( สี: #fff; ) บทความ > เวลาส่วนหัว ( ขนาดตัวอักษร: 14px; จอแสดงผล : block; width: 26px; padding: 2px; สีพื้นหลัง: #993333;

สี: #fff; น้ำหนักตัวอักษร: ตัวหนา; -moz-border-รัศมี: 6px;

-webkit-ขอบรัศมี: 6px; รัศมีเส้นขอบ: 6px; ลอย: ซ้าย;

ขอบล่าง: 10px; ) บทความ > ช่วงเวลาของส่วนหัว ( font-size: 10px; Font-weight: Normal; text-transform: uppercase; ) บทความ > header h1 ( font-size: 20px; float: left; margin-left: 14px; text-shadow : 2px 2px 1px #FFFFFF, 2px 2px 5px #888; ) บทความ > ส่วนหัว h1 a ( สี: #993333; การตกแต่งข้อความ: none; ) บทความ > ส่วนหัวของส่วน h1 ( ขนาดตัวอักษร: 16px; ) บทความ p ( ชัดเจน: ทั้งสอง; ) ส่วนท้าย p ( text-align: center; font-size: 12px; color: #888; margin-top: 24px; ) บทความ > ส่วน ( -moz-border-radius: 6px 0 0 0; -webkit-border -รัศมี:6px 0 0 0; รัศมีเส้นขอบ: 6px 0 0 0; กล่องเงา: 3px 3px 0 #FFAA88 การขยาย: #665588;

ถ้าเปิดหน้าดัชนีตอนนี้ก็จะดูไม่หมองนัก ดูรูปที่ 1 เทียบกับมุมมองก่อนหน้าก็จะเป็น SUPER ธรรมดาๆ

สวัสดีทุกคน! การแข่งขันกีฬาโอลิมปิกที่รอคอยมานานได้เริ่มขึ้นแล้ว ฉันขอให้ผู้เข้าร่วมทุกคนประสบความสำเร็จและโชคดี และแน่นอนว่าฉันเป็นกำลังใจให้รัสเซียมากเพราะว่า ฉันเป็นคนรัสเซียเอง และตอนนี้ถึงหัวข้อของโพสต์ ในบทความนี้เราจะพูดถึงมาร์กอัป HTML5 สมัยใหม่ข้อดีและความสำคัญโดยทั่วไป ฉันยังคงไม่สามารถเปลี่ยนไปใช้ html5 ได้ ฉันคิดว่ามันเพิ่งใหม่ทั้งหมด ไม่ใช่ทุกเบราว์เซอร์ที่รองรับ โดยเฉพาะ IE 7-8 แต่ทุกอย่างกลับกลายเป็นว่าไม่เป็นเช่นนั้น

ปัจจุบัน html5 ถูกนำมาใช้อย่างเต็มรูปแบบในการมาร์กอัปหน้าเว็บ และเบราว์เซอร์สมัยใหม่เกือบทั้งหมดรองรับมาร์กอัปนี้ แม้ว่าข้อกำหนดของ html5 เชื่อว่ายังอยู่ระหว่างการพัฒนาก็ตาม สำหรับ Internet Explorer เวอร์ชัน 7-8 นั้นจะมีไม้ค้ำพิเศษสำหรับพวกเขาซึ่งประกอบด้วยจาวาสคริปต์ขนาดเล็ก ในความคิดของฉัน เลย์เอาต์ใน html5 นั้นสะดวกมาก เพราะ... ก่อนอื่น html5 คือความหมาย องค์ประกอบโครงสร้างบางอย่างถูกนำมาใช้ที่นี่ ด้วยความช่วยเหลือที่ทำให้โครงสร้างเอกสารสามารถอ่านและเข้าใจได้ง่ายไม่เพียงแต่สำหรับมนุษย์เท่านั้น แต่ยังรวมถึงหุ่นยนต์ค้นหาด้วย

ลองใช้มาร์กอัป html5 ทีละขั้นตอนและเริ่มจากจุดเริ่มต้นของเอกสาร - Doctype Doctype ใน html5 เขียนได้ง่ายกว่ามาก เพื่อให้คุณจดจำได้ง่าย

การกำหนดการเข้ารหัสเขียนดังนี้

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

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

document.createElement("ส่วนหัว");

document.createElement("นำทาง");

document.createElement("ส่วน");
document.createElement("บทความ");
document.createElement("กัน");
document.createElement("ส่วนท้าย");
สคริปต์นี้ยังสามารถดาวน์โหลดได้จากเซิร์ฟเวอร์ของ Google
— จัดกลุ่มบล็อกเฉพาะเรื่องใด ๆ (สร้างส่วนต่างๆ) รองรับการซ้อนองค์ประกอบนี้ด้วย

ควรสังเกตว่าองค์ประกอบ html5 ใหม่มีลักษณะแบบอินไลน์ เช่น หากต้องการแสดงอย่างถูกต้อง จะต้องสร้างเป็นบล็อก

ส่วนหัว, การนำทาง, ส่วน, บทความ, ด้านข้าง, ส่วนท้าย (จอแสดงผล: บล็อก)

จากข้อมูลข้างต้น คุณสามารถร่างโครงร่างหน้าเล็กๆ ใน html5 ได้

มาร์กอัปโดยประมาณใน html5 ส่วนหัวของไซต์ เมนูไซต์ ส่วนท้ายของไซต์

อย่างที่คุณเห็น html5 มีข้อได้เปรียบเหนือ html4 อย่างชัดเจน ทั้งในแง่ของมาร์กอัปและ SEO เราจะพูดถึง SEO ด้านล่าง

นอกจากแท็กหลักแล้ว ยังมักใช้แท็กต่อไปนี้:
ตัวยึดตำแหน่ง (placeholder = "ข้อความ") - แสดงข้อความในช่องป้อนข้อมูล และเมื่อคุณพิมพ์ข้อความ ข้อความนั้นจะหายไปโดยอัตโนมัติ คุณลักษณะนี้ปรากฏเฉพาะใน html5 ขณะนี้ไม่จำเป็นต้องใช้สคริปต์เพิ่มเติมเพื่อแสดงข้อความในช่อง เช่น ในช่องค้นหา

- เน้นคำหรือวลีที่สำคัญ สังเกตสีพื้นหลังสีเหลือง

— แท็กเหล่านี้ใช้เพื่อแสดงที่อยู่ เช่น ที่อยู่ขององค์กร

— แสดงวิดีโอบนเว็บไซต์ด้วยโปรแกรมเล่นเบราว์เซอร์มาตรฐาน

— แสดงการบันทึกเสียงบนเว็บไซต์โดยใช้เครื่องเล่นเบราว์เซอร์มาตรฐาน

HTML5 และ SEO

หนึ่งในคุณสมบัติที่สำคัญของ HTML5 และในความคิดของฉันสิ่งที่สำคัญที่สุดคือการแบ่งบล็อกทั้งหมดโดยโรบ็อตการค้นหาตามความสำคัญ เช่น การแบ่งส่วนหน้าเว็บ มันเป็นไปไม่ได้ที่จะทำสิ่งนี้ใน html4 เพราะ... แท็ก div มาตรฐานไม่ได้เพิ่มความหมายใดๆ ให้กับองค์ประกอบที่อยู่ภายในแท็ก ด้วยการใช้ส่วนหัว บทความ นอกเหนือจาก องค์ประกอบส่วนท้ายใหม่ ทุกอย่างก็เปลี่ยนไป เหล่านั้น. พูดโดยประมาณคือ พวกเขา "บอก" โรบ็อตค้นหาว่าองค์ประกอบใดควรให้ความสำคัญและควรเพิกเฉย ตัวอย่างเช่น บอทการค้นหาจะเข้าใจได้ง่ายว่าข้อมูลระหว่างแท็กนั้นเป็นลิขสิทธิ์และข้อมูลที่คล้ายกันสำหรับผู้เยี่ยมชม

องค์ประกอบที่ส่งผลต่อการจัดทำดัชนีเครื่องมือค้นหา

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

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

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

แท็กนี้กำหนดโครงสร้างการนำทางบนเว็บไซต์

ลิงค์

นี่คือแอตทริบิวต์ลิงก์หลักใน HTML5:

คุณสามารถดูคุณสมบัติที่เหลือได้

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

นั่นคือทั้งหมดที่ บายทุกคน. พบกันในโพสต์ถัดไป

คุณได้เปลี่ยนไปใช้ HTML5 แล้วหรือยัง?

วันที่สร้าง: 2012-03-03 21:08:27 น
แก้ไขล่าสุด: 2012-03-03 21:10:19

วันนี้เราจะมาพูดถึงเอกสาร HTML เช่น เกี่ยวกับไฟล์ที่มีโค้ด HTML

การสร้างเอกสาร HTML

เอกสาร HTML ใดๆ ก็ตามเป็นไฟล์ข้อความธรรมดา ซึ่งหมายความว่าสามารถอ่านได้ในโปรแกรมแก้ไขข้อความ (เช่น Notepad)

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

ฉันใช้ Opera และนี่คือลักษณะไฟล์ว่างที่ฉันเรียกในเบราว์เซอร์ เอกสาร HTML:

ความคิดเห็น:
อย่างไรก็ตามควรเขียนชื่อไฟล์ (โดยเฉพาะหากเก็บไว้บนอินเทอร์เน็ต) เป็นภาษาละตินจะดีกว่า

หากต้องการเปลี่ยนเนื้อหาของไฟล์ คุณต้องเปิดไฟล์ผ่านโปรแกรมแก้ไขข้อความ คลิกขวาที่ไอคอนไฟล์ใน Explorer แล้วเลือกเปิดด้วย -> Notepad แน่นอนว่าควรใช้โปรแกรมแก้ไขข้อความที่มีประสิทธิภาพมากกว่า ตัวอย่างเช่น ในตัวอย่างทั้งหมด ฉันจะใช้ Notepad++ ฟรี ไฟล์ .html เปล่าๆ จะมีลักษณะเช่นนี้ในโปรแกรมแก้ไขข้อความ Notepad++:

เรามีเอกสาร HTML เปล่าที่เปิดอยู่ในเบราว์เซอร์แล้ว สิ่งที่เหลืออยู่คือการกรอก

เอกสาร HTML5 ที่มีรูปแบบดี

เอกสาร HTML5 ใด ๆ จะต้องเริ่มต้นด้วยบรรทัด:

บรรทัดนี้มีไว้สำหรับโปรแกรมพิเศษ (html-validator) ที่ตรวจสอบความสอดคล้องของเนื้อหาเอกสารด้วยมาตรฐาน HTML5 วางบรรทัดนี้ในไฟล์ html แต่ละไฟล์ของคุณ

ความคิดเห็น HTML

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

ความคิดเห็นอยู่ระหว่างการก่อสร้าง

ความคิดเห็นใช้เพื่ออธิบายโค้ด

html, หัว

หลังจาก DOCTYPE มาถึงแท็ก html รูท:

เนื้อหาหน้าทั้งหมดจะต้องอยู่ภายในแท็ก html แท็กนี้มีแอตทริบิวต์ lang (จาก lang uage - ภาษา) ซึ่งส่งผลต่อภาษาที่เครื่องมือค้นหาเห็นหน้าเว็บของคุณ

เอกสาร HTML แบ่งออกเป็นสองส่วนหลัก: ส่วนหัวและส่วนเนื้อหา:

แท็ก head ประกอบด้วยข้อมูลบริการ: การเข้ารหัส ชื่อหน้า คำอธิบาย คำสำคัญ และอื่นๆ อีกมากมาย ซึ่งเราจะทำความคุ้นเคยในบทเรียนต่อๆ ไป มาดูกันว่าหน้าข้อมูลการบริการจะเป็นอย่างไร:

เอกสาร HTML

แท็กชื่อจะเก็บชื่อเรื่องของหน้า นี่คือข้อความที่จะแสดงในผลลัพธ์ของเครื่องมือค้นหา

เมตาแท็กไม่จำเป็นต้องมีแท็กปิด ประกอบด้วยคุณลักษณะ 2 ประการ คุณลักษณะแรกสามารถเป็น: ชุดอักขระ, ชื่อ, http-equiv

ฉันคิดว่าทุกอย่างชัดเจนกับคำอธิบายและคำหลักสิ่งเดียวคือคำหลักสามารถป้อนได้โดยคั่นด้วยเครื่องหมายจุลภาคหรือคั่นด้วยช่องว่าง แต่เราจะอาศัยการเข้ารหัสโดยละเอียดมากขึ้น

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

จำเป็นต้องระบุการเข้ารหัสเพื่อให้เบราว์เซอร์สามารถระบุอักขระที่ผู้สร้างใช้อย่างถูกต้องเมื่อเขียนเพจ

ตอนนี้ Unicode ถูกใช้ทุกที่ และบนอินเทอร์เน็ต Unicode จะแสดงด้วย utf-8 (มีการแสดงอื่น ๆ ) Unicode อนุญาตให้คุณใช้อักขระจากภาษาต่างๆ

การเข้ารหัสก่อนหน้านี้อนุญาตให้ใช้เฉพาะอักขระละตินและสคริปต์อื่นหนึ่งตัวเท่านั้น ตัวอย่างเช่น หากต้องการใช้อักษรซีริลลิก คุณสามารถใช้รหัสต่อไปนี้:

แต่คุณจะไม่สามารถใช้สัญลักษณ์ของสคริปต์อื่น ๆ บนหน้าเว็บของคุณได้ ยกเว้นภาษาละตินและซีริลลิก ดังนั้นให้ใช้ utf-8 เสมอ ซึ่งจะทำให้เบราว์เซอร์สามารถแสดงข้อความเช่นนี้ได้อย่างง่ายดาย

สวัสดี! สวัสดี! नमस्कार।

การเข้ารหัสจะมีการพูดคุยกันในรายละเอียดเพิ่มเติม (ฉันจะบอกว่าอย่างละเอียดถี่ถ้วน) ในบทเรียนอื่น ๆ บนเว็บไซต์

เพื่อให้ Unicode แสดงได้อย่างถูกต้อง หน้าต่างๆ จะต้องได้รับการบันทึกในรูปแบบ utf-8

ร่างกาย

อยู่ในแท็กเนื้อหาที่แสดงเนื้อหาที่มองเห็นได้ทั้งหมดของหน้า

ดังนั้นเอกสาร HTML สุดท้ายจึงมีลักษณะดังนี้:

เอกสาร HTML

ในบทเรียนถัดไป เราจะเริ่มกรอกข้อมูลในหน้านี้

ดูโค้ด html ของหน้า

อย่างไรก็ตามคุณสามารถดูซอร์สโค้ดของหน้าใดก็ได้ ตัวอย่างเช่น ใน Opera คุณสามารถคลิกขวาที่พื้นที่ว่าง (ไม่ใช่บนรูปภาพ/ลิงก์) แล้วเลือก "Source Code" นี่คือลักษณะของซอร์สโค้ด HTML ของหน้าใดหน้าหนึ่งของเว็บไซต์ shatalov.su:

อัปเดตครั้งล่าสุด: 04/08/2016

องค์ประกอบคือองค์ประกอบที่ประกอบขึ้นเป็นเอกสาร html5 ในการสร้างเอกสาร เราต้องสร้างไฟล์ข้อความธรรมดาและระบุเป็นนามสกุลไฟล์ *.html

มาสร้างไฟล์ข้อความเรียกมันว่าดัชนีและเปลี่ยนนามสกุลเป็น .html

จากนั้นเปิดไฟล์นี้ในโปรแกรมแก้ไขข้อความใดๆ เช่น Notepad++ เพิ่มข้อความต่อไปนี้ลงในไฟล์:

ในการสร้างเอกสาร HTML5 ก่อนอื่นเราจำเป็นต้องมีสององค์ประกอบ: DOCTYPE และ html องค์ประกอบประเภทเอกสารหรือการประกาศประเภทเอกสารจะบอกเว็บเบราว์เซอร์ถึงประเภทของเอกสาร

บ่งชี้ว่าเอกสารนั้นเป็นเอกสาร html และมีการใช้ html5 ไม่ใช่ html4 หรือภาษามาร์กอัปเวอร์ชันอื่น

และองค์ประกอบ html ระหว่างแท็กเปิดและแท็กปิดประกอบด้วยเนื้อหาทั้งหมดของเอกสาร

ภายในองค์ประกอบ html เราสามารถวางองค์ประกอบอื่นๆ อีกสองรายการได้: head และ body องค์ประกอบ head ประกอบด้วยข้อมูลเมตาของหน้าเว็บ - ชื่อหน้าเว็บ ประเภทการเข้ารหัส ฯลฯ รวมถึงลิงก์ไปยังแหล่งข้อมูลภายนอก - สไตล์ สคริปต์ หากใช้ องค์ประกอบ body กำหนดเนื้อหาของหน้า html จริงๆ

ตอนนี้เรามาเปลี่ยนเนื้อหาของไฟล์ index.html ดังนี้:

เอกสาร HTML5 เนื้อหาเอกสาร HTML5

องค์ประกอบ head กำหนดสององค์ประกอบ:

องค์ประกอบชื่อแสดงถึงชื่อของหน้า

องค์ประกอบ meta ระบุข้อมูล meta ของหน้า หากต้องการแสดงอักขระอย่างถูกต้อง ควรระบุการเข้ารหัสจะดีกว่า ในกรณีนี้ ให้ใช้แอตทริบิวต์ charset="utf-8" เพื่อระบุการเข้ารหัส utf-8

ภายในองค์ประกอบเนื้อหา มีเพียงองค์ประกอบเดียวเท่านั้น - div - ที่สร้างบล็อก เนื้อหาของบล็อกนี้เป็นสตริงแบบธรรมดา

เนื่องจากเราเลือกการเข้ารหัสแบบ utf-8 เบราว์เซอร์จึงจะแสดงหน้าเว็บในการเข้ารหัสนี้ อย่างไรก็ตาม จำเป็นที่ข้อความในเอกสารจะต้องสอดคล้องกับการเข้ารหัส utf-8 ที่เลือกด้วย ตามกฎแล้ว โปรแกรมแก้ไขข้อความต่างๆ มีการตั้งค่าที่เหมาะสมสำหรับการตั้งค่าการเข้ารหัส ตัวอย่างเช่นใน Notepad++ คุณต้องไปที่เมนูการเข้ารหัสและเลือกแปลงเป็น UTF-8 โดยไม่มี BOM ในรายการที่เปิดขึ้น:

หลังจากนี้ คุณจะเห็น UTF-8 โดยไม่มี BOM ในบรรทัดสถานะ ซึ่งจะระบุว่ามีการติดตั้งการเข้ารหัสที่จำเป็นแล้ว ดัชนี.htmlบันทึกและเปิดไฟล์

ดังนั้นเราจึงสร้างเอกสาร HTML5 แรกขึ้นมา เนื่องจากเราระบุชื่อ “เอกสาร HTML5” ในองค์ประกอบชื่อ นี่คือชื่อที่แท็บเบราว์เซอร์จะมี

เนื่องจากการเข้ารหัสเป็น utf-8 เว็บเบราว์เซอร์จึงแสดงอักขระซีริลลิกได้อย่างถูกต้อง

และเราจะเห็นข้อความทั้งหมดที่กำหนดไว้ภายในองค์ประกอบเนื้อหาในช่องเบราว์เซอร์หลัก