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
Related
I'm using some very simple html that I would expect to produce a sidebar, but the text in the sidebar simply appears as a next paragraph on the same page. True in both Chrome and Safari.
<!DOCTYPE html>
<html>
<body>
<section>
<p>
This is the main content. I'm not content to have main content without a sidebar.
</p>
<aside>
<p>
As an aside, I want this to be at the side.
</p>
</aside>
</section>
</body>
</html>
Do I need to add styling elements? Based on the documents I wouldn't have thought so. I have also tried this with a much longer 'section' text, to no avail. I've also tried the <sidebar> tag.
From the HTML 5 specification:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
It is not something that effect visually like other HTML tags.
Consider to use Flexbox
#section {
display: flex;
flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
<section id="section">
<p>
This is the main content. I'm not content to have main content without a sidebar.
</p>
<aside id="aside">
<p>
As an aside, I want this to be at the side.
</p>
</aside>
</section>
</body>
</html>
You can also try to use float.
These html5 tags,
<section>, <main>, <nav>
and so on, have no impact on the browser, it's like writing
<div>
.
The sole purpose of their existence is to make your source code more readable.
By the way, I do not think that actually exists.
You will need to use CSS for this. The semantic HTML tags - section, article, aside, etc... do not have a lot of impact on the rendering of the page. Some of them usually just add a default display: block style, but that's about it.
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 have this section and, for layout proposes I would need two divs inside that section. Of of them, should wrap the header part of section.
So:
<section>
<div id="layout-stuff">
<header>
<h1>This is the section header</h1>
</header>
...
</div>
</section>
Is this ok?
Yes, you can do this. a <div> is nothing more than an element to hook styles with.
Looking at the header tag definition on w3schools it says:
"Note: A tag cannot be placed within a footer, address or another header element."
So, it does not seem to be any of this cases. My guess It's fine to do it.
http://www.w3schools.com/html5/tag_header.asp
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.