TL;DR Is it a bad practice to change default display
property in my CSS?
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
).
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.
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.
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...)
The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet.
The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline .
With display: block , elements are stacked one after each other, vertically, and every element takes up 100% of the page. The values assigned to the width and height properties are respected, if you set them, along with margin and padding .
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.
Answering your main question:
tl;dr is it a bad practice to change default
display
property in my CSS?
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 thelang
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:
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>
flexbox
layout.PROs - no need to add extra HTML markup or the use of media queries, being the most flexible currently in CSS (basically the cons from option above mentioned).
CONs - IE10 and below has partial or none support, Can I use flexbox ? (fallback for IE10 and below would be CSS TABLES)
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
/*demo only*/
background: red;
}
h1,
h2 {
/*demo only*/
margin: 0;
}
h2 {
/*640px will be flex-basis value - can be changed as prefered */
flex: 0 640px;
}
<div class="container">
<h1>Header:</h1>
<h2>my header</h2>
</div>
Sources:
tl;dr is it a bad practice to change default display property in my CSS?
No. As expressed by W3C themselves; HTML conveys meaning, not presentation.
As an HTML author, it's your job to structure a page so that every section of the page carries the intended semantics as described by the documentation, so that software (browsers, screen readers, robots...) can correctly interpret your content.
As a CSS author, it's your job to alter the default styling of correct markup to present it the way you want to. This includes changing the default display
properties just as much as changing the default color
.
Any software can, however, decide that certain usage of CSS properties changes the way they interpret your page. For instance, a search engine could decide that text that has the same color
as their parent's background
should carry no weight for their ranking system.
In regards to subheadings, it's considered incorrect to markup a subheading with an <hX>
element. What you should do is to decide on one <hX>
element, wrap it in a <header>
and wrap subheading-type text in <p>
, <span>
or similar.
The following is an example of proper subheadings, taken from the W3C documentation:
<header>
<h1>HTML 5.1 Nightly</h1>
<p>A vocabulary and associated APIs for HTML and XHTML</p>
<p>Editor's Draft 9 May 2013</p>
</header>
Note that there's a discrepancy between the W3C specification and the WHATWG specification where the latter uses the <hgroup>
element for this specific purpose, while the former has deprecated it. I personally go with W3C's example, but most software will still understand hgroup
, likely for many, many years to come, if you prefer the WHATWG approach. In fact, some argue that WHATWG should be followed over W3C when the specs differ.
In your particular example, however, I'm not sure why you chose to split the <h1>
into two elements in the first place. If what you marked up as an <h1>
is actually supposed to be a generic "label" for the heading, then it should probably be considered a subheading instead. If you need to split it for styling purposes, wrap the two parts of text in <span>
as such:
<h1>
<span>Header:</span>
<span>my header</span>
</h1>
tl;dr is it a bad practice to change default display property in my CSS?
Its a good practice but choose carefully when to use it because it can cause some critical structure mistakes.
The display
property is open for changes. It makes HTML simple and generic. HTML elements come with a default display
value that match the general behavior - what you would usually want. But they dont have to be kept and manipulated around to imitate another display
property. Think about <div>
for example. Obviously most of the times you want it to have display: block;
, but display: flex;
is much more suitable once in a while.
Lets look at a really common example of lists. <li>
comes with the display property of list-item
that breaks the lines for every new item.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
But horizontal lists are very common too. So why there is no special element for horizontal list items? Writing a special element for every common display
behavior adds complexity. Instead, the convention, as also suggested by W3C is to set the <li>
display property to inline
.
ul li {
display:inline;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
display: inline-block;
as an alternative to float
float
has been used massively in page layout for many years. The problem is that it wasnt created for this task and was originally designed to wrap text around elements. A well-known float
issue is that non floated elements dont recognize floated children because they are being removed from the normal flow of the document. You also cannot centrally float an element. you are limited to left or right floats only.
display
is much more suitable for layout many times. display: inline-block;
tells browsers to place that element inline, but to treat it as though it were a block level element. This means that we can use inline-block
instead of floats to have a series of elements side by side. It is more intuitive and eliminates floats <div class="clearfix"></div>
which is an additional non semantic element in your HTML.
Floats are useful when there is a need to float an element so that other page content flows around it. But there is no need to always press them into the service of a complicated layout.
display
When you change the display
property remember:
Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is.
<span>
test case:
In HTML early versions <span>
is considered an inline-level element and <div>
is block-level. Inline-level elements cannot have block-level elements inside them. Giving the <span>
a display:block;
doesn't change his category. It is still an inline-level element, and still cannot have <div>
inside.
HTML5 introduced content models. Each HTML element has a content model: a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model. <span>
can contain only phrasing content. It means that still you cannot nest a <div>
(flow content) inside a <span>
. Giving <span>
a display:block;
still doesn't change it.
Avoid:
span {
display:block;
}
<span>
<div>
Still Illegal!
</div>
<span>
In conclusion, changing the default display
property is certainly our bread and butter. Remember that it only changes how the element is displayed, NOT what kind of element it is and use it correctly.
Now about the original two heading issue:
With respect to the comments:
Let's assume for the sake of the question, that we need to have two headings. Or let's forget about the headings for the time being. - by the author
And also to the comment:
This question is not about resetting the display value globally. Using selectors to target only the specific elements is implied. The question is what we should do with these elements once selected. - by the person who set the bounty
Two headings side by side not only to handle mobile layout changes, can be done in many ways. The original example is simple and correct so its actually a good way.
h1, h2 {
display: inline;
}
<div class="container">
<h1>Header:</h1>
<h2>my header</h2>
</div>
It follows HTML rules and doesnt require any additional hacks.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With