Trong HTML5, điều hướng chính nên ở bên trong hay bên ngoài phần tử <title>?


167

Trong HTML5, tôi biết rằng <nav>có thể được sử dụng cả bên trong hoặc bên ngoài <header>phần tử tiêu đề của trang . Đối với các trang web có cả điều hướng phụ và điều hướng chính, có vẻ như thường bao gồm điều hướng phụ là một thành <nav>phần bên trong <header>phần tử tiêu đề với điều hướng chính là <nav>phần tử bên ngoài <header>phần tử tiêu đề . Tuy nhiên, nếu trang web thiếu điều hướng phụ, có vẻ như bao gồm điều hướng chính trong một <nav>phần tử trong <header>phần tử tiêu đề .

Nếu tôi làm theo các ví dụ này, cấu trúc nội dung của tôi sẽ dựa trên việc bao gồm hoặc loại trừ điều hướng phụ. Điều này giới thiệu một sự kết hợp giữa nội dung và phong cách cảm thấy không cần thiết và không tự nhiên.

Có cách nào tốt hơn để tôi không di chuyển điều hướng chính từ trong ra ngoài <header>yếu tố tiêu đề dựa trên sự bao gồm hoặc loại trừ điều hướng phụ?

Ví dụ điều hướng chính và phụ

<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 là một trang web mẫu theo mô hình trên.

nhập mô tả hình ảnh ở đây

Ví dụ điều hướng chính

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

Keyzo.co.uk là một trang web mẫu theo mô hình trên.

nhập mô tả hình ảnh ở đây

Trích đoạn giới thiệu HTML5 - Được thêm vào ngày 02-ngày 11 tháng 2, 7:38 sáng

Giới thiệu HTML5 của Bruce Lawson và Remy Sharp có điều này để nói về chủ đề này:

Tiêu đề cũng có thể chứa điều hướng. Điều này có thể rất hữu ích cho điều hướng trên toàn trang web, đặc biệt là trên các trang web hướng mẫu trong đó toàn bộ <header>phần tử có thể đến từ một tệp mẫu.

Tất nhiên, không bắt buộc phải <nav>có trong <header>.

Nếu phụ thuộc phần lớn vào việc bạn có tin rằng điều hướng trên toàn trang thuộc về tiêu đề trên toàn trang và cũng là những cân nhắc thực tế về việc dễ dàng tạo kiểu.

Dựa trên câu cuối cùng đó, có vẻ như Bruce Lawson, tác giả của chương, những đoạn trích đó là từ hồi thừa nhận rằng "những cân nhắc thực dụng về sự dễ dàng trong phong cách" mang lại sự kết hợp giữa nội dung và phong cách.


1
Nó phụ thuộc hoàn toàn vào thiết kế trang web của bạn. Lấy twitter làm ví dụ, Trang chủ của họ (trang bạn nhìn thấy trước khi đăng nhập), không có điều hướng hàng đầu. Tất cả các công cụ "menu chính" của họ ở dưới cùng của trang. Bây giờ, tôi không biết về bạn - nhưng tôi sẽ không gọi đó là tiêu đề ...
uSeRnAmEhAhAhAhA 18/03/14

Câu trả lời:


84

Điều đó hoàn toàn phụ thuộc vào bạn. Bạn có thể đặt chúng trong tiêu đề hoặc không, miễn là các yếu tố bên trong chúng chỉ là các yếu tố điều hướng bên trong (nghĩa là không liên kết đến các trang web bên ngoài như tài khoản twitter hoặc facebook) thì không sao.

Chúng có xu hướng được đặt trong một tiêu đề đơn giản vì đó là nơi thường xuyên điều hướng, nhưng nó không được đặt trong đá.

Bạn có thể đọc thêm về nó tại HTML5 Doctor .


5
Tại sao bạn nói rằng "miễn là các yếu tố bên trong chúng chỉ là các yếu tố điều hướng bên trong (nghĩa là không liên kết đến các trang web bên ngoài như tài khoản twitter hoặc facebook) thì không sao."
Matthew Rankin

