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.
Related
In creating a page with blog-style content in the middle section, it would be good to use embed/iframe to load content from a separate (html) document into this section. Such a solution would make it more straightforward to update the blog. However, the question is if it's possible to do this without PHP and MySQL (both of which are beyond the scope of this coder).
The code as it stands goes something like this:
<section id="bio">
<p>Name</p>
<ul><li>Some data</li></ul>
</section>
<section id="blog">
<iframe src="blog.html" style="width:100%;height:100%;border:none;"></iframe>
</section>
<section id="links">
<ul><li>Links listed here</li></ul>
</section>
Now, with a blog of some length scrollbars pop up around the blog section. Would it be somehow possible for the iframe content to be considered an intergral part of the page so that the entire content of the iframed file appears prior to the last section, and so that the scrollbars include the entire page content (rather than only the iframe content)?
Iframes can't do that by definition.
However, there are some libraries to help you resize the iframe according to it's content.
Check this: https://github.com/davidjbradshaw/iframe-resizer
You'll need to place a script inside your blog.html and other one in your host page HTML.
When do I put headings inside a header element? I can't understand it, sometimes it seems to me that each heading has to be between header tags.
Let's take this sidebar as example :
How to code it?
<aside>
<header>
<h1>How to format</h1>
</header>
</aside>
or
<aside>
<h1>How to format</h1>
</aside>
See the specification of the header element:
A header element is intended to usually contain the section's heading
(an h1–h6 element), but this is not required. The header element can
also be used to wrap a section's table of contents, a search form, or
any relevant logos.
So you can have many header elements in a page (it's not limited to the top of the page), and you can use it around headings, but it's optional. This means both of your examples are correct.
The header tag is for what displays at the top of the page of the page-what is sometimes called the banner. So put your h1-h6 tags in it when they are in the banner of your page.
Tags like header and footer are basically just div's renamed for organizational sanity. In the future search engines and browsers may look for header and footer tags to help them process and display information better. For now, it lets you avoid staring at a bunch of div tags.
<html>
<head>
</head>
<body>
<header> Web page Banner</header>
<div>Content</div>
<footer>Web page bottom </footer>
<body>
</html>
Instead of this...
<html>
<head>
</head>
<body>
<div> Web page Banner</div>
<div>Content</div>
<div>Web page bottom </div>
<body>
</html>
<header> give us some great added semantic value in order to describe the head of a section.
You can use multiple headers in a web page, each of which will then become the <header> for that section of the document. So, using a <header> depends on the complexity of the section. The more complex it is, the more necessary the header element becomes.
a <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>).
hope it helps
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
According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the traditional 'header' on most websites consists of just a logo and some navigational elements.
A lot of major sites including Facebook and Twitter use a h1 tag for their logo, which seems illogical to me, since the logo is not the most important or most informative element on the page.
A h1 tag appears in the content section of 95% of websites, not the header section. So why are we instructed to include a h tag in the header? If we must, why don't Facebook and Twitter use a h6 tag instead?
You should take a look at the outline algorithm for HTML5.
You probably want your site title/logo to be a h1.
Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>ACME Inc.</header>
<div class="navigation">
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:
Lorem Ipsum
But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".
So the site header and the site navigation need a heading. Let's try to give them a h1, too:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h1>Site navigation</h1>
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Way better! The page outline now looks like:
ACME Inc.
Site navigation
Lorem Ipsum
But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.
So we should go and change the navigation and blog entry headings from h1 to h2:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h2>Site navigation</h2>
<ul>…</ul>
</div>
<div class="content">
<h2>Lorem Ipsum</h2
<p>…</p>
</div>
</body>
Now we have this outline:
ACME Inc.
Site navigation
Lorem Ipsum
And this is exactly what the content of the example webpage means.
(By the way, this would work in HTML 4.01, too.)
As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:
<body>
<header>
<h1>ACME Inc.</h1>
</header>
<nav>
<h2>Site navigation</h2>
<ul>…</ul>
</nav>
<article>
<h2>Lorem Ipsum</h2
<p>…</p>
</article>
</body>
The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.
If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.
You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".
Additional notes
The header element is not needed in these examples. I only added it because you mentioned it in your question.
If you want to use a logo instead of a textual name ("ACME Inc."), you should still use a h1 and add the img as a child. The value of the alt attribute should give the name then.
The top level heading doesn't have to be "the most important or most informative element on the page". This is not what headings are used for. They give the structure/outline and "label" their scoped content. In this example, you could assume that the article (with its heading inside) is the most important content.
If you use the sectioning elements everytime whend needed, you don't need h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
You can play around and test some markup constructs with the HTML Outliner: http://gsnedders.html5.org/outliner/ (it had some unfixed bugs) the HTML5 Outliner.
Don't get confused by "should" contain and "must" contain. You aren't required to have anything inside the header you don't want but the 'semantic' purpose of the header is that is where you should look for and place such things, at the head of a document. Just as you would look for the title or introduction or table of contents at the top of a printed page.
This is a flexible but important concept for SEO and basic HTML programming. While there is some room for wiggling through this standard, it will not make or break your site.
For example, you mention Facebook has the logo instead of an H1 in their header. This is half true as they have their header within a pair of h1 tags, making it function essentially the same as any other H1 text might:
<h1><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></h1>
Again, not exactly ideal, but they are Facebook and can do what they want. You on the other hand might want to be more mindful of these best practices when building out a site.
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/