Tools of the Trade

Lesson 10: Creating Layouts in HTML Using CSS

Since divs are effectively box containers that can be easily styled, they make excellent building blocks to design the layout of your website. Most websites have a header, navigation, content area and footer. Each of these sections can be individual div containers styled with CSS and the stuff inside them can be wrapped in more divs if it needs to be more granular.

Layout Using Divs

Below is the code for the basic HTML layout from the previous lesson, except this time I have added comments to help explain each key step.



Layout Using HTML5 Tags

HTML5 comes with new elements that defines different parts of a web page, particularly when it comes to establishing the layout. These new tags include header, nav, section, article, aside and footer.

Header and Footer

The header and footer tags are effectively div containers; one for the header or top portion of your website such as logo, slogan and menu and one for the footer or bottom portion of your website including copyright, disclosures, etc.

Sample HTML and CSS using the div element


<div class="header">Logo</div>


.header 
  {
    background: #333;
    color: #fff;
  }

Sample equivalent HTML and CSS using header element (footer works the same)


<header>Logo</header>


header 
  {
    background: #333;
    color: #fff;
  }

Nav

Nav stands for navigation and this is where your site menu links go. Sometimes you will see websites with the links inside an unordered list <ul>..</ul>, which is useful in creating mobile friendly websites.

Section, Article and Aside

The section element is used for generic document or application sections but should not be used as generic containers for strictly styling purposes—use divs for this. The article element is used for articles and blog posts. The aside element is your sidebar.

Sample Code

The code sample below achieves the same result in creating the layout in HTML except it uses HTML5 elements instead of divs.



Resources

W3 Schools HTML Layouts
http://www.w3schools.com/html/html_layout.asp

HTML5 UP! HTML5 layout skeleton code templates
http://html5up.net/

Recommend Next Things to Learn

I hope you found my HTML 101 course helpful, If you have enjoyed learning HTML, I recommend checking out responsive web design, JavaScript, jQuery, PHP and MySQL since these languages and technologies are right up the coding alley.