7
@Matthew vì phần tử điều hướng chỉ dành cho điều hướng xung quanh trang web đó. Tôi chỉ rõ ràng là tất cả.
Ian Devlin

@MatthewRankin Thật là một cú sốc khi nhấp vào một mỏ neo bên trong một <nav>phần tử, chỉ được gửi đến một trang mới với điều hướng hoàn toàn khác. Đối với các neo vào các trang web bên ngoài không có mối quan hệ thực sự với chính bạn, hãy nhớ rel="nofollow"thuộc tính cho các liên kết.
Anthony Rutledge

Tôi biết điều này đã cũ ... Còn liên kết đến tên miền phụ thì sao? Ví dụ: một trang web có các trang web khác nhau (trang trình bày, trang dịch vụ, trang xác thực, v.v ...), tất cả chúng đều có cấu trúc khác nhau. Những gì tôi đang làm là đặt liên kết đó bên trong <nav>phần tử chứ không phải bên trong <ul>phần tử, tạo kiểu cho nó theo cách không thuộc danh sách điều hướng chính. Ngoại trừ phiên bản dành cho thiết bị di động, liên kết phải xuất hiện trong cùng một danh sách ... Dù sao thì nút cũng đủ để mô tả để biết bạn sẽ đi đâu đó ...
Chazy Chaz

5

Không rõ liệu bạn có hỏi ý kiến ​​hay không, vd. "Nó là phổ biến để làm xxx" hoặc một quy tắc thực tế, vì vậy tôi sẽ nghiêng về hướng của các quy tắc.

Các ví dụ bạn trích dẫn dường như dựa trên các ví dụ trong thông số kỹ thuật cho phần tử điều hướng . Hãy nhớ rằng thông số kỹ thuật tiếp tục được điều chỉnh và các quy tắc đôi khi bị sai lệch, vì vậy tôi mạo hiểm nhiều người có thể có xu hướng chỉ làm những gì được đưa ra thay vì diễn giải. Bạn đang hiển thị hai ví dụ riêng biệt với hành vi khác nhau, vì vậy bạn chỉ có thể đọc được rất nhiều. Do một trong những trang web đó cũng có tình huống phụ / điều hướng đối lập, và nếu vậy làm thế nào để họ xử lý nó?

Quan trọng nhất, tuy nhiên, không có gì trong spec nói hoặc là các cách để làm điều đó. Một trong những mục tiêu với HTML5 là rất rõ ràng [điều này để so sánh] về ngữ nghĩa, yêu cầu, v.v. vì vậy thiếu sót là đáng chú ý. Theo như tôi có thể thấy, các ví dụ độc lập với nhau và có giá trị như nhau trong bối cảnh yêu cầu bố cục của riêng họ, v.v.

Có vị trí nguồn của hải quân là có điều kiện là loại ngớ ngẩn (một lá cờ đỏ khác). Chỉ cần chọn một phương pháp và đi với nó.


4

Tôi không thích đặt điều hướng trong tiêu đề . Lý do của tôi là:

Hợp lý

Các tiêu đề chứa thông tin giới thiệu về tài liệu. Điều hướng là một menu liên kết đến các tài liệu khác. Đối với tôi điều này có nghĩa là nội dung của điều hướng thuộc về trang web chứ không phải là tài liệu. Một ngoại lệ sẽ là nếu NAV giữ các liên kết chuyển tiếp.

Khả năng tiếp cận

Tôi thích đặt các menu ở cuối mã nguồn hơn là bắt đầu. Tôi sử dụng CSS để gửi nó lên phía trên màn hình máy tính hoặc để nó ở cuối cho các trình duyệt văn bản và màn hình nhỏ. Điều này tránh sự cần thiết cho các liên kết bỏ qua.


2
Hãy nhớ rằng bỏ qua các liên kết cung cấp cho TÙY CHỌN để bỏ qua menu, trong khi đặt ở cuối không đưa ra tùy chọn không bỏ qua (nghĩa là điều hướng) - do đó, bạn buộc phải đợi cho đến khi kết thúc để có thể điều hướng đúng , đúng?
Julix

