HTML5'te, ana gezinme <header> öğesinin içinde mi yoksa dışında mı olmalıdır?


167

HTML5'te, <nav>sayfanın masthead <header>öğesinin içinde veya dışında kullanılabileceğini biliyorum . Hem ikincil hem de ana gezinme özelliğine sahip web sitelerinde, ikincil gezinmeyi <nav>masthead <header>öğesinin içinde bir öğe olarak, ana gezinme <nav>masthead <header>öğesinin dışında bir öğe olarak eklemek yaygındır . Ancak, web sitesinde ikincil gezinme bulunmuyorsa, ana gezinmeyi <nav>masthead <header>öğesi içindeki bir öğeye dahil etmek yaygındır .

Bu örnekleri takip edersem, içerik yapım ikincil gezinmenin dahil edilmesine veya hariç tutulmasına dayalı olacaktır. Bu, içerik ve stil arasında gereksiz ve doğal olmayan bir bağlantı sağlar.

<header>İkincil navigasyonun dahil edilmesine veya hariç tutulmasına dayalı olarak ana navigasyonu masthead öğesinin içinden dışarıya taşımamamın daha iyi bir yolu var mı ?

Ana ve İkincil Navigasyon Örneği

<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 yukarıdaki kalıbı takip eden örnek bir sitedir.

resim açıklamasını buraya girin

Yalnızca Ana Gezinme Örneği

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

Keyzo.co.uk , yukarıdaki modeli takip eden örnek bir sitedir.

resim açıklamasını buraya girin

HTML5'i Tanıtmaktan Alıntılar - 02-Şubat-11, 07:38 tarihinde eklendi

Bruce Lawson ve Remy Sharp tarafından HTML5 ile tanışmak konu hakkında şunları söylüyor:

Başlık ayrıca gezinme içerebilir. Bu, site genelinde gezinme için, özellikle de <header>öğenin tamamının bir şablon dosyasından gelebileceği şablon odaklı sitelerde çok yararlı olabilir.

Tabii ki, gerekli değil <nav>olması <header>.

Büyük ölçüde site genelindeki gezinmenin site genelindeki başlığa ait olup olmadığına ve ayrıca stil kolaylığıyla ilgili pragmatik düşüncelere bağlı olup olmadığınıza bağlıdır.

Bu son cümleye dayanarak, bu alıntıların geldiği bölümün yazarı Bruce Lawson'ın "stil kolaylığı hakkında pragmatik düşüncelerin" içerik ve stil arasında bir bağlantı sağladığını itiraf ettiği anlaşılıyor.


1
Tamamen web sitenizin tasarımına bağlıdır . Örneğin Twitter'da, Ana Sayfalarında (oturum açmadan önce gördüğünüz sayfa) en iyi gezinme yoktur. Tüm "ana menü" öğeleri sayfanın altındadır. Şimdi, seni tanımıyorum - ama bunu bir başlık olarak adlandırmayacağım ...
uSeRnAmEhAhAhAhAhA

Yanıtlar:


84

Tamamen size kalmış. İçindeki öğeler yalnızca dahili gezinme öğeleri olduğu sürece (örneğin bir twitter veya facebook hesabı gibi harici sitelere bağlantı vermeyin), bunları başlığa koyabilir veya yerleştiremezsiniz.

Bir başlığa yerleştirilme eğilimindedirler çünkü gezinme sık sık gider, ancak taş olarak ayarlanmaz.

Bu konuda daha fazla bilgiyi HTML5 Doctor'da bulabilirsiniz .


5
Neden "içindeki öğeler yalnızca dahili gezinme öğeleri olduğu sürece (yani bir twitter veya facebook hesabı gibi harici sitelere bağlanmadığı sürece) sorun değil mi?"
Matthew Rankin

7
@Matthew çünkü nav öğesi yalnızca bu sitede gezinmek içindir. Ben sadece netti.
Ian Devlin

@MatthewRankin Bir <nav>öğenin içindeki bir bağlantıya tıklamak , sadece tamamen farklı gezinme ile yeni bir sayfaya gönderilmek ne kadar şok olurdu . Kendi sitenizle gerçek bir ilişkisi olmayan harici sitelere bağlantı yapmak için, rel="nofollow"bağlantıların özelliğini de unutmayın .
Anthony Rutledge

Bunun eski olduğunu biliyorum ... Alt alanlara bağlantılar ne olacak? Örneğin, farklı sitelere (sunum sitesi, hizmet sitesi, kimlik doğrulama sitesi vb.) Sahip bir web sitesinin hepsinin farklı bir yapısı vardır. Yaptığım şey, bu bağlantıyı <nav>öğenin içine yerleştirmek, öğenin içine yerleştirmemek <ul>, ana gezinme listesinin bir parçası olmayacak şekilde şekillendirmektir. İstisna mobil sürüm olmakla birlikte, bağlantı aynı listede görünmelidir ... Her neyse düğme, başka bir yere gittiğinizi bilmek için yeterince açıklayıcı ...
Chazy Chaz

5

Örneğin sizden fikir isteyip istemediğiniz biraz belirsiz. "xxx yapmak yaygındır" veya gerçek bir kural, bu yüzden kurallar doğrultusunda eğileceğim.

Alıntı yaptığınız örnekler , nav öğesi spesifikasyonundaki örneklere dayanmaktadır . Spesifikasyonun sürekli değiştiğini ve kuralların bazen kıvrıldığını unutmayın, bu yüzden birçok insanın yorumlamak yerine verilenleri yapmaya eğilimli olabileceğini unutmayın. Farklı davranışlara sahip iki ayrı örnek gösteriyorsunuz , bu yüzden okuyabileceğiniz çok şey var. Bu sitelerin her ikisinde de karşıt alt / deniz durumu var mı ve eğer öyleyse nasıl ele alıyorlar?

