[Resolved] HTML5 Tags

[Ammar]

Hi all,

I need some assistance with setting up correct HTML5 tags in Generate Press.

Here is the HTML5 layout which I would like my blog articles to be like (and also some pages which I use for content).

Now, when I enter my post HTML5 I have a few problems. I’m not sure how GenerateBlocks etc work with this, or where I would need to put/change the HTML5 tags to correct.

1) Top Nav is not in the <header> HTML5 markup
2) Bottom Nav is not in the <footer> HTML5 Markup
3) On Post Page, h1 is not in the <main> and <article> HTML5 markup
4) I may want to add the <aside> tag outside of the <article> tag but within the <main> tag – how would I do this? This section would be for an email signup box or a discount code.

Hope the above is clear, but let me know if I need to clarify.

[David]

Hi there,

Just a quick note on HTML5 semnantics, the spec is continually evolving and the link you shared is a little out of date, it doesn’t mean its wrong but its not to latest spec. So ill outline how to make the changes with comments where i can.

1. You would need to change the Customizer > Layout > Primary Navigation -> Location to Float Right. This will place it inside the <header>

Latest spec: you can put the <nav> where you feel it’s most appropriate – there is no value add of it being in the <header>

2. Edit the Block Element you have for your Footer. Select the parent Container and change its Tag Name to Footer

3. The Block Element would need to be hooked into: generate_before_main_content

4. You would need to hook in your own Container blocks which can have the Tag Name set to <aside> using the same hook as #3. However if you want it displayed as a sidebar then you going to need to do some CSS working

… However see here regarding the aside element in the latest HTML Spec :

https://html.spec.whatwg.org/multipage/sections.html#the-aside-element

This part is of the most relevance:

Contexts in which this element can be used: Where sectioning content is expected.

<main> is not a sectioning element, whereas elements like body, article, section are.
So having it as a direct node of the <main> is kinda incorrect and would be no different to having it in the body where the context would be correct.

[Ammar]

Thanks for this.

Really usefil explanation and links.

Will see how I get along.

🙂

[David]

You’re welcome

[Author]

Posts