Multiple H1 tags

RapidWeaver Classic General
1

Hey Guys

Joe Workman kindly referenced a very interesting article regarding the valid use of multiple H1 tags at the following location : https://www.weavers.space/news/the-truth-about-multiple-h1-tags-in-the-html5-era

The article however did not discuss how best to implement the guidelines in a Rapidweaver context so am curious if anybody can enlighten me as to how best to structure the use of multiple H1 tags within an ‘article’ tag using existing stacks (preferably BWD stacks)

2

Not sure what you’re asking?

The tutsplus article referenced gives examples In html:

Are you asking how to technically apply h1 tag in RapidWeaver? Or are you asking when to apply them?

3

Hi Doug

I am asking how to accomplish inserting the tags in order that I can then insert multiple

tags in the respective article sections within a page.

For example with BWD stacks it is quite easy to assign H tags but I cant locate any stack that provides the ability to insert

Thx in advance
Paul

4

Could you not just add each article within a Sections Pro (assigning it with the article tag) and then add whatever content you want within that?

1 Like
5

Hi Stuart

The concept you outlined would appear to satisfy the protocol but I’m not too sure how to assign tags to each Section Pro.

I guess I must be a “dumb blonde” (apologies to any female blonde RW’s out there in advance) but could you please advise how I can do this.

Thx

Paul

6

There’s a Structured Data group in the stack settings where you can apply this via the ‘Schema’ drop down. I think that should work anyway…Not at my RW machine at the minute

7

Stuart

Aha !! - there is indeed - I did not fully appreciate that this created an tag but thank you greatly for improving my understanding - hats off to you !!

Paul

8

Not actually 100% sure now that this does create a tag or whether it just marks it as an article via structured data…

9

I wonder if any other intrepid weaver will be able to confirm or otherwise ??

10

Exactly what Stuart (@habitualshaker) said.
Although you didn’t mention what theme you’re using. Some themes will use the site title for an h1 tag.

I would use caution applying multiple h1 tags on a single page. I’m not saying you can’t or shouldn’t, but don’t get carried away with it. The h1 semantic tag should be the main topic. If you have multiple “main topics” perhaps they need their own page.

I think of it as an old printed newspaper (if you’re old enough to remember them). Pickup a old copy of a Washington Post, there’s really only one main headline, that would be the h1 tag. Sub-headlines for other articles would be h2’s and sub-sub headlines h3’s maybe. Go to a different section like business or lifestyle (go to another webpage) and they would have another main headline (h1).

Don’t ever use headline semantic tags(h1-h6) should never be used to simply Apply styling.

1 Like
11

Another option might be using Scribe stack (if you use that). You should be able to manually add your html article tags at the top and bottom of that and then add your article content (using markdown) between these. I can check how both these suggestions work in practice when I get back to my computer.

Maybe @tav can recommend a better approach.

Edit: This suggestion (of course) doesn’t work as nothing between html tags gets processed as markdown!

12

Sections Pro creates a div with using the<section> tag, you don’t need to do anything else.

The schema markup is a completely separate subject - more details can be found at https://schema.org

So, in theory, you could mark up the page as per that article just by using header stacks inside sections stacks but I would echo @teefers comments. This is a valid approach but don’t do it for the sake of it. Only do it if you have a genuine use case where a page has repeating discrete sections of content. The most obvious use case is with a single page site.

2 Likes
13

Thank you @tav for the clarification and advises - much appreciated !!

Regards
Paul

14

In terms of “Poster stack” and its unique set-up would you Jannis @instacks have any comments as to whether using a Sections Pro and an H! Header stack in each of the blog posts would be a good or bad thing as referenced by Andrew.

I’m not 100% sure as to whether the use case with Poster would fit but I have a feeling it may very well.

Would be pleased to hear.

Regards
Paul

15

You already have the possibility to define the h tag for list and detail view separately.

Each post is already wrapped in an article tag.

If required, I could in addition wrap it into a sections tag in addition.

For RW editing and preview/publish performance reasons, just use the amount of stacks really required.

16

Hi Jannis

Thanks for your input.

Awesome to see you had already covered the tag issue - well done !!

Would there be an additional benefit of creating a tag also ?

17

I will double check this.

18

When you say tag which one are you talking about?
Each html element section, article, h1-h6 and more have specific semantic meanings.
If you’re asking should you wrap an article with section tags without anything else included in the section the answer would be no.

Could you have article(s) within a section? YES

Could you have section(s) within an article? YES

Here’s some quotes from the w3c.org specifications:

The article element

The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.
A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. Each article should be identified, typically by including a heading( h1 - h6 element) as a child of the article element.
w3c article tag

The section element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading ( h1 - h6 element) as a child of the section element.
Note
Authors are encouraged to use the article element instead of the section element when the content is complete, or self-contained, composition.
Note
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
w3c section tag

Although the w3c specifications can be difficult to navigate they are the agreed upon standards for web developers.

If you would like an easier to read interpretation of the specifications on the html semantic elements you might checkout:

2 Likes
19

I was just reading up on all of this too. As the info that @teefers provides suggests, there would be no need for Poster to add a <section> tag for each post (in addition to an <article> tag). An article tag is for sure the appropriate tag for Poster items. You may want to place the whole group of Poster items within section tags, but this could be done by placing the poster stack within Sections Pro. And if you want different sections in your Poster items/articles then, again, you could add some Sections Pros within the Poster Item content.

What makes sense to use will all depend on the content and context. I cannot really imagine that there are huge benefits to structuring your page to this degree though. The main thing is just laying out the text content logically and using the appropriate levels of header tags to structure/organise the content.

As a side note, I am not aware of a container stack that offers the option of using an article tag. Don’t know if that would be a worthwhile option in the likes of Sections Pro (i.e. to toggle between section or article).

2 Likes
20

Semantics in web pages may not seem important as they aren’t “seen” by most human readers. Over half of web traffic now is non-human (per Statista), including search engines, scrapers, spy’s and hackers.
So even though most of your human readers can’t see the semantics of a page it is very important to put some effort into organizing content and applying proper semantics tags.

Some of your human traffic using Assistive Technology (aka screen readers) rely heavily on proper semantics.