Displaying additional information by using anchor link with CSS

Question

HTML:

<article>
  <h1>First Heading</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, suscipit, itaque. Cumque asperiores vel quae necessitatibus eos? Sequi odit dolores placeat voluptatibus ea, beatae, praesentium quod deserunt hic enim veniam.</p><br>

  <a href="#sectionTwo">Read more...</a>

  <article id="sectionTwo">
    <h1>Second Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem fugiat libero molestiae, eaque adipisci sit qui odit assumenda voluptas laborum veniam ut animi ratione natus, deleniti, facere iste ea necessitatibus?</p>
  </article>

</article>

CSS:

#sectionTwo {
  display: none;
}
#sectionTwo:target {
  display: block;
}

Why is the second h1 is smaller than the first one, aren't they should be the same in weight - equally rendered as pure h1 tags, each for its own article?

Thank you Mr Lister, but does this mean it has a meaning as the `h2` tag? — hooraianz, Oct 15 '17 at 11:12
To the body, yes, more of less. The articles are stand-alone parts of the document that rank lower than the document as a whole. But not within the confines of the article, of course. In there you have the H1 on top and any h2's in places where you would expect them. — Mr Lister, Oct 15 '17 at 11:19
Asking for SEO advice is off-topic on Stack Overflow (such questions can be asked on [webmasters.se]), so I suggest to [edit] it out. — unor, Oct 16 '17 at 00:02

Mr Lister · Answer 1 · 2017-10-15T11:24:51.217

0

A h1 inside an article is treated as a sub-header and is displayed at a smaller than normal size. In your example, the second h1 is inside a nested article, so it's even snaller than that.

The first h1 is also smaller than one directly in the body would be. Example:

<h1>Top Heading</h1>

<article>
  <h1>First Heading</h1>

  <article id="sectionTwo">
    <h1>Second Heading</h1>
  </article>

</article>

As to your second question: no idea. Any reason to suspect it might not work optimally?
I often find pages with Google that don't have the information I was looking for at first visit, which is hidden behind "read more" links.

edited Oct 15 '17 at 11:24

answered Oct 15 '17 at 11:15

Mr Lister

45,515
15
108
150

Thanks. Yes, I suspect the `display: none` might be interpreted by some engines as something to ignore. Therefore I need to be sure they can follow the anchor link and implement relevant CSS coding(`display: block`) to the targeted element(the one that has the `display: none`) – hooraianz Oct 15 '17 at 11:23
I just added a comment to my answer, but I'm by no means a SEO expert, so you may have to wait for another answerer to address that. – Mr Lister Oct 15 '17 at 11:26
Alrighty then, I'll wait and hopefully someone could address this question with good understanding, as you did for my first question. Thank you :) – hooraianz Oct 15 '17 at 11:43

Displaying additional information by using anchor link with CSS

1 Answers1