Is it ok to use H1 after H2 in HTML5? - html

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).

Related

Which heading level to use when position in document outline is unknowable?

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).

Can someone explain the correct usage of the h1 tag?

In html4 headings are what create structure, however in html5 structuring elements do, but this algorithm isn't supported yet, so the html4 way of creating structure is used currently. This is leading to some conflicting nuanced information on the h1, I'm hoping to get cleared up. From my understanding in html4 there should only be one h1 tag and it should represent the title tag of the page. However I have also heard you can have multiple h1 tags in html5 because they represent the structuring element, similar to how you can have multiple headers and footers on a page, is this true? If so when html5 structuring is supported does this mean html4 style heading structuring is no longer valid?
<section>
<article>
<header><h1>cats</h1></header>
</article>
<article>
<header><h1>dogs</h1></header>
</article>
</section>
Semantically, <h1> has always just meant the top level heading of a section.
Think about a blog post. You should use <h1> as the title of the post, and then every heading inside of the post should be a sub-heading.
But, you can still have multiple posts on the same page (i.e. an infinite-scroll website).
This is what your HTML5 code is defining. Just two articles on the one page. You have always been able to do this, and it is valid in both HTML5 and HTML4. There has never been a semantic restriction to the amount of <h1> tags you can have, as long as you use them correctly:
They should always represent the top-level heading of an article;
Don't nest <h1> tags;
Don't use them to define sections of content within an article that has a heading.
HTML4, having single h1 tag was typically used for structure. This is no longer true with HTML5. The structure is now Nav, Section, Article, Aside which means that within each root such as Nav or Section or Article or aside each of those may have a H1 element. Of course web crawlers that see multiple H1 tags within each root(nav, section, article, aside) may work against your SEO and may stylistically degrade your web page impact on the viewer/reader.

Is there an html tag for foreword

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

HGROUP element removed from the HTML5 Specification. What alternative technique can be used instead?

As some of you would of heard the hgroup element is being removed from the HTML5 Specification. (For more info, see the W3C HTML Working Group's decision on request to drop hgroup from HTML5 on the W3C's Public Mailing List archives.)
Now I'm currently working on the redesign of a site using this tag that creates a way of adding a sub heading.
My current thoughts are to just add another hX tag under the main header, but I'm not sure if this would be semantic enough to do so.
<h1>Darren Reay</h1>
<h2>A developing web developer</h2>
<p>Hello World</p>
Could anyone either come up with a alternative for using sub headers or at least point me in the right direction?
The HTML5 spec now includes advice on how to mark up Subheadings, subtitles, alternative titles and taglines
I would go with the alternative suggested by the W3C in the drop hgroup change proposal proposed by Lars Gunther and use header and paragraph.
Your example would look like this
<header>
<h1>Darren Reay</h1>
<p>A developing web developer</p>
</header>
I feel this reads correctly and semantically.
A couple of points to consider:
Even if the tag is removed from the HTML5 specification, it doesn't mean that it would stop working overnight. Browsers keep backwards compatibility for a long time (AFAIK most if not all browsers still render <font> correctly!)
Even if the browsers would drop support overnight, they'd still render the page correctly because I don't think the hgroup tag adds any inherent styling and (modern) browsers are very lenient in allowing tags they don't recognize.
I might be reading the question wrong, but between the lines it sounds like you've been misusing the hgroup tag anyway. (It's not allowed to contain anything other than header elements.)
I don't see any problem in either dropping the tags completely or replacing them with divs.
It's 2022 and I see hgroup is present in the spec:
https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
Looks like hgroup is acclaimed again, but that's kinda strange. It was in the spec, then it disappeared, and now it's back again...
On the other hand, https://validator.w3.org/ complains about the following code
<!DOCTYPE html>
<html lang="en">
<title>Title</title>
<hgroup>
<h2>Heading</h2>
<p>Subheading</p>
</hgroup>
</html>
Content model for element hgroup:
Zero or more p elements, followed by one h1, h2, h3, h4, h5, or h6 element, followed by zero or more p elements, optionally intermixed with script-supporting elements.
But it behaves like it's broken because there are exactly zero p elements, followed by one h2 element, followed by zero or more p elements.
And on top of that, MDN says hgroup is supported by every browser:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
At the same time MDN says to avoid using hgroup because it does not work properly with assistive technologies:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#heading_content
I'm posting an answer, but I can't stop myself from asking the question:
why there's such a mess with hgroup?
This is the technique that I currently use on my personal site to achieve the effect of having a heading with a sub-title:
<header>
<h1>
Jordan Clark
<small>Personal and Professional Website</small>
</h1>
</header>
(Then, of course, I simply use CSS to re-style the <small> element. I also personally believe that my technique is more semantically accurate than just using a paragraph -- and although I am no SEO expert, I am sure that by keeping the sub-title text within the h1 would give it higher value than a basic paragraph.)

Proper to use HTML 5 section element as content between header and footer?

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