แท็กทั้งหมดที่อยู่ระหว่างและเป็นข้อมูลทางเทคนิคอย่างเป็นทางการ ใช้แท็กเป็นตัวอย่าง - นี่คือชื่อ คุณถามมีไว้เพื่ออะไร?

เปิดเบราว์เซอร์ของคุณแล้วดูทั้งหมด บรรทัดคำสั่ง(กล่าวคือที่ชื่อหน้าต่าง)... คุณเห็นไหม?

องค์ประกอบ HEAD (ระบุด้วยแท็ก และ) จะถูกวางไว้ด้านหน้าเนื้อหาทันที เอกสาร HTMLซึ่งกำหนดโดยแท็ก และ ()

ระหว่างแท็กและอาจมีส่วนประกอบดังต่อไปนี้:

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

TITLE - ระบุชื่อของเอกสาร (หน้าอินเทอร์เน็ต) ซึ่งแสดงในหน้าต่างเบราว์เซอร์ สามารถระบุได้ แต่ไม่เกิน 1 ครั้ง

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

• HREF— กำหนดที่อยู่ฐาน (URL) ของหน้าอินเทอร์เน็ต
• เป้า— กำหนดเฟรม (ชื่อ) ที่จะใช้ในไฮเปอร์ลิงก์ตามค่าเริ่มต้น

ตัวอย่าง.

การสร้างเว็บไซต์

...


รายการ
...

STYLE - ใช้เพื่อแทรกสไตล์ชีตแบบเรียงซ้อนลงในเอกสาร CSS (สไตล์ชีทแบบเรียงซ้อน).

มีคุณสมบัติดังต่อไปนี้:

• พิมพ์— กำหนดประเภท MIME ของสไตล์ชีตที่จะรวมเข้าด้วยกัน เป็นแอตทริบิวต์ที่จำเป็นและมักจะมีค่า "ข้อความ/ซีเอส" .
• ชื่อ— กำหนดชื่อของสไตล์ชีตแบบเรียงซ้อน จำเป็นหากคุณวางแผนที่จะใช้กฎหลายข้อในเอกสารเดียว สไตล์- ในกรณีนี้ เบราว์เซอร์จะถูกบังคับให้ถามว่าสไตล์ที่เสนอใดที่จะใช้ได้กับเอกสาร ทั้งหมด เบราว์เซอร์ที่ทันสมัยละเว้นคุณลักษณะนี้ - คุณไม่สามารถใช้งานได้
  

ตัวอย่าง.

การใช้โต๊ะ สไตล์ CSS

LINK - กำหนดความสัมพันธ์ของเอกสารของคุณกับวัตถุอื่น ไม่มีแท็กปิด

คุณสมบัติ

• HREF— กำหนด URL ของเอกสาร (หน้าอินเทอร์เน็ต)
• เรล— กำหนดว่าเอกสารเกี่ยวข้องกับวัตถุที่กำหนดโดยพารามิเตอร์ HREF อย่างไร อาจมีความหมายดังต่อไปนี้:

สไตล์ชีต— ชี้ไปที่ไฟล์ที่มีสไตล์ชีต CSS เบราว์เซอร์จะดาวน์โหลดไฟล์ css จากที่อยู่ที่ระบุในพารามิเตอร์ HREF จากนั้นนำไปใช้กับเอกสาร

บ้าน- ชี้ไปที่ หน้าแรกเว็บไซต์.

toc เนื้อหา - ชี้ไปที่ไฟล์ที่มีสารบัญของเอกสาร

ดัชนี— ชี้ไปที่ไฟล์ที่มีข้อมูลสำหรับค้นหาดัชนีของเอกสาร

อภิธานศัพท์— ชี้ไปที่ไฟล์ที่มีรายการคำศัพท์ที่เกี่ยวข้องกับเอกสาร

ลิขสิทธิ์— ชี้ไปยังหน้าบนเว็บไซต์ที่ให้ข้อมูลเกี่ยวกับลิขสิทธิ์ ผู้สร้าง ฯลฯ

ขึ้นนะพ่อแม่— ชี้ไปที่หน้า “พาเรนต์” (หน้าที่อยู่เหนือทุกหน้าหนึ่งขั้น)

