Add a visual break between <h2> and <h3> content topics

Report · Oct 13, 2015

On a topic page, I have references in my H2 elements pointing to H3 level items to serve as a sort of TOC within the topic page:

<h1>Installation</h1>

<h2><a href="#Windows">Windows</a></h2>

<h2><a href="#Android">Android</a></h2>

<h3><a name="Windows">Windows</a><h3>

<h3><a name="Android">Android</a><h3>

Obviously, it's over-simplified here for demonstration purposes, but in essence, the end user that looks at the public facing help files can click on the Heading 2 element, and it will automatically scroll down in the page to that particular OS installation instructions.

My problem is that the first H2 element is visible after the H2 elements and could confuse end users...

I'd like to find a way to sort of offset that with a line break of sorts:

_______

I am outputting to responsive HTML5, so would like this to scale to the device type (desktop, laptop, tablet, smartphone, etc.). That means inserting a fixed number of characters in the line break would have varied results depending on the device type. Is there a way to tinker with the HTML in the topic page to insert a line break that would accomplish this? I should also note that I don't want to use the <br /> tag as that's just white space....I want an actual line that respects HTML5 responsive design. Make senes?

Report · Oct 13, 2015

First, have a look at the Topic Toc placeholder. This will build a little table of contents inside a topic based on the headings in the topic and potentially save you having to update the list manually as the OS list changes. The interface for customising things isn't the best, but if you play around a bit you should get the idea (and you can post to the forums for more help if you get stuck).

If the Topic Toc placeholder won't work for you, I would recommend not using H2 as the style for your list of links as these are not technically headings. I would recommend using p tags and then the actual headings would be H2 (or H3 if that style suits better). You can apply a class to the p tag to get it looking as you want (although I would recommend making sure the style is distinct from your heading styles.)

<h1>Installation</h1>

<p><a href="#Windows">Windows</a></p>

<p><a href="#Android">Android</a></p>

<h2><a name="Windows">Windows</a><h2>

<h2><a name="Android">Android</a><h2>

For the horizontal line, you could use the Horizontal Line tag. In RH11 you can access this from the menu Insert > HTML > Horizontal Line. If you are in RH2015, I'm unsure where on the ribbon to access it, but if there is an "insert" tab, it's probably on that. As it's an HTML tag, you should be able to style it in your stylesheet, although I've never tried that. I also haven't tried using this in Responsive HTML, so have no idea what it would look like on different devices.

If the horizontal line doesn't work, perhaps you could apply a class to the last item in the list, which adds more padding/margin and a bottom border ?

Hope that helps with ideas.

Report · Oct 14, 2015

Thanks Amebr,

I appreciate your recommendations and subjective thoughts on usage of the a href and a name conventions for my stying, but that didn't really answer my question.

That said, your mention of a horizontal line gave me the right info to search for how to insert a horizontal line via HTML and the answer is to include an <hr> tag:

<body>

<hr>

</body>

So, thanks for indirectly answering my question 🙂

Adobe Community

Add a visual break between <h2> and <h3> content topics

1 Correct answer