En önemlisi, ama, ya diyerek spec hiçbir şey mi bunu yapmanın yolu. HTML5 ile hedeflerden biri anlambilim, gereksinimler vb. Hakkında çok net olmaktı, bu yüzden ihmal kayda değer. Görebildiğim kadarıyla, örnekler birbirinden bağımsızdır ve kendi düzen gereklilikleri bağlamında eşit derecede geçerlidir.

Gezegenin kaynak pozisyonunun şartlı olması biraz saçmadır (başka bir kırmızı bayrak). Sadece bir yöntem seçin ve onunla devam edin.


4

Ben koyarak sevmiyorum nav içinde başlığındaki . Benim akıl yürütmem:

Mantık

Başlık belgenin hakkında tanıtıcı bilgiler içermektedir. Nav diğer belgelere bağlantılar bir menüdür. Aklımda bu, nav içeriğinin belge yerine siteye ait olduğu anlamına gelir . Bir istisna, NAV'ın bağlantıları ileri sürmesi olabilirdi.

Ulaşılabilirlik

Menüleri başlangıç ​​yerine kaynak kodun sonuna koymayı seviyorum. Bir bilgisayar ekranının üstüne göndermek veya metin konuşma tarayıcıları ve küçük ekranlar için sonunda bırakmak için CSS kullanıyorum. Bu, atlama bağlantılarına olan ihtiyacı ortadan kaldırır.


2
bağlantıları atla seçeneğinin menüyü atlamak için SEÇENEK verdiğini, sonunda koymak atlama (yani gezinme) seçeneği sunmadığını unutmayın - böylece düzgün gezinmek için sonuna kadar beklemek zorunda kalacaksınız , sağ?
Julix

2
@ Julix'in noktasında devam etmek, nav'ı sonuna yerleştirmek, ancak başlangıçta oluşturmak, gören kullanıcıların belge boyunca sekmesini zorlaştırır.
Jason T Featheringham

3

@IanDevlin doğru. MDN kuralları şunları söylüyor :

"HTML Başlık Öğesi" ", genellikle sitenin logosunu ve adını ve muhtemelen yatay bir menüyü içeren bir sayfa başlığı tanımlar ..."

"Muhtemelen" kelimesi anahtar vardır. Üstbilginin mutlaka bir site üstbilgisi olması gerekmediğini söylemeye devam ediyor. Örneğin, açılır bir modda veya belgenin üstbilginin bulunduğu diğer modüler kısımlarına bir "üstbilgi" ekleyebilirsiniz ve ekran okuyucusundaki bir kullanıcının bunu bilmesi yararlı olacaktır.

NAV'ın örtülü kullanımı açısından, gruplandırılmış site navigasyonu olan her yerde kullanabilirsiniz, ancak genellikle mini-navlar / önemli site bağlantıları için "altbilgi" bölümünden çıkarılır.

Gerçekten kişisel / takım seçimi geliyor. Sizin ve ekibinizin ne anlama geldiğine ve daha önemli olduğuna karar verin ve tutarlı olmaya çalışın. Benim için, nav logo ve ana sitenin "h1" ile satır içi ise, o zaman "başlık" koymak mantıklı ama farklı bir tasarım seçiminiz varsa o zaman duruma göre karar verin.

En önemlisi, dokümanlara göz atın ve bu kararı neden verdiğinizi anladığınızı veya dahil etmeyi seçtiğinizden emin olun.


2

@JoshuaMaddox'un söylediklerini genişletmek için, MDN Öğrenme Alanında, "HTML'ye Giriş" bölümünde, Belge ve web sitesi yapısı alt bölümünde (kalın / vurgu benim tarafımdan):

Başlık

Genellikle büyük bir başlık ve / veya logo ile üstte büyük bir şerit. Burası, bir web sitesi hakkında temel bilgilerin genellikle bir web sayfasından diğerine kaldığı yerdir.

Gezinti çubuğu

Sitenin ana bölümlerine bağlantılar; genellikle menü düğmeleri, bağlantılar veya sekmelerle gösterilir. Üstbilgi gibi, bu içerik genellikle bir web sayfasından diğerine tutarlı kalır - web sitenizde tutarsız bir gezinme olması, sadece şaşkın, sinirli kullanıcılara yol açacaktır. Birçok web tasarımcısı gezinme çubuğunu tek bir bileşen yerine başlığın bir parçası olarak görür, ancak bu bir gereklilik değildir; aslında bazıları ayrıca ekran ayrı okuyucular iki özelliği daha ayrı okurlarsa daha iyi okuyabildiğinden, iki ayrı alana sahip olmanın erişilebilirlik için daha iyi olduğunu iddia ederler .


1
<nav>Bir sayfada sığ yapılandırılmış olan a'nın, daha <nav>derine yuvalanmış olandan daha erişilebilir olabileceğini kabul etmek istiyorum . Ancak, bu karar hangi temelde veriliyor? Ekran okuyucular her halükarda ana sayfalara <nav>ve <a>etiketlere girecek . Önemli faktör HTML'nin yapısal sırasıdır. Sıradaki duyarlılık. Birincil <nav>(veya herhangi <nav>bir <body>kişiyi ) doğrudan bir çocuk yapmak manipüle etmeyi kolaylaştırır mı? Bu geçerli bir HTML mi? Bir <nav>edilmektedir içeriği kesit böylece, ve içinde yaşamak için doğal bir uyum kesit kökü gibi <body>. Bkz. W3C HTML5
Anthony Rutledge
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.