เด็ก— ชี้ไปที่หน้า “ย่อย” (หน้าที่อยู่ต่ำกว่าหน้าหนึ่งขั้นหนึ่ง)

ต่อไป— ชี้ไปหน้าถัดไป

ก่อนหน้า— ชี้ไปที่หน้าก่อนหน้า

สุดท้ายสิ้นสุด- ชี้ไปที่หน้าสุดท้าย

อันดับแรก— ชี้ไปที่หน้าแรก

ช่วย— ชี้ไปที่หน้าพร้อมคำใบ้

• พิมพ์— กำหนดประเภท MIME สำหรับวัตถุที่ระบุในพารามิเตอร์ HREF

ตัวอย่าง.

องค์ประกอบ DIV

เที่ยงวัน

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

มันมีคุณสมบัติดังต่อไปนี้:

ชื่อ— ระบุชื่อของข้อมูลเมตา มีชื่อที่กำหนดไว้ล่วงหน้าจำนวนมาก

HTTP-EQUIV— ระบุชื่อของข้อมูลเมตา เกือบจะเหมือนกันกับพารามิเตอร์ NAME แต่มีความแตกต่างอย่างหนึ่ง: ใช้เมื่อจำเป็นต้องถ่ายโอนเท่านั้น ข้อมูลเพิ่มเติมวี ส่วนหัว http.

เนื้อหา— กำหนดค่าให้กับข้อมูลเมตาที่กำหนดในพารามิเตอร์ NAME (หรือ HTTP-EQUIV)

และตอนนี้ - ตัวอย่าง.

...

เมตาแท็กใน html คือกลุ่มของแท็กพิเศษที่อยู่ระหว่างแท็ก และ จากชื่อจะชัดเจนทันทีว่าอยู่ที่จุดเริ่มต้นของโค้ด

แท็กหัวเรื่องมีจุดประสงค์สำคัญสองประการ:

• รายงานข้อมูลเกี่ยวกับหน้า html ไปยังเบราว์เซอร์
• ให้ข้อมูลแก่เครื่องมือค้นหาเกี่ยวกับหน้า html ที่ระบุ

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

แท็กเหล่านี้สามารถแบ่งออกเป็น 4 กลุ่ม

• แท็ก
• แท็ก
• แท็ก
• แท็ก

มาดูแต่ละกลุ่มแยกกัน

1. แท็ก

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

...ชื่อหน้า...

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

2. แท็ก

- นี่คือกลุ่มแท็กบริการที่มีข้อมูลเกี่ยวกับเพจ ลองพิจารณาแต่ละรายการแยกกัน

2.1. ประเภทเนื้อหา Meta

ไวยากรณ์สำหรับแอตทริบิวต์นี้เป็นดังนี้:

... ...

แท็กนี้ระบุการเข้ารหัสของเพจ ค่าเฉพาะถูกเขียนผ่านแอตทริบิวต์ชุดอักขระ ใน ในกรณีนี้การเข้ารหัสคือ windows-1251 บ่อยครั้งที่เว็บไซต์ใช้การเข้ารหัส UTF-8

หากการเข้ารหัสของไซต์และหน้า html เฉพาะ (หรือในฐานข้อมูล) ไม่ตรงกัน ไซต์อาจแสดงผ่านอักษรอียิปต์โบราณในเบราว์เซอร์บางตัว

2.2. คำอธิบายเมตา......

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

2.3. เมตาคีย์เวิร์ด... ...

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

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

2.4. เมต้ารีเฟรช......

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

2.5. เมตาวิวพอร์ต ... ... 3.3 ลิงค์ rel=Alternate ... ... 4. ‹script› tag

- การเชื่อมต่อไฟล์ Java ด้วยสคริปต์

... ...

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

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

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

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

เนื้อหาทั้งหมดของพื้นที่ส่วนหัวจะแสดงบนเว็บไซต์ โดยใช้ไฟล์บริการ wordpress header.php เนื้อหาที่คุณสามารถดูได้โดยไปที่แผงผู้ดูแลระบบ/รูปลักษณ์/ตัวแก้ไข:

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

โครงสร้างและเนื้อหาของศีรษะที่ถูกต้อง

ตามมาตรฐาน HTML สามารถวางแท็กได้เพียงไม่กี่แท็กในส่วนหัว แท็กเหล่านี้คือ: , , , และ

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

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

