Jump to content


This topic is now archived and is closed to further replies.


Problems with Elements

Recommended Posts


Currently, the main heading for an element is automatically wrapped with a <h1> tag.

That's okay if the content its wrapping around is, in fact, meant to be the main heading for the page.

But I suspect there may be people who will already have a heading on the page wrapped with <h1> tags, so that's going to create a bit of a semantic issue (theoretically, from what I understand about HTML5 spec, it is possible to have more than one <h1> tag on a page, but you really need to know what you're doing).

So I think that designers should have the option to select that tag for each text part that makes up an element.

Additionally, if the main heading of an element is being used as the <h1> heading for a page, if designers are able to select the tag, then it should automatically wrap the <h1> tag with <header> tags (and maybe even the appropriate classes - e.g., entry-heading, entry-title).

When you look at the other text parts that make up an element, you see that the subheading is automatically wrapped in a <h3> tag.

If the main heading tag is a <h1> tag (as it is at present) then, logically/semantically, the subheading should be wrapped in <h2> tags or <p> tags (perhaps it could be set conditionally - depending on designer selection of main heading).

Further, the subheading <h3> tag actually wraps around <p> tags that contain the subheading content.

That makes no sense whatsoever.

Finally when you specify a tag in the paragraph textbox of an element, it doesn't actually that tag as HTML. Instead, it adds a class - using the specified tag (e.g., class="h2") to a span.

That also does not make sense.

Share this post

Link to post
Share on other sites

My opinion is that cluttering things up with needless semantic edits is a bad idea for usability and maintenance.

Google is very good at figuring out semantic hierarchy these days; however, if you have something from them (or any other legit resource) about this i'd be happy to read it and implement accordingly.

Share this post

Link to post
Share on other sites

Just reread HTML5 specs and can say that, since the <h1> appears within sectioning content, it's actually okay/good to use multiple <h1> tags on the same page (same with sectioning root).

But it's still not okay/good to follow a <h1> with a <h3> tag or wrap a line of content with <p> tags and <h3> tags - e.g.,

<h3 class="elements-subheader" data-bind="plshortcode: subheader"><p>...</p>

That messes up the outline, which obviously isn't good for screen readers, and sends mixed signals to search engine spiders.

Nor is it okay/good to apply what appears to be <h1> through <h4> tags or <p> tags to content when, in fact, you are actually applying nothing more than a span with a class named h1, h2, h3, h4, or p.

Share this post

Link to post
Share on other sites

Anything happening with this?

Forget about semantics (although we are talking language), this is just bad practice.

Share this post

Link to post
Share on other sites

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
      page for reference is https://www.avangocouriers.co.uk
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
    • SaschaM
      By SaschaM+
      From a SEO perspective the PL5 Plugins: Elements and Impulse are producing site struture problems with the h1-hX tags and i dont make a designer very happy, cause the problems can not resolved easy way.
      1. Impulse
      If you add item slide headers its rendered as graphic text - not readable by searchengines. result is an empty h2. second impulse is most times one of first element on the site. the h2 tag to be first is wrong. it must be h1.
      in order to fix it i have to place an h1 text elements before impulse - which destroys my beautifull layout.
      2. Elements
      For Layout reason the PL5 plugin generates h1 and a h3 headline in order to style the layout (as you know headline elements should not be used for styling). This is also not correct, cause from seo perspective only one h1 ist recommended on page. With placing callouts and heros in the content you have an additional h1, which indicates wrong content to searchengines. h1 is on a correct SEO website one of the first elements.
      in my case i use different callouts and heros sometimes 2 or more on a side and than i have to all this h1-h3 structure problems
      For Elements i build now a SPAN solution with shortcodes to replace elements callout, but this is also not perfect. is there a way to modify the headlines 1) by a functions add_filter 2). modify the plugin source code in a child theme?
      would be nice if we can have a dicussion on it...or somebody has a solution for this problem....i am trying now for some days finding a solution maybe i am blind but not stupid.
    • John Olsson
      By John Olsson+
      Hello, how do I show tags in WP-content-section... or what am I missing out? 
    • Dana
      By Dana+
      Hi DMS team,
      Please help out on how to add Post tags to the bottom of each post. Tried looking at the hooks tutorials but not sure what to do here.
      Thanks a lot.