I'm building an HTML snippet that will be dynamically included on a page. The snippet looks something like this:
<article>
<h2>Title</h2>
<p>Content</p>
</article>
The problem is that I have no way of knowing where in the document outline this snippet will be included. It may appear directly under the <h1>, or it may be nested several levels deep under an <h4>. In other words, my outline may look like this:
<h1>
<h2>
<h3>
<h2>
<h2>
Pretty logical. Or it may look like this:
<h1>
<h2>
<h2>
<h2>
<h2>
Not so logical. Or it may even look like this:
<h1>
<h2>
<h3>
<h2>
<h2>
<h2>
Downright weird, and I have no way of knowing or controlling it!
I'm not concerned about styling, just semantics.
I'd say the best solution would be to just use <h1>s everywhere and let sectioning elements handle the semantics per the new HTML5 document outline, but my research has advised me against that because no client actually supports that outlining method. So what is the best solution?
Edit
A few ideas have come up in the comments that use scripting to solve the problem. These could work, but I guess I want to know if there is a sensible solution that doesn't require the added complexity of code that does things I think the browser should be doing on its own.
Hypothetically, if such scripting solutions were impossible for whatever reason, would it make sense to create a flat outline using just <h1>s rather than create a completely wrong outline with improperly nested sub-levels?
As far as the HTML5 spec is concerned, you may use any heading element (h1-h6), as long as you always use a sectioning element (like article).
All of these snippets are valid, they create the same outline, and they are semantically equivalent:
<!-- h1 + h2 -->
<body>
<h1>heading for 'body'</h1>
<article>
<h2>heading for 'article'</h2>
</article>
</body>
<!-- h1 + h1 -->
<body>
<h1>heading for 'body'</h1>
<article>
<h1>heading for 'article'</h1>
</article>
</body>
<!-- h1 + h6 -->
<body>
<h1>heading for 'body'</h1>
<article>
<h6>heading for 'article'</h6>
</article>
</body>
<!-- h5 + h1 -->
<body>
<h5>heading for 'body'</h5>
<article>
<h1>heading for 'article'</h1>
</article>
</body>
Because each sectioning element has not more than one heading in these snippets, the heading elements h1-h6 work like the (often proposed) h element: the rank doesn’t matter.
But, like always, some user agents might not follow the spec here, for various reasons. If you want to convey the intended outline to these UAs, too, you would have to rely on the heading element ranks (like it’s the case in HTML 4.01). That’s why the spec recommends to do this:
Authors should use heading rank (h1-h6) to convey document structure.
What to do if calculating the rank isn’t possible? Make the best guess¹ possible, and live with a non-ideal outline for UAs that don’t support the full HTML5 outline algorithm. For UAs that support HTML5’s outline algorithm, it will work fine.
¹ Guesses like:
It never should be a h1, because your snippet will be a sectioning element, so it starts at least at level 2 in the document (level 1 will always be any heading element with body as nearest sectioning parent).
Depending on the nature of the snippet, low headings will be very unlikely. For example, if the snippet is a comment form for blog posts, it should be on the same level as the article element or one level below (if it’s nested inside the article), so typically h2 or h3.
If the snippet represents something very important for users, a higher heading should be used, because with a lower heading users that rely on the outline for navigating might never access the snippet’s content, as it could be "hidden" in the deep outline, below entries the users might possibly have no interest in (so they might skip the whole section with all its children).
Related
I'm trying to create a site that has quite a few articles and wanting to have forewords in the more important ones, I've had a search and can't find anything that seems to identify what to do for this. All I can think of is using bold tags...
Is there an html tag for foreword and if not, what's the most semantic way to tag this?
EXAMPLE
<p>
<foreword>
The start of the article would go in here, typically the first sentence of the article.
</foreword>
Rest of the text for the article would go here.
</p>
No there isn't.
If you are looking to create a visually distinct lead paragraph then simply add a class that you can use to apply that styling, e.g.:
<p class="foreword">
I apply a visual intro style on my blog posts, using just a little CSS, eg:
.intro,
.post p:first-of-type {font-size: 1.3125em;}
The first paragraph in any post, or any element that I give the class .intro then adopts this visual style. Here's an example: http://internet-inspired.com/wrote/load-disqus-on-demand/
Semantically it's no different to any other paragraph though.
You should certainly not use bold tags, they do carry a semantic meaning and should not simply be used for the purpose of adding weight to your copy. To alter the visual appearance you should use only css.
Of course, html5 won't freak out of you do use a foreword tag, it wouldn't cause an error, but it just won't do anything. And it would carry less semantic value than a p tag, making it utterly pointless.
By forward do you mean introductory text? One option is to put it in a header element.
<article>
<header>
<h1>My Title</h1>
<h5>A really dull article on organic gardening</h5>
</header>
<section>
Organic gardening is.....etc. etc. etc.
</section>
</article>
According to HTML5 CR, the header element “represents introductory content for its nearest ancestor sectioning content or sectioning root element”, and a foreword can obviously be regarded as introductory. The description adds: “A header typically contains a group of introductory or navigational aids.” However, this is not meant to restrict the use to such “aids”, whatever that might mean. There is an example of a header element containing a greeting:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
However, a header element is a collective element, typically containing a heading and something else. If that something else is (or contains) a foreword, there is no dedicated element for the foreword. It can be made a section element, but that’s general thematic grouping and not specifically any particular content. So you would use something like this:
<article>
<header>
<h2>Treatise on human misunderstanding</h2>
<section class=foreword>
The foreword goes here. It typically consists of a few paragraphs and a footer.
</section>
</header>
<section>The first section of the article.</section>
<section>The second section of the article.</section>
<section>And so on.</section>
</article>
However, since you say you considered using “bold tags” and show the dummy content of the “foreword” as “The start of the article would go in here, typically the first sentence of the article.”, it seems that you don’t actually mean a foreword at all. According to Merriam-Webster description, a foreword is “a section at the beginning of a book that introduces the book and is usually written by someone other than the book's author”.
I think you actually meant a headline. However, this really does not change much structurally. It could still be wrapped in a header element and even marked up as section, though that would not be very natural. A single-sentence “section” isn’t much of a section; rather, it could be a p element or just a div element, e.g. <div class=headline>...</div>.
This is all somewhat theoretical. The header element has no known impact on anything except being a block element (and its content normally causes block rendering anyway). The same applies to section. Use them if you like, but don’t expect them to “do” anything. You can use them in styling, but you could style div elements just as well.
Do you mean using forward links from one page to other? If yes, then use following anchor tag:
Name_You_Want_To_Give_To_The_Link
Eg-->
Click here
or
Click here
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
W3C doesn't explicitly say how exactly are we supposed to use headings or I can't find such information.
Resources:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
http://www.w3.org/TR/WCAG-TECHS/H42.html
http://www.w3.org/TR/WCAG-TECHS/G141
This is very brief and raises many questions such as:
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Should H1 be used only once on a page?
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
If anyone could shed some light on that, it would be great :) Thanks.
1.Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
Like Richard said, it is up to the programmer. In general, headings build structure into your page, like an outline you would make for a paper in school. There is a site, that creates an outline for you based on headings. Further WebAIM found that people using technology like knowing what level they are on, so jumping around, may confuse some.
2.When designing a sidebar - what headings should be used? H2?
I normally put a <h2> in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the <aside> tag, which natively has the complementary role.
3.When designing a footer - what headings should be used? H2?
I normally don't use headings in the footers. You can either assign the contentinfo role to the footer div, or use the HTML5 <footer> tag which again, has it native. This blog post on ARIA is helpful.
4.Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Sure, you can do:
<h3>My favorite Movies</h3>
<ol>......</ol>
5.Should H1 be used only once on a page?
Long and unending debate. I am in the camp that H1's should be only used for the title of the content, such as only the question title here on SO. There was a discussion in the HTML5 group that new tags, such as <section> resets the heirarchy/outline that I mentioned above, and h1 can be used. I am not a fan or in favor of this.
6.When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
I'd use h2's
7.Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
The proper way is <h_><a>Words</a></h_>.
You should read the section "Headings and sections" of the HTML5 spec. Getting the headings right is an important aspect of accessibility.
With headings (and sections) you are telling various user-agents how your page is structured, which content belongs together and which is separate from each other.
Think of a typical website with 3 columns. In the first column you have the site navigation, in the second column you have the main content and in the third column you have secondary content. Now, humans able to see might grasp immediately that there are three "areas" on the page, thanks to a different background color, margins, borders, whatever. But visually impaired or blind humans can't get clues from the graphical design of the page. Machines (like search engines) neither. Therefor we use heading/sectioning elements, so they can get the information (how the page is structured) from the markup.
Each HTML5 document has an outline, which gets created by the use of the headings h1-h6 (and hgroup) and/or the sectioning elements (section, article, nav, aside). You can think of it as some kind of TOC.
While a human able to see gets a first idea about the page structure by looking at the graphical design, humans using screenreaders and machines get this idea by reading the page outline, e.g.:
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
This could be the outline of the following example documents:
Using headings only:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
Using sectioning elements and headings with the level according to the calculated outline:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
Using sectioning elements with h1 everywhere:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(The latter two are semantically equivalent!)
When using sectioning elements, you could even omit the headings altogether, the outline would still be the same, although "unnamed" (which is not very helpful!):
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
This would be the corresponding outline:
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
You can play with this online outliner to see which documents create which outlines.
so, should we skip them or not?
Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.
Note however, depending on how exactly you skip, especially if you don't skip all headings of that level, a wrong outline could be created. See for example this simple document:
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
Now, if you'd change the last h2 to h3, suddenly this "More stories" section would become a subsection of the story. If you'd change it to h4, it would become a subsubsection.
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
These questions can't be answered in general. It depends on your site and your page and your content. But yes, in many cases for a "typical page" h2 would be the right candidate. The page heading (not to confuse with main content heading!) is h1, the main content is h2, the secondary content (sidebar etc.) is h2. If your footer would need a heading (not each one does), it would be h2 also in this case.
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
It really depends on the content and the context.
The important question you have to ask (in general, for all heading decisions):
Does this content "belong" to the previous heading?
If yes:
Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
Is there no natural "sub-heading" for this content? → don't use a heading here
If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
(you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)
Should H1 be used only once on a page?
Nope. As I explained, you could use h1 for all your headings on a page (if you use sectioning elements!).
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
You should probably use an article element for each entry. So you'd get an heading automatically (= an entry in the outline), so to speak, as article is a sectioning element. Now, you could use h1 for it (no matter where the article is placed!), or you could use the calculated heading level (if the article is a direct child of body, you'd use h2. If it is one level deeper, h3. And so on.).
Use sectioning elements and headings so that a useful outline is created.
If you mark-up a webpage, look for a minute at the created outline only: Does it make sense? Do you understand by that how the page is structured, what sections it got? Is the hierarchy correct? Is a separate area/section of the page missing in this outline? Is a section a child of a section it doesn't belong to? (for example, often you see that the site navigation is a child of the page's main content, which is not correct, of course: typically they should be on the same level, both being childs of the site heading).
The <h_> tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like <h4> is pretty much descriptive for all intents and purposes.
If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5 <section id=""> tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:
Search Engine Optimisation: if you make some piece of text a heading, you are telling search engines, "hey, this is important!". To what extent this matters is for another discussion.
Code readability: if multiple people are working on the project, a heading is a good way to understand where breaks in the page copy occur. You can do this with <!-- Sidebar Here --> to a similar effect, but to some this is overkill.
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
This is at the discretion of the programmer. You might decide to use <h1> for page headings, <h2> for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
This is absolutely correct.
The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a <h4> or <span> tag should be used... nightmare fuel!
If a topic like those found in questions 2-6 above aren't written in stone, common sense is the fail-safe. That, and talking to your colleagues and agreeing a way forward. Sorry to repeat myself, but standards are for reference.
Hope that helps!
I've read conflicting webpages about using HTML 5's section element. Is it semantically appropriate to use it as the section between my header and footer?
<body>
<header>logo, nav links</header>
<section>main content of my webpage</section>
<footer>copyright, more links, contact info</footer>
</body>
A good place to start is Bruce Lawson's Scooby Doo and the proposed HTML5 <content> element .
You'll find a link in there to the opinion of Ian (Hixie) Hickson who is the editor of the WHATWG version of HTML5 (aka HTML Living Standard) and until recently editor of the W3C version of the HTML5 standard.
What he says (and has consistently said for at least the last 5 years) is that there is no need for a sectioning element there. If you need a containing element for everything that is not in the header or footer <div> is the element to use.
On the other hand, another member of the W3C HTML working group, Steve Faulkner, has proposed the <maincontent> element for your use case, on the grounds that is allows the ARIA "main" role to be incorporated into native HTML.
FWIW, for me, it seems odd that you should have a special element for between the header and footer in <body> but not for between header and footer in <section> or <article> so I'm with Hixie on this.
I also don't buy Steve's comments that it will be useful in that it will mark the main content even if the other sectioning and header/footer elements are not marked up correctly, since there doesn't seem any case in which I could advocate its use. It seems to be only for the web author who wants to do a half-assed job.
Do note that if <maincontent> does get accepted, it will not be part of HTML5. The earliest it could appear would be HTML 5.1
<section> is slightly more semantic than <div>. One of <section>'s main points for HTML5 is that it helps the browser to understand the document's outline.
Your approach is really dependent on the content of our page. Is everything in between the <header> and <footer> tightly related, or could it be broken down a little into more <sections>, or even other elements?
There will always be sources full of conflicting advice, especially for something in the development and utilization stage that HTML5 is in.
If you are using headings (h1 to h6), you are already using something that could be called "implicit sections". The outlines of the following two markup examples semantically identical:
Example 1:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<section>
<h1>My cool article</h1>
…
</section>
<footer>…</footer>
</body>
Example 2:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<h2>My cool article</h2>
…
<footer>…</footer>
</body>
So in this very case it wouldn't matter if you explicitly add section or not: the outline (the semantic structure) would be the same. Side note: it is recommended to always explicitly use the sectioning elements for sectioning content:
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
(however, this applies only for sectioning content, not sectioning roots (like body))
Now, your question can't be answered generally, if we don't know which headings you are using. There are cases which would require you to use section (or article), otherwise you would get a wrong outline for your page. And there are cases where the use of an explicit section (or article) is optional.
Some general tips (applicable to "prototypical" websites only; there are of course many exceptions; these tips should only give you an idea)
each page of your site should have a site heading (e.g. "John's blog") and a content heading (e.g. "I found a funny video")
the site heading is the first heading in body, which is not included in a sectioning element (section, article, nav or aside)
the site heading "dominates" all scopes of your page, e.g. in most cases a) the navigation and b) the content
all scopes of your page should have a heading (you can visually hide them with CSS, though). If you can't or don't want to give a heading to a scope, you have to use a sectioning element (section, article, nav or aside), which would create an untitled/implicit heading
I was checking the article 20+ Professional Examples of Websites Using HTML5 to see the good semantic uses of new HTML 5 tags and I found that this website http://bit.ly/bfgatc is using H2 before H1 in Header.
Is it ok in HTML5?
In my opinion, neither of those have any business being separate headers, and they definitely shouldn't be in an <hgroup>. They're one header, and should be inside a <header>, or maybe even in a <section>. They don't have separate levels; one's just styled bigger than the other. It's not semantically correct to use the two in either order.
So what I would recommend is, instead of:
<header>
<nav>...</nav>
<div>
<hgroup>
<h2>...</h2>
<h1>...</h1>
</hgroup>
</div>
</header>
would be:
<nav>...</nav>
<header>
<h1>I design user interfaces and strive for <strong>perfection.</strong></h1>
</header>
The element has been removed from the HTML5 (W3C) specification. As Ryan said. It would be better to put it in a tag.
Why not? The spec for hgroup says:
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
It seems to clear to me that a section title would be a H1 for example, and the subtitle a H2.
To expand: In this situation, it doesn't really make sense, but in general, there is technically nothing wrong with this (although a bit weird).
Why would a HTML5 website adopt the following structure? I am specifically interested in the use of the outer <section> element.
I realise that this validates as HTML5, but I do not understand why a section would contain an article. I thought that a section was to be thought of like a "chapter" of an article. Why wouldn't one just use <div id="main"> ... </div>? Is there a semantic advantage (perhaps for SEO) of using the outer section element?
Note: I have simplified the source by removing various container / inner wrapper DIV elements.
<div id="wrapper">
<section id="main">
<article id="home">
<section class="block">
<h1>Heading</h1>
<p>Content...</p>
<p>Content...</p>
</section>
<section class="block">
<p>Content...</p>
<p>Content...</p>
</section>
</article>
</section>
</div>
I am unable to provide a link to the website in question because it contains content that some viewers may find offensive.
From the spec:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead.
And:
Examples of sections would be chapters, the various tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site's
home page could be split into sections for an introduction, news
items, and contact information.
So in my opinion, what you have demonstrated is not really a valid semantic use for the section element, and div would be better (or nothing at all, considering there is already the wrapper div). However, the two child section elements are probably used more as the spec intended.
I don't believe any of the HTML5 elements (article, section etc.) have any real bearing on SEO at the moment, although they could in the future. And I may be wrong. I'm not an SEO expert.
without seeing it in action, kinda hard to say exactly but here goes: the outer section element is more than likely establishing the sites desired document outline. if that is not the desired outcome then i agree with #james allardice, a div would be better there (especially since there is no headline for the outer section). if that is the desired outcome, then using the outer section establishes a generic section in the sites document outline, with its child elements nested inside, so that it can generate the appropriate document map. user agents can then use the document map to generate a table of contents, which can then be used by at's.
you can test a documents outline here: http://gsnedders.html5.org/outliner/
This seems pretty semantic. A Web site's home page could be split into sections for an introduction, news items, contact information.
At the moment I don't think any weight is gained for HTML5 semantics with SEO, but in the future - it will probably be key.