html - Is changing default display property a good practice?

Question

TL;DR Is it a bad practice to change default display property in my CSS?

Issue

Recently, in our project we had to position 2 header tags so they would look like one. They had the same font size and similar styling so the only issue was how to place one next to another. We had 2 different ideas on that and it le do a discussion on whether or not is a good practice to change default display property

So, our very basic code

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

The outcome we would like to have:

Header: my header

Note: The code needs to consists of 2 different headings because on mobile version we want to display them in in separate lines (so leaving default display: block).

Approach #1: Use display: inline

This is pretty stright forward. Block elements became inline so they are positioned in the same line. The disadvantage of this approach is that default display properties of both h1 and h2 were changed.

Approach #2: Use float

H1 can be positioned on the left using float: left property. This approach leaves the default display property intact, but will requires some hacks if the .container is not long enough to fit both headers in single line.

The question

It all leads to a simple question: Is it a bad practice to change the default display property of HTML elements? Is it breaking the standard and should be avoided if possible? Or is it our bread and butter and it does not really matter, as long as code is semantically correct (so headers are placed in h1, articles are placed in article etc...)

Answer 1

Answering your main question:

tl;dr is it a bad practice to change default display property in my CSS?

NO

---

WHY?

A: Because it is all about semantics

Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

These definitions allow HTML processors, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered.

---

So, in your case if you really need to have 2 headings semantically then you can change their styles, including the display property.

However If you don't need to have 2 headings semantically, but only for purely cosmetics/design (responsive code), then you are doing it incorrectly.

Look at this example:

<h1>Welcome to my page</h1>
<p>I like cars and lorries and have a big Jeep!</p>
<h2>Where I live</h2>
<p>I live in a small hut on a mountain!</p>

Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold.

This example has focused on headings, but the same principle applies to all of the semantics in HTML.

** Emphasis in the quote above is mine **

P.S - Remember that headings h1–h6 must not be used to markup subheadings (or subtitles), unless they are supposed to be the heading for a new section or subsection.

---

With all this above in mind, here is a few (good) approaches:

If you're doing the two headings purely for design then:

• add a span inside of the h1, using a media query either using mobile first approach (min-width) or the non-mobile approach (max-width).

PROs - easily manageable through CSS, changing only properties.

CONs - adding extra HTML markup, using media queries as well.

h1 {
  /* demo only */
  background: red;
  margin:0
}
@media (max-width: 640px) {
  span {
    display: block
  }
}

<div class="container">
  <h1>Header:<span> my header</span></h1>
</div>