Invalid HTML: Horizontal Rule (<hr>) inside paragraph (<p>)

Created on 21 March 2024, 3 months ago
Updated 18 April 2024, 2 months ago

Problem/Motivation

On some occasions webform renders a HR tag inside a P tag: <p><hr/></p>.

The opening tag on a block-level element (the <hr>) will close the <p> element.
Most browsers silently insert the closing </p>, thus making it:

<p></p>
<hr>
<p></p>

It looks correct but throws errors when validating the HTML.

This happens for example on the status page for "Webform: Spam protection: Webform Spam protection module installed".

I found several occurences:

webform/src/Form/WebformConfigEntityDeleteFormBase.php:152:      $form['hr'] = ['#markup' => '<p><hr/></p>'];
webform/src/Form/WebformDeleteFormBase.php:47:      $form['hr'] = ['#markup' => '<p><hr/></p>'];
webform/src/Form/WebformDeleteMultipleFormBase.php:50:      '#suffix' => '<p><hr/></p>',
webform/src/Form/WebformDeleteMultipleFormBase.php:53:    $form['hr'] = ['#markup' => '<p><hr/></p>'];
webform/src/WebformLibrariesManager.php:110:      '#prefix' => '<p><hr/></p><dl>',
webform/src/WebformSubmissionListBuilder.php:631:      '#suffix' => '</div>' . ($this->submissionView ? '<p><hr/></p>' : ''),
webform/includes/webform.install.requirements.inc:199:      '#prefix' => '<p><hr/></p><dl>',
webform/includes/webform.install.requirements.inc:203:      '#prefix' => '<p><hr/></p><dl>',
webform/modules/webform_cards/src/Form/WebformCardsConvertForm.php:41:    $form['hr'] = ['#markup' => '<p><hr/></p>'];

Steps to reproduce

  • Enable requirements.spam in webform.settings
  • enable module honeypot (to get something shown)
  • goto the drupal status page
  • Validate the resulting HTML after "Webform Spam protection module installed" (or inspect it with browser tools)

Proposed resolution

Replace the occurences listed above with either

  • Plain <hr> (but leaving out the <p> can look differently depending on your style, i.e. missing margin
  • Explicilty use <p></p><hr><p></p> - this will keep the look and feel because browsers silently insert the closing and opening <p> anyway

Remaining tasks

Decide what to use instead and apply the changes.

User interface changes

See Proposed resolution

API changes

None.

Data model changes

None.

πŸ› Bug report
Status

Fixed

Version

6.2

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany gngn

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.69.0 2024