Layout: Attributes or Tags?

We used two methods to specify the CSS styling and create a magazine-like layout. The first way was with ID attributes and the second way was with HTML5 tags:

ID Attributes: HTML5 Tags:
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

  <div id="header">
    Header Data
  </div>



  <div id="nav">
    Nav Data
  </div>





  <div id="section">
    Section Data
  </div>


  <div id="footer">
    Footer Data
  </div> 		<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
section {
    width:350px;
    float:left;
    padding:10px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

  <header>
    Header Data
  </header>



  <nav>
    Nav Data
  </nav>





  <section>
    Section Data
  </section>


  <footer>
    Footer Data
  </footer>

It's all up to you, which way you want to do things. Both are valid methods.

Back button Table of Contents Next button