HTML5 Structure

Build a strong website from scratch with seo4

All other styles should be inserted in the footer and even better loaded from their own document

SEO4 HTML5 Cleansheet

/*  SEO4  */
h1,h2,h3,h4,h5,h6, p, span{margin:0;}
.seo4body{background: #333; margin: auto; width:1000px;}
.seo4item{background: #ddd; margin: 5px; padding: 15px;}
.seo4header{}
  .seo4headline{font-size: 1.5em;}
  .seo4subheader{font-size: 1.4em;}
  .seo4synop{font-size: 1.3em;}
  .seo4pos{font-size: 1.2em;}
  .seo4showcase{font-size: 1.1em;}
.seo4content{}

/*  SECTIONS  */
.seo4row {clear: both;padding: 0px;margin: 0px;}
.seo4div:before, .group:after {display:table; }
.seo4div:before {content:"";}
.seo4div:after {clear:both;content:"";}
.seo4div { zoom:1; }
.seo4grid {display: block;float:left;margin: 1% 0 1% 1.6%;}
.seo4grid:first-child {margin-left: 0;}

/*  GRID  */
.seo4div_full {width: 100%;}
.seo4div_threequart {width: 74.6%;}
.seo4div_half, .seo4div_two {width: 49.2%;}
.seo4div_quart {width: 23.8%;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.seo4grid {  margin: 1% 0 1% 0%; }
	.seo4div_quart, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

SEO4 Html5 Structure

<!DOCTYPE HTML>	
<html>
<head>
  <title>SEO4 HTML5 RESPONSIVE GRID</title>
</head>
<body>
<div class="seo4body">

<div class="seo4row seo4div">
        <div class="seo4grid seo4div_quart">
          <div class="seo4item">
            <h1 class="seo4header seo4headline">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
        <div class="seo4grid seo4div_threequart">
          <div class="seo4item">
            <h1 class="seo4header seo4headline">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
</div>
<hr/>   
  
    <div class="seo4row seo4div">
        <div class="seo4grid seo4div_full">
          <div class="seo4item">
            <h1 class="seo4header seo4headline">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
  </div>
  <hr/>  
  
    <div class="seo4row seo4div">
        <div class="seo4grid seo4div_half">
          <div class="seo4item">
            <h2 class="seo4header seo4subheader">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
        <div class="seo4grid seo4div_half">
          <div class="seo4item">
            <h2 class="seo4header seo4subheader">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
  </div>
  <hr/>
  
    <div class="seo4row seo4div">
        <div class="seo4grid seo4div_quart">
          <div class="seo4item">
            <h4 class="seo4header seo4pos">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
        <div class="seo4grid seo4div_quart">
          <div class="seo4item">
            <h4 class="seo4header seo4pos">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
        <div class="seo4grid seo4div_quart">
          <div class="seo4item">
            <h4 class="seo4header seo4pos">Header</h4>
            <p class="seo4content">Content</p>
          </div>
        </div>
        <div class="seo4grid seo4div_quart">
          <div class="seo4item">
            <h4 class="seo4head seo4pos">Header</h4>
            <p class="seo4content">
              <ul>
                <li>ITEM</li>
                <li>ITEM</li>
                <li>ITEM</li>
              </ul>
            </p>
          </div>
        </div>
  </div>
  <hr/>
 
</div>
</body>
</html>