Unclosed <h1> leads to empty heading line in V5 CoolMax

[bcgrossm]

Background: We're currently setting up V5 CoolMax to make our online help more accessible.

This test was double-checked with the HuM demo project, Premium Pack 5.2 and the template V5 Coolmax Webhelp.
(After seeing it first in my own project.)

a) Result in HTML code for the header section:

<td id="topicheadercell">
<div id="topicheaderwrapper">
<p id="ptopic_breadcrumbs" class="topic_breadcrumbs">Navigation: <a href="hm_quickstart_explorer.html">Using the Project Explorer</a></p>
<h1 class="topictitle" title="Navigating in the Project Explorer">Navigating in the Project Explorer<h1>
</div>
</td>

The h1 tag is not correctly closed in the end of "Navigating in the Project Explorer<h1>".

b) In the rendering in the browser this leads to a closed h1 tag (good) plus an extra line of
<h1> </h1> (not so good), as visible in the dev tools.

<td id="topicheadercell">
<div id="topicheaderwrapper">
<p id="ptopic_breadcrumbs" class="topic_breadcrumbs">Navigation: <a href="hm_quickstart_explorer.html">Using the Project Explorer</a></p>
<h1 class="topictitle" title="Navigating in the Project Explorer">Navigating in the Project Explorer</h1>
<h1> </h1>
</div>
</td>

c) This then leads to an error in accessibility checkers for "empty headline" / "missing H1" or alike.

Counterchecks:
if the </h1> is fixed in the HTML code, the empty <h1> </h1> does not appear in the browser.
The theme V5 Modern FlexKeyboard does not have that problem. There, </h1> is closed correctly.

I assume the not-closed <h1> results from the file "hm_webhelp.js", but I couldn't fix it myself. A solution would be great

All the best, Birgit

[Tim Green]

Hi Birgit,

Thanks for reporting this. This is a simple typo in the source code of the template that didn't get found because current browsers are so forgiving of errors like this. You can fix it with a simple edit. Open the .hmskin file in Toolbox (make sure you have configured your code editor in Preferences first). Select the Page Template button to open the page template in your editor and locate this block of code:

Code: Select all

<td id="topicheadercell">
		  <div id="topicheaderwrapper"><IF_VAR[OPT_BREADOFF=false]>
		  <p id="ptopic_breadcrumbs" class="topic_breadcrumbs"><%BREAD_LABEL%> <IF_TOPIC_BREADCRUMBS><%TOPIC_BREADCRUMBS%></IF_TOPIC_BREADCRUMBS><IFNOT_TOPIC_BREADCRUMBS><span>&raquo;&nbsp;<%BREAD_NOTOPIC%>&nbsp;&laquo;</span></IFNOT_TOPIC_BREADCRUMBS></p></IF_VAR[OPT_BREADOFF=false]><IFNOT_VAR[OPT_HDFORMAT=true]> 
		  <h1 class="topictitle" title="<%TOPIC_HEADER_TEXT%>"><IF_TOPIC_HEADER><%TOPIC_HEADER_TEXT%></IF_TOPIC_HEADER><IFNOT_TOPIC_HEADER><%TOPIC_TITLE%></IFNOT_TOPIC_HEADER><h1></IFNOT_VAR[OPT_HDFORMAT=true]><IF_VAR[OPT_HDFORMAT=true]>
		  <span class="hdFormat"><IF_TOPIC_HEADER><%TOPIC_HEADER%></IF_TOPIC_HEADER><IFNOT_TOPIC_HEADER><h1 class="p_Heading1" style="page-break-after: avoid;"><span class="f_Heading1"><%TOPIC_TITLE%></span></h1></IFNOT_TOPIC_HEADER></span></IF_VAR[OPT_HDFORMAT=true]>
		  </div>
		</td>

The missing slash is in the closing h1 tag here:

<h1 class="topictitle" title="<%TOPIC_HEADER_TEXT%>"><IF_TOPIC_HEADER><%TOPIC_HEADER_TEXT%></IF_TOPIC_HEADER><IFNOT_TOPIC_HEADER><%TOPIC_TITLE%></IFNOT_TOPIC_HEADER><h1>

If you correct that and save it will fix the problem. We'll add this in a slipfix to the release version as soon as possible. Thanks again!

[bcgrossm]

Thanks so much, this solved my problem and I learned some more about the Toolbox.

Birgit