2
Để tiếp tục quan điểm của @ julix, việc đặt điều hướng ở cuối, nhưng hiển thị nó ở đầu sẽ gây khó xử cho người dùng nhìn thấy khi xem qua tài liệu.
Jason T Featheringham

3

@IanDevlin đúng. Các quy tắc của MDN nói như sau :

"Phần tử tiêu đề HTML" "xác định tiêu đề trang - thường chứa logo và tên của trang web và có thể là menu ngang ..."

Từ "có thể" có chìa khóa. Nó tiếp tục nói rằng tiêu đề không nhất thiết phải là một tiêu đề trang web. Chẳng hạn, bạn có thể bao gồm "tiêu đề" trên phương thức bật lên hoặc trên các phần mô-đun khác của tài liệu có tiêu đề và sẽ hữu ích cho người dùng trên trình đọc màn hình để biết về nó.

Nó liên quan đến việc sử dụng NAV một cách ngầm định mà bạn có thể sử dụng nó ở bất cứ nơi nào có điều hướng trang web được nhóm, mặc dù nó thường được bỏ qua từ phần "chân trang" cho các liên kết trang web nhỏ / quan trọng.

Thực sự nó đi xuống để lựa chọn cá nhân / nhóm. Quyết định những gì bạn và nhóm của bạn cảm thấy có ngữ nghĩa hơn và quan trọng hơn và cố gắng nhất quán. Đối với tôi, nếu điều hướng là nội tuyến với logo và "h1" của trang web chính thì việc đặt nó vào "tiêu đề" sẽ hợp lý hơn, nhưng nếu bạn có lựa chọn thiết kế khác thì hãy quyết định tùy từng trường hợp.

Quan trọng nhất là kiểm tra các tài liệu và chắc chắn nếu bạn chọn bỏ qua hoặc bao gồm bạn hiểu lý do tại sao bạn đưa ra quyết định cụ thể đó.


2

Để mở rộng những gì @JoshuaMaddox đã nói, trong Khu vực học tập MDN, trong phần "Giới thiệu về HTML", phần phụ cấu trúc Tài liệu và trang web nói (in đậm / nhấn mạnh là của tôi):

Tiêu đề

Thường là một dải lớn trên đầu với một tiêu đề lớn và / hoặc logo. Đây là nơi thông tin phổ biến chính về một trang web thường ở từ trang này sang trang khác.

Thanh điều hướng

Liên kết đến các phần chính của trang web; thường được đại diện bởi các nút menu, liên kết hoặc tab. Giống như tiêu đề, nội dung này thường duy trì nhất quán từ trang web này sang trang web khác - việc điều hướng không nhất quán trên trang web của bạn sẽ chỉ dẫn đến người dùng bối rối, thất vọng. Nhiều nhà thiết kế web coi thanh điều hướng là một phần của tiêu đề chứ không phải là một thành phần riêng lẻ, nhưng đó không phải là một yêu cầu; trong thực tế, một số người cũng cho rằng việc có hai tính năng riêng biệt sẽ tốt hơn cho khả năng truy cập, vì trình đọc màn hình có thể đọc hai tính năng tốt hơn nếu chúng tách biệt .


1
Tôi muốn đồng ý rằng một <nav>cái được cấu trúc nông trong một trang có thể dễ truy cập hơn một <nav>cái được lồng sâu hơn. Tuy nhiên, dựa trên cơ sở nào mà phán quyết được đưa ra? Dù sao thì trình đọc màn hình sẽ trở về nhà <nav><a>gắn thẻ. Yếu tố quan trọng là thứ tự cấu trúc của HTML. Tiếp theo, đáp ứng. Liệu làm cho chính <nav>(hoặc bất kỳ <nav>) là một đứa trẻ trực tiếp <body>làm cho nó dễ thao tác hơn? Đó có phải là HTML hợp lệ không? A <nav>phần nội dung , và do đó là một sự phù hợp tự nhiên để sống trong một phần gốc , như <body>. Xem HTML5 của W3C
Anthony Rutledge
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.