Opened 23 months ago

Closed 11 months ago

Last modified 10 months ago

#5102 closed defect (duplicate)

hr under heading is semantically incorrect on

Reported by: juliandoucette Assignee:
Priority: P4 Milestone:
Module: Websites Keywords: goodfirstbug
Cc: saroyanm, ire Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):




How to reproduce

See narrow border above and below many headings.

Observed behaviour

Border is implemented using <hr>

Expected behaviour

Border should be implemented using CSS


The <hr> element represents a paragraph-level thematic break.
-- w3 wiki

This narrow heading border is not meant to be a thematic break.

Change History (9)

comment:1 Changed 18 months ago by juliandoucette

  • Milestone cleanup deleted

comment:2 Changed 18 months ago by juliandoucette

  • Owner set to juliandoucette

comment:3 Changed 18 months ago by juliandoucette

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:4 Changed 16 months ago by juliandoucette

  • Status changed from reviewing to reopened

comment:5 Changed 13 months ago by juliandoucette

  • Owner juliandoucette deleted

comment:6 Changed 13 months ago by juliandoucette

  • Cc ire added
  • Owner set to juliandoucette
  • Review URL(s) modified (diff)

comment:7 Changed 13 months ago by juliandoucette

  • Owner juliandoucette deleted
  • Priority changed from P3 to P4

This is easy to fix, but:

  • There are many other minor issues attached that cannot be easily separated
  • This has no negative impact on our SEO or accessibility AFAICT

For that reason, I'm going to disown and de-prioritize this issue.

This may be a good first issue for a trainee. But I don't think we should spend our time on it unnecessarily.

Here is an example implementation (which assumes that we want to use both the hr element and a class applied to headings for a similar purpose):

  height: 3px;
  width: 24px;
  border: none;
  background-color: $primary-fg;

  margin-top: $sm;
  margin-bottom: $sm

.center hr 
  margin-left: auto;
  margin-right: auto;

.title { position: relative; }

  display: block;
  position: absolute;
  bottom: -35px;
  left: 0;
  content: "";

  @media (max-width: $mobile-breakpoint)
    bottom: -16px;

[dir="rtl"] .title::after
  left: auto;
  right: 0;

comment:8 Changed 11 months ago by juliandoucette

  • Resolution set to duplicate
  • Status changed from reopened to closed

comment:9 Changed 10 months ago by abpbot

A commit referencing this issue has landed:
Issue 5102 - Refactored h1 border bottom from hr to CSS

Note: See TracTickets for help on using tickets.