11

Take these two pieces of markup:

<div id="header"> <img src="/img/logo.png" alt="MyLogo" /> <ul id="misc-nav"> <li>..</li> </ul> <header> <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> <p>The smell of invention awaits you...</p> </header> </div>

and

<header> <img src="/img/logo.png" alt="MyLogo" /> <ul id="misc-nav"> <li>..</li> </ul> <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> <p>The smell of invention awaits you...</p> </header>

My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?

It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.

Can you offer any clarity on it?

Improve this question
2
  • Im curious to this also, I've always used it as your second method. +1 Commented Jan 9, 2011 at 21:21
  • Well I'm glad to shed some light on the subject Daryl. I just wanted to get the question on SO, so the myth can be put to be bed immediately. Commented Jan 9, 2011 at 21:29

7 Answers 7

Reset to default
3

Both are fine. But what exactly do you mean by "structural" vs "semantic"?

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Well it was a difficult concept to express in the title of the question but by structural I mean, using CSS to define it's width, height and other "structural" properties outside of formatting. If it's a "semantic" tag, then wrapping it around the data it's intended to represent with hardly any CSS styling at all.
The purpose is both. It's a semantic that you can, amongst other things, use to style a part of your document conveniently with simple selectors (no need for classes, for instance).
Morning Ian, I've decided to award the correct answer to you. Given you're an editor of the HTML specification, I feel an answer from you is like reading the intention of the spec itself.
3

It's your first method (semantically).

The < header> tag defines an introduction to the document.

<header> <h1>Welcome to my homepage</h1> <p>My name is Donald Duck</p> </header> <p>The rest of my home page...</p>

http://www.w3schools.com/html5/tag_header.asp

Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element

Improve this answer

5 Comments

Just as I thought. The more responses this question gets, the sooner we can put this myth to bed before it gets more widespread.
Quoting the specs "The header element typically contains the headings for a section". so it can be any section, not only the document. dev.w3.org/html5/markup/header.html
Try linking to the multipage version instead of the single page spec.
I know, just that the phrase i was quoting isn't included in the multipage version.
@Jhurtado I was referring to Floern's answer rather than your comment - the w3 version of the spec is already multipage. The WHATWG multipage version is generated by a python script from the single page version, they should be identical.
2

The header tag purely semantic. However, in fact all HTML tags are to provide a context to the content (= semantics).

Use CSS to style your content approperiately.

Improve this answer

Comments

2

I would advocate the following combination of markup and CSS:

In your CSS:

header { background: #fff url(/img/logo.png) top left no-repeat; padding-left: 64px; /* or whatever required to display margin correctly */ } /* if you REALLY want your navigation to appear as a bulleted list */ nav a { display: list-item; }

In your page markup:

<nav> <a>...</a> <a>...</a> </nav> <header> <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> <p>The smell of invention awaits you...</p> </header>

This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.

I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.

Improve this answer

2 Comments

Indeed, but I trying to encapsulate the problem at large. Still good to have the divitis cured!
There's some discussion of analysis of class and id tags here
1

HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.

I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:

<header> <img src="/img/logo.png" alt="MyLogo" /> <nav> <ul> <li>..</li> </ul> </nav> <hgroup> <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> <h2>The smell of invention awaits you...</h2> </hgroup> </header>
Improve this answer

4 Comments

I was just about to suggest the same mark-up. This is correct as per the current HTML5 draft. However, it should be noted that there's currently a bit of debate about "hgroup", and it may yet be dropped in favour of something a bit simpler for non-programmers to grasp. See brucelawson.co.uk/2010/on-the-hgroup-element
@Alohci Yeah, there has been some discussion, and the element is hard to explain without also explaining the context, but there's little in the way of concrete changes been proposed. As far as I can tell just this bug report which refers to this issue. Neither of them actually seems to suggest dropping the element.
There is a bug report for dropping hgroup now: w3.org/Bugs/Public/show_bug.cgi?id=11731
@Alohci - Thanks for pointing that out, seems far from conclusive so far though
0

I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.

Improve this answer

Comments

0

If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.

So you can instead use h1 h2 h3 tags and style them any way you want.

The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.

So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.

We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.

That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.

The point of web is to be open to all people and free, and I agree to that.

In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.

Hope this helped someone :)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.