You can use :before
or :after
HTML:
<header></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header:before{
content:'Header';
position:absolute;
top:-10px;
left:50px;
background:#fff;
padding:0 20px;
}
You can also use two elements:
header
and h1
html:
<header><h1>Header</h1></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header > h1{
position:absolute;
top:-35px;
left:50px;
background:#fff;
padding:0 20px;
}
Or keep it really simple and use fieldset
.
<fieldset>
<legend>Header</legend>
</fieldset>