this is my first question here on stackoverflow. Forgive me in advance if I am not formatting or asking this accordingly.
So, I've seen people building navbars in many ways, specially with flexbox, therefore, I know this topic was mentioned before many times, but, could someone clarify me if:
Does the brand/logo on my site have to be inside an <h1> tag of any other heading tags for SEO purposes?
Is it right to leave the brand/logo outside of the <nav> tag?
For example (code below), I would set the <div> with the class= container as the flex container, but then everything in the rest of the site with that same class would get the display: flex;too. Would you recommend creating a separate container class to contain the just navbar? I am applying display: flex; on the container and <ul> as well so all gets on the same line.
Thank you so much for taking the time and reading this and once again, my apologies if this is an old topic. I am trying to organize my code better and understand the best practices.
<body>
<header>
<div class="container">
<a href="" class="brand">
Brand
</a>
<nav>
<ul>
<li>services</li>
<li>about</li>
<li>location</li>
</ul>
</nav>
</div>
</header>
</body>
As far as the SEO, there's multiple ways you can get a better rating. H1 is probably the best, but you can use any of the header tags, and emphasis things like bold, italics, and such.
There's also meta tags that go in the area, such as
<meta name="keywords" content="your keywords here">
Using the keywords throughout your page too is a big help too. One of the ways people get big hits on their pages is by adding the name to the link. Like for articles you see online they'll be /name_of_the_article.html this helps a good deal in the search engines.
For the brand/logo, it is a good idea to leave it outside of the nav tag. You may want to put it in its own div or wrap them both up in a div tree so you can position it easier. But if you want the brand/logo to be with the nav bar then you can have it there also.
For the container part, without seeing the css, I would say if they are going to have the same styling, then by all means keep them together. But unless it's all really simple stuff, it's better to give them their own classes as styling for 1 thing, might not fit with another.
If you could make a jsfiddle or codepen it would be much easier to get a picture of what you want specifically regarding the class css.
Related
I just started using jsFiddle to make this (https://jsfiddle.net/travism2006/tp2y5pvu/1/)
body .main .leftAd {
border: 4px red dashed;
width: 160px;
}
Skip Links
<div class="header">
<ul>
<li><a>Coding</a>
</li>
<li><a>Web Tech</a>
</li>
<li><a>Data Fun</a>
</li>
<li><a>Robotics</a>
</li>
</ul>
</div>
<div class="leftAd">sss</div>
Can someone explain why the 'sss' disappears + the border not showing?
I played around with the fiddle and found that my ad-blocker was adding 'display: none;' to the elements with the "Ad" substring in them.
Renaming the elements from 'leftAd' and 'rightAd' to 'left' and 'right' made them display as you'd expect.
HTML:
Skip Links
<header>
<ul>
...
</ul>
<\header>
<div class="left-ad"><p>sss</p></div>
OR
<aside class="left-ad">sss</aside>
I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.
when I opened your fiddle, the HTML lacked a lot of content. Specifically, the sss that appears here but not in your js fiddle. When a div has no content in your case it collapses in on itself and that's why you see a flat red line because the top and bottom borders are lying on top of each other. In order to make additional space for the added sss container just add custom padding values etc.
<div class="main"></div>
In HTML5, I know that <nav> can be used either inside or outside the page's masthead <header> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav> element inside the masthead <header> element with the main navigation as a <nav> element outside the masthead <header> element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav> element within the masthead <header> element.
If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.
Is there a better way so that I'm not moving the main navigation from inside to outside the masthead <header> element based on the inclusion or exclusion of secondary navigation?
Main and Secondary Navigation Example
<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 is an example site that follows the above pattern.
Main Only Navigation Example
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>
Keyzo.co.uk is an example site that follows the above pattern.
Excerpts from Introducing HTML5 — Added on 02-Feb-11, 7:38 AM
Introducing HTML5 by Bruce Lawson and Remy Sharp has this to say about the subject:
The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <header> element could come from a template file.
Of course, it's not required that the <nav> be in the <header>.
If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.
Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that "pragmatic considerations about ease of styling" yield a coupling between the content and the style.
It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.
They tend to get placed in a header simply because that's where navigation often goes, but it's not set in stone.
You can read more about it at HTML5 Doctor.
I do not like putting the nav in the header. My reasoning is:
Logic
The header contains introductory information about the document. The nav is a menu that links to other documents. To my mind this means that the content of the nav belongs to the site rather than the document. An exception would be if the NAV held forward links.
Accessibility
I like to put menus at the end of the source code rather than the start. I use CSS to send it to the top of a computer screen or leave it at the end for text-speech browsers and small screens. This avoids the need for skip-links.
It's a little unclear whether you're asking for opinions, eg. "it's common to do xxx" or an actual rule, so I'm going to lean in the direction of rules.
The examples you cite seem based upon the examples in the spec for the nav element. Remember that the spec keeps getting tweaked and the rules are sometimes convoluted, so I'd venture many people might tend to just do what's given rather than interpret. You're showing two separate examples with different behavior, so there's only so much you can read into it. Do either of those sites also have the opposing sub/nav situation, and if so how do they handle it?
Most importantly, though, there's nothing in the spec saying either is the way to do it. One of the goals with HTML5 was to be very clear[this for comparison] about semantics, requirements, etc. so the omission is worth noting. As far as I can see, the examples are independent of each other and equally valid within their own context of layout requirements, etc.
Having the nav's source position be conditional is kind of silly(another red flag). Just pick a method and go with it.
#IanDevlin is correct. MDN's rules say the following:
"The HTML Header Element "" defines a page header — typically containing the logo and name of the site and possibly a horizontal menu..."
The word "possibly" there is key. It goes on to say that the header doesn't necessarily need to be a site header. For instance you could include a "header" on a pop-up modal or on other modular parts of the document where there is a header and it would be helpful for a user on a screen reader to know about it.
It terms of the implicit use of NAV you can use it anywhere there is grouped site navigation, although it's usually omitted from the "footer" section for mini-navs / important site links.
Really it comes down to personal / team choice. Decide what you and your team feel is more semantic and more important and the try to be consistent. For me, if the nav is inline with the logo and the main site's "h1" then it makes sense to put it in the "header" but if you have a different design choice then decide on a case by case basis.
Most importantly check out the docs and be sure if you choose to omit or include you understand why you are making that particular decision.
To expand on what #JoshuaMaddox said, in the MDN Learning Area, under the "Introduction to HTML" section, the Document and website structure sub-section says (bold/emphasis is by me):
Header
Usually a big strip across the top with a big heading and/or logo.
This is where the main common information about a website usually
stays from one webpage to another.
Navigation bar
Links to the site's main sections; usually represented by menu
buttons, links, or tabs. Like the header, this content usually remains
consistent from one webpage to another — having an inconsistent
navigation on your website will just lead to confused, frustrated
users. Many web designers consider the navigation bar to be part of
the header rather than a individual component, but that's not a
requirement; in fact some also argue that having the two separate is
better for accessibility, as screen readers can read the two features
better if they are separate.
I think the simpliest way to answer this is to check the MDN Web Docs and other web standards sites.
TL;DR
there is no right or wrong. It depends on what you build.
This is a question that every web developer asks himself at some point. I had asked myself the question several times. To answer this question, I looked at the source code of Stackoverflow. And SO has the nav tag inside the header tag.
Which is absolutely right here, because if you look at the structure of the view of the top bar, it quickly becomes clear that this is the right way to go. Here you can simply work with the flexbox design. Which in turn would only work with a superordinate tag if both tags were not nested. Which would unnecessarily bleach the DOM. like:
<div class="flex">
<header></header>
<nav></nav>
</div>
On the other hand, there are headers that are simply a large image with a logo inside. Or a whole line with the logo. Here it doesn't matter whether the nav tag is above or below the header tag.
Conclusion: The tags only have a semantic meaning and are not a specification for a template structure. You build the template according to your ideas or the expectations of the users.
Both cases are right!
<!-- case 1 -->
<body>
<header></header>
<nav></nav>
<main></main>
</body>
<!-- case 2 -->
<body>
<header>
<nav></nav>
</header>
<main></main>
</body>
For a while now I have been building websites using HTML5 and I love using the new tags it offers. The ability to avoid using div after div is a wonderful thing and it leads to cleaner and easier to read html. Something that has me a bit confused is when it's semantically correct to use a div tag. I understand a div is a collection of semantically marked-up content that may need to be grouped together but i've seen numerous ways of writing HTML5 and how programmers use divs and I'm just not sure what's the right way and wrong way or in other words the ok way and the better way.
For example:
<div id="header">
<header>
<h1>Here is a header!</h1>
</header>
</div>
<header id="header">
<h1>Here is a header!</h1>
</header>
Both are ways to write html but is one more semantically correct then the other? Is it best practice to add a id or class to a header, footer, nav or aside tag and style them, or is that for div tags? Or is it possible i'm just over thinking this? If someone can help put my mind to rest and give me a good understanding, that would be great!
use tags and use Modernizer.js, so you get IE support.
I think a semantic way to write a header would be something like
<header>
<h1>This is the page heading!</h1>
<!-- extra header information -->
<p>A paragraph explaining the page</p>
<!-- navigation can go into the header, but it doesn't have to -->
<nav>
<ul>
<li>Example page</li>
</ul>
</nav>
</header>
The key points are that the header element should not be inside of a div#header element, because that is redundant. The header element also doesn't need an id for the same reason.
I'm trying to work out how I can make my CSS as de-coupled from my HTML as possible. The way to do that would be to write the basic layout elements in the HTML in a standard way, so that different CSS files could know exactly what the mark-up it's working with will look like without having seen it.
So I was wondering if there exist anywhere a set of standards for how you should name your layout elements and what order to put them in. E.g. a sensible way to mark-up my page would be as follows (note that I'm using HTML5 elements and following the theory that you should never use IDs for CSS rules):
<body>
<div class="container"> <!-- central "squeeze" for the content -->
<header>
<img class="logo" />
<nav class="primary"></nav> <!-- main navigation -->
</header>
<aside class="pre"></aside> <!-- left column -->
<article class="main"></article> <!-- central main content -->
<aside class="post"></aside> <!-- right column -->
</div>
</body>
Many pages use something similar to this basic layout. But as you can see, the name of the "container" or "primary" class will vary a lot, as will the use of <aside> for columns. Also, there are probably variances in ordering, like some people would put the <nav> element after the <header> rather than inside it, or the column elements inside the <article> element.
Does anyone know of any work that's been done to standardise the ordering and naming of these commonly used layout elements? Like a microformat or something?
I don't think there is an absolute standard, since no two websites are the same.
Allright, some are, but that's not the point. :)
Anyway, since the CSS is made specifically to markup that single website, you can't actually decouple it in such detail. You won't find some ready made CSS sheets that you can just plugin your website to place all those navigation containers.
I think the best way is to come up with a standard for yourself and stick to it. I hope you would be able to find better names than the often used but quite abstract 'container'. And maybe, some day, it will become the defacto standard.
In HTML5, I know that <nav> can be used either inside or outside the page's masthead <header> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav> element inside the masthead <header> element with the main navigation as a <nav> element outside the masthead <header> element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav> element within the masthead <header> element.
If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.
Is there a better way so that I'm not moving the main navigation from inside to outside the masthead <header> element based on the inclusion or exclusion of secondary navigation?
Main and Secondary Navigation Example
<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 is an example site that follows the above pattern.
Main Only Navigation Example
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>
Keyzo.co.uk is an example site that follows the above pattern.
Excerpts from Introducing HTML5 — Added on 02-Feb-11, 7:38 AM
Introducing HTML5 by Bruce Lawson and Remy Sharp has this to say about the subject:
The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <header> element could come from a template file.
Of course, it's not required that the <nav> be in the <header>.
If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.
Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that "pragmatic considerations about ease of styling" yield a coupling between the content and the style.
It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.
They tend to get placed in a header simply because that's where navigation often goes, but it's not set in stone.
You can read more about it at HTML5 Doctor.
I do not like putting the nav in the header. My reasoning is:
Logic
The header contains introductory information about the document. The nav is a menu that links to other documents. To my mind this means that the content of the nav belongs to the site rather than the document. An exception would be if the NAV held forward links.
Accessibility
I like to put menus at the end of the source code rather than the start. I use CSS to send it to the top of a computer screen or leave it at the end for text-speech browsers and small screens. This avoids the need for skip-links.
It's a little unclear whether you're asking for opinions, eg. "it's common to do xxx" or an actual rule, so I'm going to lean in the direction of rules.
The examples you cite seem based upon the examples in the spec for the nav element. Remember that the spec keeps getting tweaked and the rules are sometimes convoluted, so I'd venture many people might tend to just do what's given rather than interpret. You're showing two separate examples with different behavior, so there's only so much you can read into it. Do either of those sites also have the opposing sub/nav situation, and if so how do they handle it?
Most importantly, though, there's nothing in the spec saying either is the way to do it. One of the goals with HTML5 was to be very clear[this for comparison] about semantics, requirements, etc. so the omission is worth noting. As far as I can see, the examples are independent of each other and equally valid within their own context of layout requirements, etc.
Having the nav's source position be conditional is kind of silly(another red flag). Just pick a method and go with it.
#IanDevlin is correct. MDN's rules say the following:
"The HTML Header Element "" defines a page header — typically containing the logo and name of the site and possibly a horizontal menu..."
The word "possibly" there is key. It goes on to say that the header doesn't necessarily need to be a site header. For instance you could include a "header" on a pop-up modal or on other modular parts of the document where there is a header and it would be helpful for a user on a screen reader to know about it.
It terms of the implicit use of NAV you can use it anywhere there is grouped site navigation, although it's usually omitted from the "footer" section for mini-navs / important site links.
Really it comes down to personal / team choice. Decide what you and your team feel is more semantic and more important and the try to be consistent. For me, if the nav is inline with the logo and the main site's "h1" then it makes sense to put it in the "header" but if you have a different design choice then decide on a case by case basis.
Most importantly check out the docs and be sure if you choose to omit or include you understand why you are making that particular decision.
To expand on what #JoshuaMaddox said, in the MDN Learning Area, under the "Introduction to HTML" section, the Document and website structure sub-section says (bold/emphasis is by me):
Header
Usually a big strip across the top with a big heading and/or logo.
This is where the main common information about a website usually
stays from one webpage to another.
Navigation bar
Links to the site's main sections; usually represented by menu
buttons, links, or tabs. Like the header, this content usually remains
consistent from one webpage to another — having an inconsistent
navigation on your website will just lead to confused, frustrated
users. Many web designers consider the navigation bar to be part of
the header rather than a individual component, but that's not a
requirement; in fact some also argue that having the two separate is
better for accessibility, as screen readers can read the two features
better if they are separate.
I think the simpliest way to answer this is to check the MDN Web Docs and other web standards sites.
TL;DR
there is no right or wrong. It depends on what you build.
This is a question that every web developer asks himself at some point. I had asked myself the question several times. To answer this question, I looked at the source code of Stackoverflow. And SO has the nav tag inside the header tag.
Which is absolutely right here, because if you look at the structure of the view of the top bar, it quickly becomes clear that this is the right way to go. Here you can simply work with the flexbox design. Which in turn would only work with a superordinate tag if both tags were not nested. Which would unnecessarily bleach the DOM. like:
<div class="flex">
<header></header>
<nav></nav>
</div>
On the other hand, there are headers that are simply a large image with a logo inside. Or a whole line with the logo. Here it doesn't matter whether the nav tag is above or below the header tag.
Conclusion: The tags only have a semantic meaning and are not a specification for a template structure. You build the template according to your ideas or the expectations of the users.
Both cases are right!
<!-- case 1 -->
<body>
<header></header>
<nav></nav>
<main></main>
</body>
<!-- case 2 -->
<body>
<header>
<nav></nav>
</header>
<main></main>
</body>