หนึ่งใน ปลั๊กอินที่ดีที่สุดเพื่อการเพิ่มประสิทธิภาพ บล็อกเวิร์ดเพรสภายใต้ เครื่องมือค้นหา- ช่วยให้คุณสามารถป้อนเมตาแท็กสำหรับแต่ละหน้า เปลี่ยนรูปแบบเอาต์พุตชื่อเรื่อง ฯลฯ

All in One SEO Pack เวอร์ชันขั้นสูงยิ่งขึ้น นอกจากนี้ยังสามารถเพิ่ม แท็ก nofollowไปยังลิงก์

หลังจากติดตั้งปลั๊กอินตัวใดตัวหนึ่งแล้ว คุณควรมีเนื้อหาหลักสำหรับ WordPress ประเภทต่อไปนี้:

การเพิ่มประสิทธิภาพบล็อกส่วนหัวของเว็บไซต์บน WordPress

เรามาลองนำโค้ดมาใส่แบบฟอร์มนี้กันดูไหม? แน่นอนใช่!

กำจัดโค้ดที่ไม่จำเป็นในส่วนหัว

สิ่งแรกที่คุณต้องทำคือรวมสไตล์ชีทของธีมทั้งหมดของคุณให้เป็นหนึ่งเดียว ไฟล์ที่ใช้ร่วมกันสไตล์.css. เมื่อต้องการทำเช่นนี้ ให้เปิดตามลำดับ ไฟล์เพิ่มเติมคัดลอกโค้ดจากไฟล์เหล่านั้นแล้ววางที่ส่วนท้ายของไฟล์ style.css หลังจากขั้นตอนเหล่านี้ คุณสามารถลบโค้ดสำหรับแสดงสไตล์เพิ่มเติมจาก header.php ได้ ด้วยเหตุนี้ ใน html คุณควรมีเพียงบรรทัดเดียวสำหรับเชื่อมต่อสไตล์ของธีมของคุณ:

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

ดังนั้นจึงเป็นการดีกว่าที่จะปิดการใช้งานการเชื่อมต่อในบริเวณส่วนหัวของสไตล์ปลั๊กอินผ่านไฟล์ฟังก์ชัน Functions.php

สำคัญมาก! ก่อนที่จะทำการเปลี่ยนแปลงใดๆ กับไฟล์ function.php อย่าลืมทำสำเนาไฟล์ไว้ด้วย

เราใช้อัลกอริทึมต่อไปนี้:

1) ก่อนที่คุณจะเริ่มปิดการใช้งานการเพิ่มปลั๊กอินที่ส่วนหัว ให้คัดลอกโค้ด html ที่ปลั๊กอินเพิ่ม

2). สร้างในบริเวณร่างกาย บล็อกเพิ่มเติมเช่น เรียกว่า header:

และนี่คือรหัสปลั๊กอิน

ในบล็อกนี้ เราจำเป็นต้องใส่โค้ดที่ปลั๊กอินเพิ่มเพื่อไม่ให้ทำงานไม่ถูกต้อง

3). คุณต้องตรวจสอบไฟล์หลักอย่างรอบคอบ ปลั๊กอิน phpที่คุณวางแผนจะถอดตะขอของเขาออก ใช้คีย์ผสม Ctrl+F ค้นหาโครงสร้างต่อไปนี้:

Add_action("wp_head", "plugin_function_here");

4) เพื่อกำจัดให้ถูกวิธี สายนี้คุณต้องเพิ่มลงในไฟล์ function.php บรรทัดถัดไป:

Remove_action("wp_head", "plugin_function_here");

5). เราบันทึกเทมเพลตและตรวจสอบสิ่งที่เราได้รับ
นอกจากนี้ยังมีกรณีเฉพาะที่การใช้ Remove_action สำหรับ wp_head() ใช้งานไม่ได้ ฉันขอยกตัวอย่าง WP-PageNavi (เวอร์ชัน 2.5.0) ให้คุณดู ไม่มีการเรียกใช้ฟังก์ชันที่ชัดเจนใน wp_head() แม้ว่าจะเป็นเช่นนี้ ปลั๊กอินจะโหลดไฟล์สไตล์ของตัวเอง ลองดูโค้ด wp-pagenavi.php ดั้งเดิมอย่างละเอียด มีฟังก์ชัน "Enqueue PageNavi Stylesheets" โดยเพิ่มสไตล์ผ่าน:

