I am trying to write a theme with multi menu at the header, should i use multi nav tag for each of them? Or wrap them all inside a nav tag?
Here is the example codepen.
header-a wrap everything inside nav tag.
header-b wrap menu and the element that between menu inside nav.
header-c wrap menu inside nav by each.
header-d add nav tag inside each bar to wrap everything inside bar.
Which method will be good in this case?
Thank you so much.
I think this is about semantics.
A nav element should wrap items that are part of the same navigation structure.
For example:
<nav id="topNav">
<ul>
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Contact</a>
</li>
</ul>
</nav>
<nav id="sideNav">
<ul>
<li>Products</li>
<ul>
<li><a>Oranges</a>
</li>
<li><a>Apples</a>
</li>
<li><a>Pears</a>
</li>
</ul>
</ul>
</nav>
<nav id="socialNav">
<ul>
<li><a>Facebook</a>
</li>
<li><a>Twitter</a>
</li>
<li><a>LinkedIn</a>
</li>
</ul>
</nav>
See this article
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
It does not seem there is an exact answer to this. Rather, the correct answer depends on how you want the semantics of the website to be read.
Try looking at the following sources:
http://html5doctor.com/nav-element/
https://stackoverflow.com/questions/14100279/html5-semantics-for-multiple-nav-
elements
http://w3bits.com/css-responsive-nav-menu/
There is information that states that all 4 of your options would be semantically correct. What you need to think about is how you want the navigation to be interpreted: 1) Should it be seen as one main menu? Then you would want header-a; 2) Should the menus be seen as groups of related menus? Then any of header-a, header-b or header-c would work.
I know I have not exactly given you an answer to your question but from what I can work out there is no straight forward answer.
Hope this helps in some way.
Related
so i have been using <nav> <ul> <li> <a> for making a navbar but turns out i can use <nav> <a> to make navbar and when i use its already inline so i don't use a lot of CSS. what do you guys think? note: I am self-taught so I don't know which one is right or someone to ask. Thank you, your answer will be appreciated
<nav>
Home
Login
Register
</nav>
<nav>
<ul>
<li>
Home
Login
Register
</li>
</ul>
</nav>
All of them: Use <nav> as a container, then a <ul> list with <li> children, and inside the li elements the actual links (<a>). That's good for accessibility AND SEO.
If you want to display your navigation in a vertically displayed list, I would use the li tag.
If you want horizontal, I'd do it without them.
Ultimately it doesn't matter though. You can override the appearance of just about anything with CSS anyway.
I want to create a navbar, and want to know what would be the difference between the following lines of code...
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
and...
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
Would there be any benefits to wrapping my entire navbar inside of the header, or should I just leave it as it is in the first line? I'm confused about this, I see people doing it, but I don't know why. If I want to style my navbar, can't I just style the nav tag? Why does it need to wrapped inside of another block element, when nav already is doing that?
This is related to semantic HTML and page ranking.
It would be completely fine to only use nav but using nav inside of an header is better as its compliant with semantic HTML.
Semantic HTML is necessary because they help a lot in screen readers and semantic HTML also helps in boosting page rank on google.
Here is a good article to read more about this - https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/
<header> is semantic HTML tag. Using semantic HTML tags improves accessibility of the web page, which is important for being use-friendly for screen-readers and indexing bots.
In the context of <header> tag inside <body> tag, it represents banner landmark of the web page. This is usually placed at the top of the page and in most cases you'll have logo and navigation inside.
I have this weird thing happening to me.
I have a menu and I try to create a mega menu.
I`m adding a ul in anchor tag to create the mega menu but it s pushed out of it. Anyone know why?
HTML:
<ul class="header_menu">
<li>
<a href="#">
Menu 1
<ul class="sub_menu">
<li>Submenu 1</li>
</ul>
</a>
</li>
and check this picture of html using view source.
image using view source
The ul sub_menu is pushed out of the anchor and its placed near it, not as a parent of anchor tag.
Any ideas?
EDIT:
As Quentin said, and according to w3c "Nested links are illegal".
A more detailed explanation here:
https://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Your HTML is invalid.
See The a element:
Content model: Transparent, but there must be no interactive content descendant.
You cannot have a link as a descendant of another link.
If you remove the nested link, then the problem goes away:
You probably want "Menu 1" to be a link and "Submenu" to be a different link. So end your first link before the nested list.
I am making a simple navigation bar at the top with CSS and HTML (some code I have)
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li>Settings</li>
<!--...-->
</ul>
and so on with a little CSS display:inline magic. That all works fine, except I want to move some of the links, like "Settings," to the other side of the navigation bar and replace it with a little icon. However, I cannot find how to do this. I've tried float:right and applying it to some of the list items using class and then referencing them through CSS. I've also tried text-align:right, but nothing seems to work. What am I doing wrong and how can I get some of the list items to be on the right side of the navigation bar?
Try this ->
Working Demo
I have put the settings and the register on a div and added float:right to push it to the right.
If you want a image replace the text with <img/> tag
I'm not sure what your html looked like exactly but this did the trick for me
<div>
<ul style="list-style: none; display:inline">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li style="display:inline">Contact</li>
<li style="display:inline; float:right;">Settings</li>
<li>One More to Make Sure It Works</li>
</ul>
</div
Working jsfiddle
I'd say just make another unordered list completely. It sounds like what you're trying to do shouldn't be done in the same ul.
There might be a way to do it how you're asking but it seems like making a seperate ul would be the easiest way.
My site's h1 is also the "home" link, so obviously I put it within the nav tag. The other links in the nav were originally put in an unordered list, like this:
<nav>
<h1>Site Name</h1>
<ul>
<li>Nav Item 1
<li>Nav Item 2
<li>Nav Item 3
</ul>
</nav>
Standard, right? As you can imagine, on subpages, the nav stays the same but the "active" class gets applied to the relavent Nav Item.
Here's the problem. At mobile screen widths, the nav compresses into a dropdown menu where the "active" link is the only link shown above the drop. That's fine on the homepage where the h1 is the active link, but it seems like my CSS is going to get super messy on subpages.
I've been noticing that some well respected frontend developers use list items free of ordered/unordered lists. These are folks who hold semantics in high esteem, so it made me wonder they might be thinking...
So I'm stuck. It seems wrong to put my h1 in the ul, but this also seems wrong:
<nav>
<li><h1>Site Name</h1></li>
<li>Nav Item 1</li>
<li>Nav Item 1</li>
</nav>
I know that I can get the LOOK of what I want to achieve almost any way I markup the HTML, but I'd like to do it as semantically as possible while avoiding a CSS/JS nightmare / or any hacks.
The standard is clear :
Permitted parent elements :
ul, ol, menu
Any other use should be avoided as a browser might very well not support it.
The fact the norm prohibits it means there is no accepted semantic, apart the one each developer invents for his own use.