ใน HTML5 การนำทางหลักควรอยู่ภายในหรือภายนอกองค์ประกอบ <header> หรือไม่


167

ใน HTML5 ฉันรู้ว่า<nav>สามารถใช้ได้ทั้งในและนอก<header>องค์ประกอบโฆษณาเสากระโดงของหน้า สำหรับเว็บไซต์ที่มีทั้งลูกศรรองและหลักดูเหมือนธรรมดาที่จะรวมนำทางรองเป็น<nav>องค์ประกอบภายในโฆษณาด้านบน<header>องค์ประกอบกับการนำหลักเป็น<nav>องค์ประกอบภายนอกโฆษณาด้านบน<header>องค์ประกอบ อย่างไรก็ตามหากเว็บไซต์ไม่มีการนำทางรองดูเหมือนว่าจะรวมการนำทางหลักไว้ใน<nav>องค์ประกอบภายใน<header>องค์ประกอบโฆษณาด้านบน

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

มีวิธีที่ดีกว่าหรือไม่เพื่อฉันจะไม่ย้ายการนำทางหลักจากภายในสู่ภายนอก<header>องค์ประกอบด้านบนที่อ้างอิงตามการรวมหรือแยกออกจากการนำทางรอง

ตัวอย่างการนำทางหลักและรอง

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.orgเป็นเว็บไซต์ตัวอย่างที่ตามรูปแบบด้านบน

ป้อนคำอธิบายรูปภาพที่นี่

ตัวอย่างการนำทางหลักเท่านั้น

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.ukเป็นเว็บไซต์ตัวอย่างที่ตามรูปแบบด้านบน

ป้อนคำอธิบายรูปภาพที่นี่

ข้อความที่ตัดตอนมาจากการแนะนำ HTML5 - เพิ่มเมื่อ 02-Feb-11, 7:38 AM

การแนะนำ HTML5โดย Bruce Lawson และ Remy Sharp ได้กล่าวถึงเรื่องนี้:

ส่วนหัวยังสามารถมีการนำทาง สิ่งนี้มีประโยชน์มากสำหรับการนำทางทั่วทั้งไซต์โดยเฉพาะอย่างยิ่งในไซต์ที่ขับเคลื่อนด้วยเทมเพลตซึ่ง<header>องค์ประกอบทั้งหมดอาจมาจากไฟล์เทมเพลต

แน่นอนว่ามันไม่จำเป็นว่าจะอยู่ใน<nav><header>

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

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


1
มันขึ้นอยู่ทั้งหมดในการออกแบบเว็บไซต์ของคุณ ยกตัวอย่างเช่น twitter โฮมเพจของพวกเขา (หน้าที่คุณเห็นก่อนเข้าสู่ระบบ) ไม่มีการนำทางด้านบน เนื้อหา "เมนูหลัก" ทั้งหมดอยู่ที่ด้านล่างของหน้า ตอนนี้ฉันไม่รู้เกี่ยวกับคุณ - แต่ฉันจะไม่เรียกมันว่าส่วนหัว ...
uSeRnAmEhAhAhAhAhAhA

คำตอบ:


84

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

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ที่HTML5 หมอ


5
ทำไมคุณถึงระบุว่า "ตราบใดที่องค์ประกอบภายในองค์ประกอบนั้นเป็นองค์ประกอบการนำทางภายในเท่านั้น (เช่นไม่เชื่อมโยงไปยังไซต์ภายนอกเช่นบัญชี Twitter หรือ Facebook) แล้วก็ใช้ได้"
Matthew Rankin

7
@Matthew เนื่องจากองค์ประกอบ nav ใช้สำหรับนำทางไปรอบ ๆ ไซต์นั้นเท่านั้น ฉันเป็นเพียงการชัดเจนคือทั้งหมด
Ian Devlin

@MatthewRankin สิ่งที่น่าตกใจก็คือการคลิกที่สมอใน<nav>องค์ประกอบเท่านั้นที่จะถูกส่งไปยังหน้าใหม่ที่มีการนำทางที่แตกต่างกันโดยสิ้นเชิง สำหรับแองเคอร์ไปยังไซต์ภายนอกที่ไม่มีความสัมพันธ์ที่แท้จริงกับคุณเองให้จดจำแอrel="nofollow"ททริบิวของลิงก์ด้วย
Anthony Rutledge

