Header, footer and main semantic elements

source: HTML Essential Training, Lynda.com.  All words James Williamson.

So far other than the div, the structural elements that we’ve explored have all been sectioning elements. And that is, when they’re used they create a new section in the document outline. HTML5 also includes additional semantic elements. That help us create sophisticated page structures without actually affecting the document outline. So this section has. We’re going to take a look at three of them. The main header and footer elements and we’re going to start with the header. So here I am in the html file specification. I’ve navigated to the header element and let’s read the description here.

So the header element represents introductory content for its nearest ancestor. That would be its parent tag sectioning content or sectioning route element. A header typically contains a group of introductory or navigational aids. So lets talk about what it represents. So the header, is essentially representing the introductory content, for it’s nearest parent sectioning content. That would be any sectioning element, like articles, sections, a sides, things like that. Or sectioning root element which would be the body. So if it’s contained just within the page with no parent element, then it applies to the entire page.

And the description mentions that in the next line. There’s also a note here that says it’s intended to usually contain the sections heading. So an h1 through h6 element, but it’s not required. The header element can also be used to wrap a section’s table of contents, search form, any relevant logos. So really, any time you have a new section of content inside your document. And you have a little introductory section to it, maybe you’ve got some navigational aids. Maybe you have a logo for the page. Maybe for an article you have the name of the article plus the author name and a byline.

Those types of things can go in the header. It’s not required, it just enhances the semantics of the document. So going into our own file, if I look inside the body tag, the very top of the page. We have an h1 HTML essential training that appears on every page within this site. We have an h2 for structuring pages. That’s the title of this page. And then we have the page’s navigation, using the nav element. After that, we get to the article itself. So you could consider everything above this article as being introductory content for the page. We have the title of the site, we have the title of this individual page, and then we have the site navigation. So, this is actually perfect information to occur within a header. Now we could make any number of judgment calls here. We could place just the h one inside the header. We could place the h1 and the h2 because, I think, you the strongest case for those two being part of the header. And or we can include the nav. Some people will include page navigation as its own section, outside of a header, some people will include it inside of it. It is totally a judgement call. All right, so what we’re going to do, is just inside the body tag, I’m going to add a header.

And I’m going to wrap the h1, the h2, and the navigation in it. I’m going to wrap everything in that so that all that becomes part of the page’s header. Now this header represents introductory content for the entire page because its nearest apparent sectioning element is the body. Now, one of the things that really isn’t explicit in the specification the way I think it probably should be. Is that your pages are not limited to one header. Unfortunately a lot of people read the specification that way. And I’ve seen a lot of sites where somebody will just use the header one time at the top of the page.

Because they believe that’s the only time they can use it. That’s absolutely not true. Any section that warrants having a header can have one. And again as an author, that’s up to you to decide whether or not you want to use it. If we scroll down into the article for example. Take a look at the first section. Conveying meaning through structure. And there’s basically a summary of what we’re talking about on this page. If you think about it that particular section is introductory content. And it’s introductory content for this article.

So what I’m going to do is I’m going to convert that section to a header. So really, this is a judgement call about the semantics of this particular section and I think it works better as a header. Now, a header will not implicitly create a new section in your document outline. However, because headers so commonly contain headings. You’ll note that this header has heading three, the header above it had the h1 and h2. That a lot of people sort of make the mistake of thinking that they’re sectioning elements. Because you almost always see a section that’s represented by a header.

So now we’re going to transition back to specification. Now the next element we need to take a look at is the footer element. As the description says, this element represents a footer for it’s nearest ancestor, again parent element. Section in content or section in root element. A footer typically needs information about its section such as who wrote it, links to related documents, copyright data and the like. When the footer element contains entire sections they represent things like appendices. Indexes, long colophon, verbose licensing agreements, other such content.

You’ll notice on a note down there it says contact information for the author and or editor of a section. Belong in an address element, possibly itself inside of a footer. Bylines and other information could be suitable for both a header or a footer. And can be placed in either or neither. The primary purpose of these elements is merely to help the author write self explanatory markup that’s easy to maintain a style. They’re not intended to impose specific structures on authors. Now this means, again. That, for both the header and the footer, it’s a lot of judgment call on your part as an author.

So, think of footers as holding sort of related information, and it’s information that relates to the content that it’s inside of. So, not quite like an aside, this is more like, here’s some extra information that you might need. Copyright data, links to privacy pages, things like that. And in our own page, if I scroll down to the very bottom of our code. I can see that down here at the bottom we have a paragraph that contains copyright information, links for following me and lynda.com on Twitter. So these are related to the site as being an HTML reference and a lynda.com reference.

But didn’t really fit in any specific section. So this is perfect information for a footer, and that is exactly what I’m going to do. Now much like the header, you can have as many footers on a page as you want. You probably won’t use them quite as often, because not that many sections. Have footer information. There’s also a misconception that you have to put the footer at the end of an element, you don’t. That’s typically where people have them, but I’ve seen structures built where footers are actually used at the top of an element. So, again, it’s really up to you as an author about how you want to structure your content.

There’s been a lot of conventions developed around the use of footers. They do typically appear at the bottom of content. Most pages do have a footer that contains extra links and navigation or information in it. So think about how people have already established the way that footers are used on the page and sort of begin your strategy there.

The Main Element

  • a fairly recent addition to HTML. And that is the main element.
  • represents the main content of the body of a document or application.
  • it’s a very specific element.
  • 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.

Why use the main element?

Let’s say that you’re on a screen reader and you visit a page, so you’re just having the page being read to you. You want to be able to jump to the main part of the content. What this element does is it sort of identifies the main content on the page.

  • You can only use it once on the page and
  • it is not sectioning content so it’s not going to effect your document outline at all.
  • The main element is not a sectioning content.
  • the main content of the document includes content that is unique to that document.
  • excludes content that is repeated across a set of documents. Such as site navigation links, copyright information, logos, banners, things like that.
  • So it has to be unique.
  • Has to be the main content of the page.
  • You really ought to view it as a navigational aid. For any device, search engines, screen readers, that sort of thing, that want to know, hey, on this page, what’s the main content?

So, this one is actually a pretty easy one to wrap your head around. And if I think about this particular page, our main content is definitely the article. So, what I’m going to do, is all the way around the article. I’m not going to replace the article, because I need the article. For its semantic struggling abilities I’m just going to take the main tag and I’m going to wrap it all the way around the article. No you may think of that as a little bit overkill. Do you really need to go to that amount of trouble in structuring your content?

Well, my take on this a really wonderful thing to do in terms of assistive Devices. People that use string readers, search engines, robots that are scanning your copy.

It is semantically rich, and it’s going to help your site be more successful in terms of its organization and overall semantic information. So I highly recommend using the main element in that capacity.

preview this in the browser, I don’t see anything different at all on the page. That’s because the changes that we made were all semantic they are not visual.

We also haven’t effected the document outline at all but we have added a great deal of semantic meaning to our content. To be sure you understand exactly how headers and footers work as there are a lot of authors out there that seem confused as to when to use them.

And whether or not you can have multiples of them on the page, that sort of thing. I also highly recommend using the main element when it’s appropriate as it can greatly enhance the accessibility of your pages.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s