03. HTML Skeleton

The first step in making our website is adding the skeleton for our index page. The template already includes links to our style sheet and JavaScript file and so we can now focus on creating the necessary HTML skeleton.

Add the following code in place of the “empty page” text from the “index.html” file you downloaded in the previous step:

<div class="container">
  <header class="site-header">site header</header>
  <nav>site menu</nav>
  <section>
    <header class="page-header">page header</header>
    <article>page content</article>
  </section>
  <footer>site footer</footer>
</div>

You may have noticed that these nine lines include words that mimic the structure of our plan we created back here. In the process of building this we’ve encountered a fair amount of new HTML.

<div>
The “div” tag is a really useful one when it comes to style sheets. While it has plenty of functions as a HTML tag, when it comes to CSS it is often used as a means of “wrapping” other tags within it. For now, just take note that this “div” tag is “wrapping” everything else on the page.

class
The “class” attribute is one of the more important ones in regard to using style sheets with HTML. Rather than explain it in depth right now, just notice that the “class” attribute included inside our “div” tag is providing a name (“container“) that we can refer to later.

<header>
The “header” tag is new to HTML5 and makes it easier to organise sections of your page. You might notice we’ve included two instances of this tag. I actually want each of these instances to eventually look different, so to allow myself the ability to differentiate them I’ve included the “class” attribute again.

<nav>
This is another new addition to HTML5 and simply allows us to state that the contents of this tag are related to navigation. This will help us when it comes time to style our page.

<section>
This tag is being used as a structural container. You might notice it has a “header” tag and “article” tag within it. This means that “section” is acting as a “wrapping” tag that we can refer to, thus allowing us to make changes that affect two tags at once. This is a very common styling technique that you will no doubt encounter and eventually use often.

<article>, <footer>
These are both, once again, new to HTML5 and just continue to describe page layout components. They simply allow us to split up our page into logical partitions that style sheets can reference easily and people viewing the source can recognise more easily.

The net effect of putting all those tags around the different sections of our page is not overly evident just yet, but once we start tinkering with our style sheet the benefits of good planning and early structuring will become obvious.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>