CSS Reordering Is Your Secret Weapon
Want a visually stunning website without sacrificing SEO or accessibility? CSS reordering is your secret weapon. We'll show you how to maintain a correct HTML heading structure while visually placing elements exactly where you need them. No more compromises!
SEOHOW TO
Alex Dibble
3/10/20252 min read
Sometimes, design demands a visual layout that doesn't perfectly align with the ideal HTML structure. Take, for example, a hero carousel that needs to sit prominently at the top of a page, even though your main page title (H1) should technically come first for SEO and accessibility. That's where the magic of CSS reordering comes in. Let's explore how we can use CSS to visually shift elements around, ensuring a beautiful layout without sacrificing semantic correctness.
Below we provide a CSS example for visually reordering H1 and H2 elements:
Understanding Visual Reordering with CSS
The goal is to keep the correct semantic order in the HTML (H1 first) while visually displaying the H2 carousel above it. We'll achieve this using CSS properties like order in Flexbox or Grid.
Example Using Flexbox (Recommended for Simplicity):
HTML (Correct Semantic Order):
<div class="container">
<h1>Page Title</h1>
<div class="carousel">
<h2>Carousel Headline 1</h2>
<h2>Carousel Headline 2</h2>
</div>
<p>Page content...</p>
</div>
CSS (Visual Reordering):
.container {
display: flex;
flex-direction: column; /* Stack items vertically */
}
.carousel {
order: -1; /* Move carousel to the top */
}
h1 {
order: 1; /* Move h1 below the carousel */
}
/* Optional styling to make h1 and h2 look good */
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
.carousel h2 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 10px;
}
Explanation:
display: flex; flex-direction: column;: We make the container a Flexbox container and stack its children vertically.
carousel { order: -1; }: The order: -1 property moves the carousel to the top of the Flexbox container. Elements with lower order values appear earlier.
h1 { order: 1; }: The order: 1 property moves the h1 below the carousel. Elements with higher order values appear later.
Optional Styling: The rest of the CSS is for visual styling to make the headings look good.
Example Using Grid:
HTML
<div class="container-grid">
<h1>Page Title</h1>
<div class="carousel">
<h2>Carousel Headline 1</h2>
<h2>Carousel Headline 2</h2>
</div>
<p>Page content...</p>
</div>
CSS
.container-grid {
display: grid;
grid-template-rows: auto auto auto; /* 3 rows */
}
.carousel {
grid-row: 1; /* Place carousel in the first row */
}
h1 {
grid-row: 2; /* Place h1 in the second row */
}
/* Optional styling */
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
.carousel h2 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 10px;
}
Explanation:
display: grid; grid-template-rows: auto auto auto;: We turn the container into a Grid container with three rows.
carousel { grid-row: 1; }: We place the carousel in the first row of the grid.
h1 { grid-row: 2; }: We place the h1 in the second row of the grid.
Important Notes:
These CSS solutions visually reorder the elements. The underlying HTML structure remains correct, which is crucial for SEO and accessibility.
Flexbox is generally simpler for this specific scenario. Grid is more powerful for complex layouts.
Make sure to test this on various browsers and devices to make sure it functions as expected.
If you are using a framework such as bootstrap, or tailwind, the framework may have its own methods of visually reordering elements.
Digital Kaizen Limited | UK Company Number: 11339386
© 2016 - 2025. All rights reserved.
