[Resolved] HTML5 Tags

Home Forums Support [Resolved] HTML5 Tags

Home Forums Support HTML5 Tags

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2223345
    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.

    #2223477
    David
    Staff
    Customer Support

    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.

    #2226286
    Ammar

    Thanks for this.

    Really usefil explanation and links.

    Will see how I get along.

    🙂

    #2226391
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.