Di HTML5, saya tahu itu <nav>bisa digunakan di dalam atau di luar <header>elemen masthead halaman . Untuk situs web yang memiliki navigasi sekunder dan utama, tampaknya umum untuk memasukkan navigasi sekunder sebagai <nav>elemen di dalam <header>elemen masthead dengan navigasi utama sebagai <nav>elemen di luar <header>elemen masthead . Namun, jika situs web tidak memiliki navigasi sekunder, tampaknya umum untuk memasukkan navigasi utama dalam <nav>elemen dalam <header>elemen masthead .

Jika saya mengikuti contoh-contoh ini, struktur konten saya akan didasarkan pada penyertaan atau pengecualian navigasi sekunder. Ini memperkenalkan hubungan antara konten dan gaya yang terasa tidak perlu dan tidak wajar.

Apakah ada cara yang lebih baik sehingga saya tidak memindahkan navigasi utama dari dalam ke luar <header>elemen masthead berdasarkan inklusi atau pengecualian navigasi sekunder?

Contoh Navigasi Utama dan Sekunder

<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 adalah situs contoh yang mengikuti pola di atas.

Contoh Navigasi Utama Saja

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

Keyzo.co.uk adalah contoh situs yang mengikuti pola di atas.

Kutipan dari Memperkenalkan HTML5 - Ditambahkan pada 02-Feb-11, 7:38 AM

Memperkenalkan HTML5 oleh Bruce Lawson dan Remy Sharp mengatakan hal ini tentang subjek:

Header juga dapat berisi navigasi. Ini bisa sangat berguna untuk navigasi di seluruh situs, terutama di situs yang digerakkan templat di mana seluruh <header>elemen dapat berasal dari file templat.

Tentu saja, itu tidak diharuskan <nav>berada di <header>.

Jika sebagian besar tergantung pada apakah Anda yakin navigasi seluruh situs termasuk dalam header seluruh situs dan juga pertimbangan pragmatis tentang kemudahan penataan gaya.

Berdasarkan kalimat terakhir itu, tampak bahwa Bruce Lawson — penulis bab dari kutipan itu — mengakui bahwa "pertimbangan pragmatis tentang kemudahan penataan" menghasilkan penggabungan antara konten dan gaya.

Ini sepenuhnya terserah Anda. Anda dapat meletakkannya di tajuk atau tidak, selama elemen di dalamnya hanya elemen navigasi internal (yaitu tidak menautkan ke situs eksternal seperti akun twitter atau facebook) maka itu baik-baik saja.

Mereka cenderung ditempatkan di header hanya karena di situlah navigasi sering berjalan, tetapi tidak diatur dalam batu.

Anda dapat membacanya lebih lanjut di HTML5 Doctor .

Agak tidak jelas apakah Anda meminta pendapat, mis. "Itu biasa untuk melakukan xxx" atau aturan yang sebenarnya, jadi saya akan condong ke arah aturan.

Contoh yang Anda kutip tampaknya didasarkan pada contoh dalam spesifikasi untuk elemen nav . Ingatlah bahwa spek terus diubah dan aturan terkadang berbelit-belit, jadi saya berani banyak orang cenderung melakukan apa yang diberikan daripada menafsirkannya. Anda menunjukkan dua contoh terpisah dengan perilaku berbeda, jadi hanya ada begitu banyak yang dapat Anda baca. Apakah salah satu dari situs tersebut juga memiliki situasi sub / nav yang berlawanan, dan jika demikian, bagaimana mereka menanganinya?

Yang paling penting, meskipun, tidak ada di spec mengatakan baik adalah yang cara untuk melakukannya. Salah satu tujuan dengan HTML5 adalah menjadi sangat jelas [ini untuk perbandingan] tentang semantik, persyaratan, dll. Sehingga penghilangannya patut dicatat. Sejauh yang saya bisa lihat, contoh-contohnya tidak tergantung satu sama lain dan sama-sama valid dalam konteks persyaratan tata letak mereka sendiri, dll.

Memiliki posisi sumber nav menjadi kondisional adalah konyol (bendera merah lain). Cukup pilih metode dan ikuti saja.

Saya tidak suka meletakkan nav di header . Alasan saya adalah:

Logika

The Header berisi informasi pengantar tentang dokumen. The nav adalah menu yang link ke dokumen lain. Menurut saya, ini berarti bahwa konten nav milik situs daripada dokumen. Pengecualian akan terjadi jika NAV menahan tautan maju.

Aksesibilitas

Saya suka meletakkan menu di akhir kode sumber daripada di awal. Saya menggunakan CSS untuk mengirimnya ke bagian atas layar komputer atau membiarkannya di akhir untuk browser text-speech dan layar kecil. Ini menghindari perlunya melewatkan tautan.

@IanDevlin benar. Aturan MDN mengatakan sebagai berikut :

"Elemen HTML Header" "mendefinisikan header halaman - biasanya berisi logo dan nama situs dan mungkin menu horizontal ..."

Kata "mungkin" ada kuncinya. Selanjutnya dikatakan bahwa tajuk tidak perlu menjadi tajuk situs. Misalnya, Anda dapat menyertakan "header" pada modal pop-up atau pada bagian modular lain dari dokumen di mana ada header dan akan sangat membantu bagi pengguna pada pembaca layar untuk mengetahuinya.

Itu istilah penggunaan implisit NAV Anda dapat menggunakannya di mana saja ada navigasi situs dikelompokkan, meskipun biasanya dihilangkan dari bagian "footer" untuk mini-navs / tautan situs penting.

Benar-benar turun ke pilihan pribadi / tim. Putuskan apa yang Anda dan tim Anda rasakan lebih semantik dan lebih penting dan usahakan untuk konsisten. Bagi saya, jika nav sejalan dengan logo dan "h1" situs utama maka masuk akal untuk meletakkannya di "header" tetapi jika Anda memiliki pilihan desain yang berbeda maka tentukan kasus per kasus.

Yang paling penting, periksa dokumen dan pastikan jika Anda memilih untuk menghilangkan atau menyertakan Anda memahami mengapa Anda membuat keputusan tertentu.

Untuk memperluas apa yang dikatakan @JoshuaMaddox, di Area Pembelajaran MDN, di bawah bagian "Pengantar HTML", sub-bagian Dokumen dan struktur situs web mengatakan (cetak tebal / penekanan menurut saya):

Header

Biasanya strip besar di bagian atas dengan judul dan / atau logo besar. Di sinilah informasi umum utama tentang suatu situs web biasanya tetap dari satu halaman web ke halaman web lainnya.

Bilah navigasi

Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah .