Ionic markup language

I have markup like this.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="css/ionic.css" rel="stylesheet" />
</head>

<body>
    <div class="bar bar-header bar-light">
        <h1 class="title">Header</h1>
    </div>

    <ion-content>
        <h1>Header</h1>
    </ion-content>

    <div class="bar bar-footer">
        <div class="title">Title</div>
    </div>

</body>

</html>

Observed: ioc-content is hidden under bar-header. What i'm doing wrong?

You need to add the class "has_header"

<ion-content class="has-header">
    <h1>Header</h1>
</ion-content>

Correction you need to set it as:

<ion-content has-header="true">
    <h1>Header</h1>
</ion-content>