This type of header is valid. Now this title is set through the class to the heading H and then the text is framed by the em tag.
The specialist says that this kind of clean H (without class and em'ki) is unrealistic. It turns out only to make the underscore underlined (the side stripes in the center of the header below the header, because the top parameter is set to: 20px;)
Maybe some tool is still there? These are URLs with H1:
1. http://cx92311.tmweb.ru/obsledovanie-fundamentov-zdanij-i-sooruzhenij/
2. http://test.zlx.ru/obsledovanie-zdanij-i-sooruzheniy/obsledovanie-fundamentov-zdanij-i-sooruzhenij/

  • I did not understand anything, do I need to make bands on the sides of h1-h6? - user33274
  • Need to offer an option so that the bands and the “clean” h1 are separate? - MAX
  • It is necessary to offer such a variant of pure H1, which at the same time would give bands on the sides. - Pavel Prakhov

2 answers 2

html, body { margin: 0; } .head-wrap { position: relative; margin: 50px 0; display: flex; align-items: center; justify-content: center; } .head-wrap:before { content: ''; position: absolute; top: 20px; right: 0; width: 100vw; height: 1px; background: #000; } h1 { position: relative; display: inline; margin: 0; padding: 0 30px; font-style: italic; background: #fff; } 
 <div class="head-wrap"> <h1>Заголовок Заголовок</h1> </div> 

  html, body { margin: 0; } h1 { position: relative; margin: 50px 0; display: flex; justify-content: center; font-style: italic; &:after { content: ''; position: absolute; top: 20px; left: 0; width: 45vw; height: 1px; background: #000; } &:before { content: ''; position: absolute; top: 20px; right: 0; width: 45vw; height: 1px; background: #000; } } 

     #title { border:none; border-top:1px solid #ccc; margin:0; padding:0; } 
     <fieldset id = title> <legend><h1>Title</h1></legend> </fieldset>