ฉันรู้ว่ามันเก่า ... แล้วลิงก์ไปยังโดเมนย่อยล่ะ? ตัวอย่างเช่นเว็บไซต์ที่มีไซต์ต่าง ๆ (ไซต์การนำเสนอไซต์บริการไซต์รับรองความถูกต้อง ฯลฯ ... ) พวกเขาทั้งหมดมีโครงสร้างที่แตกต่างกัน สิ่งที่ฉันกำลังทำคือการวางลิงก์นั้นไว้ใน<nav>องค์ประกอบ แต่ไม่ได้อยู่ใน<ul>องค์ประกอบจัดแต่งทรงผมในแบบที่ไม่ได้เป็นส่วนหนึ่งของรายการนำทางหลัก ยกเว้นรุ่นมือถือลิงค์จะต้องปรากฏในรายการเดียวกัน ... ทุกปุ่มมีคำอธิบายพอที่จะรู้ว่าคุณกำลังจะไปที่อื่น ...
Chazy Chaz

5

ไม่ชัดเจนว่าคุณกำลังขอความคิดเห็นเช่น "เป็นเรื่องปกติที่จะทำ xxx" หรือกฎที่แท้จริงดังนั้นฉันจะต้องพึ่งพาในทิศทางของกฎ

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

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

การมีตำแหน่งที่มาของ nav ให้อยู่ในเงื่อนไขนั้นเป็นเรื่องโง่ (ธงแดงอีกอัน) เพียงแค่เลือกวิธีและไปกับมัน


4

ฉันไม่ชอบการวางnavในส่วนหัว เหตุผลของฉันคือ:

ตรรกะ

ส่วนหัวมีข้อมูลเบื้องต้นเกี่ยวกับเอกสาร navเป็นเมนูที่เชื่อมโยงไปยังเอกสารอื่น ๆ ในใจของฉันซึ่งหมายความว่าเนื้อหาของnavเป็นของเว็บไซต์มากกว่าเอกสาร จะมีข้อยกเว้นถ้า NAV ถือลิงค์ไปข้างหน้า

การเข้าถึง

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


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

2
หากต้องการดำเนินการต่อในจุดของ @ julix ให้วาง nav ไว้ที่จุดสิ้นสุด แต่การแสดงผลที่จุดเริ่มต้นจะทำให้มันอึดอัดใจสำหรับผู้ใช้ที่มองเห็นแท็บผ่านเอกสาร
Jason T Featheringham

3

@IanDevlin ถูกต้อง กฎของ MDN พูดดังต่อไปนี้ :

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

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

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

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

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


2

หากต้องการขยายสิ่งที่ @JoshuaMaddox กล่าวไว้ในส่วนการเรียนรู้ MDN ภายใต้ส่วน "บทนำสู่ HTML" ส่วนย่อยของโครงสร้างเอกสารและเว็บไซต์จะกล่าวว่า (ตัวหนา / เน้นโดยฉัน):

หัวข้อ

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

แถบนำทาง

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


1
ฉันต้องการตกลงว่า<nav>ตื้นที่มีโครงสร้างในหน้าอาจเข้าถึงได้มากกว่า<nav>ที่ซ้อนลึก อย่างไรก็ตามการตัดสินนั้นถูกสร้างขึ้นบนพื้นฐานใด โปรแกรมอ่านหน้าจอกำลังไปที่บ้าน<nav>และ<a>แท็ก ปัจจัยสำคัญคือลำดับโครงสร้างของ HTML ถัดไปขึ้นไปการตอบสนอง การทำให้เด็กหลัก<nav>(หรือมี<nav>) เป็นลูกโดยตรงของการ<body>ทำให้ง่ายต่อการจัดการ? HTML นั้นถูกต้องไหม? <nav>เป็นsectioning เนื้อหาและทำให้เป็นธรรมชาติเหมาะที่จะอยู่ภายในราก sectioning<body>เช่น ดู W3C HTML5
Anthony Rutledge
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.