Add_action("wp_print_styles", "pagenavi_stylesheets");

เพิ่มบรรทัดต่อไปนี้ที่ส่วนท้ายสุดของไฟล์ฟังก์ชัน fuctions.php ก่อน ?> เพื่อกำจัดการโทรนี้:

Add_action("init", "remheadlink"); ฟังก์ชั่น remheadlink() ( Remove_action("wp_print_styles", "pagenavi_stylesheets"); )

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

คุณยังสามารถกำจัดองค์ประกอบที่ไม่จำเป็นอื่นๆ ที่คุณไม่ได้ใช้โดยใช้แฮ็กสำหรับ Functions.php ได้ เช่น:

Add_action("init", "remheadlink"); ฟังก์ชั่น remheadlink() ( Remove_action("wp_head","feed_links_extra", 3); // ลิงก์ไปยัง rss เพิ่มเติม Remove_action("wp_head", "feed_links", 2); // ลิงก์ไปยัง rss หลักและความคิดเห็น Remove_action("wp_head " ,"rsd_link"); // สำหรับบริการ Really Simple Discovery Remove_action("wp_head","wlwmanifest_link"); วินโดวส์ไลฟ์ผู้เขียน Remove_action("wp_head","wp_generator"); // ลบเวอร์ชัน wordpress)

Add_action("init", "remheadlink"); ฟังก์ชั่น remheadlink() ( Remove_action("wp_head","start_post_rel_link",10,0); Remove_action("wp_head","index_rel_link"); Remove_action("wp_head","rel_canonical"); Remove_action("wp_head","adjacent_posts_rel_link_wp_head ", 10, 0); Remove_action("wp_head","wp_shortlink_wp_head", 10, 0); )

บน เวอร์ชันล่าสุด WordPress มีสคริปต์แปลก ๆ ปรากฏในบล็อกส่วนหัว:

ข้อความประเภทสคริปต์ หน้าต่างจาวาสคริปต์- wpemojiSettings baseUrl http: s.w.org รูปภาพ core emoji 72x72 ต่อ png แหล่งที่มา concatemoji http: medicinahouse.ru wp-includes js wp-emoji-release.min.js? เวอร์ชั่น 4.2.4 !function a, b, c function d a var c b.createElement canvas d c.getContext c.getContext 2d return d d.fillText? d.textBaseline ด้านบน

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

Add_action("init", "remheadlink"); ฟังก์ชัน remheadlink() ( Remove_action("wp_head", "print_emoji_detection_script", 7); Remove_action("admin_print_scripts", "print_emoji_detection_script"); Remove_action("wp_print_styles", "print_emoji_styles"); Remove_action("admin_print_styles", "print_emoji_styles") ; )

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

Function _remove_script_version($src)( $parts = explode("?", $src); return $parts; ) //นี่คือการซ่อนเวอร์ชันของสคริปต์ add_filter("script_loader_src", "_remove_script_version", 15, 1); //นี่สำหรับสไตล์ add_filter("style_loader_src", "_remove_script_version", 15, 1);

นั่นคือทั้งหมดสำหรับฉัน ขอบคุณสำหรับความสนใจของคุณ

จะเห็นได้ว่าประกอบด้วยสามส่วนหลัก

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

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

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

ชื่อจะปรากฏในแถบชื่อเรื่องของเบราว์เซอร์

แท็กนี้เป็นแท็กที่จำเป็นเท่านั้นในส่วนนี้

นอกจากแท็กแล้ว ยังสามารถวางแท็กต่อไปนี้ในส่วนนี้ได้: , , , .

แท็ก

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

แท็ก

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

แท็ก

การใช้แท็กนี้ คุณสามารถบอกเบราว์เซอร์ได้ว่าควรมองหาสคริปต์ภายนอกที่ใด:

หรือแทรกสคริปต์โดยตรงในส่วนนี้:

document.write("สวัสดีชาวโลก!")

แท็ก

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

h1 (สี: แดง) p (สี: น้ำเงิน)

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

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

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

ตัวอย่าง HTML: ลองด้วยตัวเอง

เว็บไซต์ - บทช่วยสอนออนไลน์เกี่ยวกับ HTML, CSS, JavaScript
เนื้อหาหลัก...
องค์ประกอบ

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

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

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

องค์ประกอบเมตาและเครื่องมือค้นหา

เสิร์ชเอ็นจิ้นบางตัวจะดูองค์ประกอบเมตาเมื่อสร้างดัชนีหน้า
ตัวอย่างเช่น องค์ประกอบเมตาด้านล่างจะกำหนดคำอธิบายสำหรับเอกสาร HTML และคำหลัก ( ข้อมูลนี้เครื่องมือค้นหาสามารถใช้ได้เมื่อแสดงเอกสารในผลการค้นหา):

คำอธิบายเนื้อหาหน้าและคำหลัก:

คุณลักษณะที่มีสำหรับองค์ประกอบคือชุดอักขระ , เนื้อหา , http-equiv , ชื่อ รวมถึงแอตทริบิวต์ทั่วโลก

คุณสมบัติของแท็ก ค่าคุณสมบัติ/คำอธิบาย

ชุดอักขระ	ระบุการเข้ารหัสอักขระสำหรับเอกสาร HTML ปัจจุบัน:
เนื้อหา	กำหนดค่าที่ส่งคืนสำหรับคุณสมบัติ ประกอบด้วยข้อความที่กำหนดเองซึ่งระบุค่าที่เกี่ยวข้องกับแอตทริบิวต์ http-equiv หรือ name
http-equiv	ควบคุมการทำงานของเบราว์เซอร์บนหน้าเว็บที่กำหนด (เทียบเท่ากับส่วนหัว HTTP) เมื่อแสดงผลเพจ เบราว์เซอร์จะปฏิบัติตามคำแนะนำที่ระบุไว้ในแอตทริบิวต์: default-style - ระบุสไตล์ที่ต้องการใช้บนเพจ คุณลักษณะ เนื้อหาต้องมี ID ขององค์ประกอบที่อ้างอิงถึงสไตล์ชีต CSS หรือ ID ขององค์ประกอบที่มีสไตล์ชีต รีเฟรช - ระบุเวลาเป็นวินาทีก่อนที่เพจจะถูกโหลดซ้ำ หรือเวลาก่อนที่จะเปลี่ยนเส้นทางไปยังเพจอื่น หากอยู่ในแอตทริบิวต์ เนื้อหาหลังจากเวลามีเส้น "url=page_address". โหลดเพจซ้ำโดยอัตโนมัติหลังจากระยะเวลาที่กำหนดใน ในตัวอย่างนี้หลังจาก 30 วินาที: หากคุณต้องการโอนผู้เข้าชมไปยังหน้าอื่นทันที คุณสามารถระบุ URL ในพารามิเตอร์ url:
ชื่อ	จัดเตรียมให้ คำอธิบายเพิ่มเติมแท็ก หากละเว้นแอตทริบิวต์นี้ จะถือว่าเทียบเท่ากับแอตทริบิวต์ http-equiv ไม่ควรใช้หากองค์ประกอบมีชุดแอตทริบิวต์ http-equiv , charset หรือ itemprop อยู่แล้ว application-name - ระบุชื่อของเว็บแอปพลิเคชันที่ใช้ในเพจ author - ใช้เพื่อระบุชื่อผู้เขียนหน้าเว็บ: คำอธิบาย - เป็นคำอธิบายของเพจ ซึ่งเครื่องมือค้นหามักใช้เพื่อพิจารณาว่าเพจนั้นมีไว้สำหรับอะไร ตัวอย่างเช่น: เครื่องกำเนิดไฟฟ้า - ระบุหนึ่งในแพ็คเกจ ซอฟต์แวร์ใช้สำหรับสร้างเอกสาร เช่น คำหลัก - มีรายการคำหลักที่คั่นด้วยเครื่องหมายจุลภาคซึ่งสอดคล้องกับเนื้อหาของหน้า เช่น: pragma - ป้องกันไม่ให้เบราว์เซอร์แคชหน้าเว็บ เช่น: หมดอายุ - สามารถใช้เพื่อระบุว่าเพจควรหมดอายุเมื่อใด (และถูกลบออกจากแคช) ตัวอย่างเช่น: โรบ็อต - ระบุว่าควรเปิดใช้งานเครื่องมือค้นหาหรือไม่ หน้านี้ในผลการค้นหา ตัวอย่างเช่น ค่า nofollow ระบุว่าเครื่องมือค้นหาสามารถรวมหน้านี้ในผลการค้นหาได้ แต่ไม่ควรแสดงหน้าที่เชื่อมโยงจากหน้านั้น: วิวพอร์ต - ช่วยให้นักพัฒนาสามารถควบคุมขนาดของวิวพอร์ตดั้งเดิมบนอุปกรณ์ต่างๆ: width=ความกว้างของอุปกรณ์— บอกให้เบราว์เซอร์ตั้งค่าความกว้างของวิวพอร์ตให้เท่ากับความกว้างของหน้าจออุปกรณ์ ไม่ว่าจะเป็นอะไรก็ตาม มาตราส่วนเริ่มต้น=1.0— ชุด ระดับเริ่มต้นปรับขนาดเมื่อเบราว์เซอร์โหลดหน้าเว็บครั้งแรก

องค์ประกอบ

องค์ประกอบในเอกสาร HTML จะบอกเบราว์เซอร์ว่าไฟล์ CSS ภายนอกอยู่ที่ใดซึ่งใช้ในการจัดรูปแบบหน้า
องค์ประกอบต้องใช้แอตทริบิวต์สามประการต่อไปนี้:

• href - ระบุเส้นทางไปยังไฟล์ CSS ซึ่งมักจะอยู่ในโฟลเดอร์ชื่อ ซีเอสเอสหรือ สไตล์;
• type - กำหนดประเภทของเอกสารที่ลิงก์ชี้ไป ต้องระบุค่า ข้อความ/ซีเอส;
• rel - กำหนดความสัมพันธ์ระหว่างหน้า HTML และ ไฟล์ที่เชื่อมโยง- เมื่อลิงก์ไปยังไฟล์ CSS จะต้องระบุค่าสไตล์ชีต

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

คุณสามารถเปิดใช้งานได้ กฎซีเอสเอสลงในหน้า HTML โดยวางไว้ภายในองค์ประกอบซึ่งมักจะพบในองค์ประกอบ

องค์ประกอบ

องค์ประกอบช่วยให้คุณสามารถแนบสคริปต์ต่างๆ เข้ากับเอกสารได้ รหัสสคริปต์สามารถอยู่ในองค์ประกอบนี้หรือในไฟล์ภายนอกได้ หากข้อความสคริปต์อยู่ในไฟล์ภายนอก แสดงว่าเชื่อมต่อโดยใช้แอตทริบิวต์องค์ประกอบ
ตัวอย่างต่อไปนี้เชื่อมต่อไฟล์ script.js ภายนอกกับเอกสาร HTML และสร้างป๊อปอัปเมื่อผู้ใช้คลิกปุ่ม:

ตัวอย่าง HTML: ลองใช้องค์ประกอบสคริปต์ภายนอก Javascript ด้วยตัวคุณเอง

องค์ประกอบนี้ใช้เพื่อระบุ URL ฐานแบบเต็มของเอกสารซึ่งทั้งหมด ที่อยู่ที่เกี่ยวข้อง- ซึ่งจะช่วยหลีกเลี่ยงปัญหาหากเพจของคุณถูกย้ายไปยังตำแหน่งอื่น กล่าวอีกนัยหนึ่ง ลิงก์ทั้งหมดจะทำงานเหมือนเดิม
แอตทริบิวต์องค์ประกอบหลักคือ href ที่อยู่ของโฟลเดอร์ฐานจะถูกใช้เป็นค่า โดยสัมพันธ์กับที่อยู่ที่เกี่ยวข้องที่จะคำนวณ ตามค่าเริ่มต้นที่อยู่รูทคือ ชื่อโดเมนเว็บไซต์.
คุณลักษณะที่เป็นประโยชน์อีกประการหนึ่งของแท็กนี้คือ target คุณลักษณะเป้าหมายกำหนดว่าจะโหลดหน้าหน้าต่างใดตามลิงก์ที่พบในเอกสาร HTML ตามค่าเริ่มต้น ลิงก์จะเปิดในหน้าต่างเบราว์เซอร์เดียวกัน