Please take a look at this example -
I know I'm using the footer/nav correctly but the <side> and <section> is kinda confusing.
The <figure> will be just one huge logo. Beside that will be the main content. Would <aside> be proper use? Its not side content like a sidebar so thats why i'm asking.
Also the <section> would be columns for the content, would that be right?
HTML first of all gives meaning to content. The <aside> element is for "sort of but not really related content." You shouldn't put your main content in it. A <div> or <article> element should do fine. Position it on the side using CSS.
<aside> - content that is considered separate from the main content of the page
You could put the main content inside an <article> element.
<figure> - for diagrams, illustrations, photos, and code examples
Since a logo is not a stand-alone unit, I wouldn't use the FIGURE element. Consider just setting that image as a page background or something - it's just one image, so there is no need for much markup here.
<article> - could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content
Source: http://html5doctor.com/the-article-element/
Related
I have a homepage with slider after the header. Below the slider are other content sections.
I am not sure how to structure my document. Where should I place my h1 and can I have multiple h1 tags?
Is it good practice to use h1 tags for banner captions or banner titles?
The problem is that some designs make it hard to document the structure properly.
<body>
<div class="slider-wrapper">
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
</div>
<div class="client-wrapper">
<h2>Our Clients</h2>
<div>
Client Logos
</div>
</div>
....
</body>
It is generally possible to have many h1 tag, but structurically it may be better if you have only one h1. You can modify your headers h1's font-size with CSS if you have it inside something, like header tag. Like that:
HTML:
<header>
<h1>My awesome page!</h1>
</header>
<h1>Thing I want to talk about today</h1>
CSS:
header h1 {
font-size: 1.5em;
}
There is no requirement that you only have 1 h1 tag (see the example in the WHATWG doc here), but many designers reserve h1 to the title of the page, useing lower-level headers sub-headings. I would recommend only putting one on the page.
h2,h3,etc. will, by default, be smaller than h1. While you could use multiple h1 tags with class attributes to target CSS to the different headers, I would highly discourage this, use h2,h3,etc instead.
I'm not clear on what exactly you mean by "banner headers/captions" in this context.
Where should I place my <h1>?
The <h1> element is generally used to mark up the primary heading of the document, so... the <h1> element will conventionally appear somewhere near the top of the visually-displayed document.
In the source mark-up, you can technically place the <h1> anywhere, since position: fixed or position: absolute in your CSS will be sufficient to display the element somewhere near the top of the visual document.
Normally however <h1> appears in the source mark-up quite soon after the <body> begins.
Can I have multiple h1 tags.
Something of a hornet's nest. Yes you can, but...
It's probably inadvisable.
The best single article which looks how document structure and headings were intended to work in HTML5 and how everything actually works in practice is:
The HTML5 Document Outline is a dangerous fiction by Steve Faulkner
Is it good practice to use h1 tags for banner captions or banner
titles?
It's good to use h-something elements for all sorts of headings and heading-like elements throughout your document.
Bear in mind though that some elements have their own native caption elements.
<figure> uses <figcaption>
<table> uses <caption>
Previously I'd lay out a main container on an HTML page to wrap most of my body content in. for example, an 'about' page:
<header>
<!--header markup -->
</header>
<div id="container">
<!--articles, images, etc for the about section -->
</div>
<footer>
<!--footer markup -->
</footer>
would HTML5's <main> tag be ideal to take the place of my 'div id="container"' in this case?
In a word yes.
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
w3c specs
See here for more info
You should use it for content that is unique to the page. So yes, headers and footers are naturally left out. From there on, it depends what else you have there. If there's a sidebar, for example, with template-loaded content that is common across many pages, you should consider leaving that out as well.
Just replace the tag of most important part of your website with <main>. Mostly <main> will replace <section>(In your case, <div>, and originally it should be <section>). Notice that I put emphasis on the word part because <main> is not for sectioning your document, its purpose is just: point out what's the most important part of your website/application.
I am displaying articles on my document, and displaying links to other articles at the bottom.
HTML looks something like this:
<article>...</article>
<article>...</article>
...
<article>...</article>
<aside>
Other recent articles
<div> ... </div>
</aside>
I think the links to other articles should be , because it is defined in MDN as:
a section of the page with content connected tangentially to the rest, which could be considered separate from that content.
But the name <aside> seems to imply that the element should be either on left or right side. Can it be in the bottom?
With HTML, you should always think of your usage of tags as structural, not presentational.
So don't think of <aside>'s name as a physical description. Think of it in terms of its purpose in structuring content: to associate tangentially related content to the main content. That has nothing to do with where it's placed on the physical page design.
If you're designing your page with media queries, for example, I bet your mobile view isn't going to put an <aside> on either side of the screen because there is not enough room. You'll likely position <aside> content after the main content. But when you scale up to a desktop-sized screen, you have plenty of room to put that content on the left or right side (if you want, but you're not forced to!).
I also think back on Shakespeare's usages of asides: the characters would pause from the main play to talk directly to the audience about what they were thinking or what was going on. (Kevin Spacey's character does it a lot in House of Cards too.)
Update: I also looked up the definition of the word "aside":
a remark that is not directly related to the main topic of discussion.
"the recipe book has little asides about the importance of home and family"
The term "aside" is used in a similar vein to how one might say "on a side note" (in fact, that is what the <aside> element is designed for). It doesn't necessarily imply that the content must be laid out on the left or right side — that is a layout concern which has little to do with content semantics. If your layout calls for aside content to be placed at the bottom, you are free to style it accordingly.
As an aside (heh), if it is a set of navigation links, you may want to mark it up as a <nav> instead, but that is up to you.
I think you can interpret aside in different ways. As in, if the content wasn't there, the main point of the page could still be understood. Thus, aside should hold anything tangentially related to the content.
Ask yourself, if you remove the content within aside, will the meaning of the page stay the same?
A while back if I built an html 4 page I would use div, span h1,h2,h3, strong, p and then style my css accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 why are these tags here?
Now I want to use HTML 5 and I am very confused because after doing some research I see that there is allot of conflicting information.
So to start with these tags below and lets say my design is very image heavy
<section><nav><article><aside><header><footer><main>
in the old days I would write my html like this below
<div> <!-- large background image design -->
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
<img src="" alt="" />
<h3>image description</h3><div><!--little image--></div>
</div>
Is it correct to write the code like this now ( swapping out the outer div for a section )
<section> <!-- large background image design -->
<header>
<div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
<div><!-- large background title right --><div>
</header>
<img src="" alt="" />
<footer>image description<footer><div><!--little image--></footer>
</section>
How do you know what tags should be used?
Does it matter if I only use divs as before?
Do the new tags really add any value?
Are you able to point me in the direction of easy to understand examples and explantations?
Why should I use these new tags do they really add any value?
List item
I see amazon.com is still HTML 4
w3schools who claim to be html5 don't have any <footer> or <nav> or <section> tags -> they have divs?
OR: Am I reading to much into this and just do what I think is correct and use the html5 elements that are available for what I am building? and validate it against the http://validator.w3.org/ The HTML5 part even though it says experimental
Thanks for the advice
Many of the new tags are to provide semantic and structural meaning to your document, even if you're not using them directly for styling. This improves machine-readability of your document. Semantic markup allows software to more effectively identify and classify portions of your document.
For example, you can use a list <ul><li>...</li></ul> or a bunch of DIVs to accomplish the same task, but a list has semantic meaning - a grouping of items, whereas a bunch of DIVs do not.
There's noting wrong with wrapping your menu in <nav>, even if it's all DIVs or UL/LI inside. NAV just identifies that section of the page as a navigation element, the same with HEADER, FOOTER etc. In fact, many of these tags come from a typographical background - the terms used in describing elements of pages in magazines and newspapers.
1.How do you know what tags should be used?
identify the header of your page or the header of a section and use - header tag
which part represents the footer of your page or the footer of a section ? - use footer tag to mark it up
instead of using <div id="main">, you can now use <main> tag to mark up main content
identify less relevant content from the relevant content, and figuratively speaking place it aside by using aside element
and so forth
4.Are you able to point me in the direction of easy to understand examples and explantations?
watch HTML5 free video demonstrations on w3-video.com
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>