Getting Safari to recognize HTML 5

Safari versions prior to 7.0 don't recognize HTML5 semantic elements like <main>, <section>, <article>, and <header>. These elements are treated as inline by default, which can break your layout.

The Problem

In older Safari browsers, HTML5 elements don't have default block-level styling, causing layout issues when you expect them to behave like <div> elements.

Solution: CSS Display Block

The key is to explicitly set display: block for HTML5 semantic elements:

main {
    display: block;
    width: 800px;
    height: 800px;
    background-color: #0C0;
}

The critical part for Safari compatibility is:

main {
    display: block;
}

Complete HTML5 Elements Fix

For full HTML5 support in older Safari, apply display: block to all semantic elements:

main, section, article, header, footer, nav, aside, figure {
    display: block;
}

Browser Compatibility

Alternative: HTML5 Shiv

For comprehensive HTML5 support in legacy browsers, you can use the HTML5 Shiv library:

<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<![endif]-->

Conclusion

Adding display: block to HTML5 semantic elements ensures proper rendering in older Safari browsers. Modern Safari versions handle HTML5 elements correctly without additional CSS.