How can I create a html template for a website built with HTML5 and CSS3?

Josh April 30, 2011

I’m learning HTML5 and CSS3, and I know you have to create a page ‘template’ for the main outskirts of the site, e.g. the header, footer and nav.

How can I do it? For example, when it’s the New Year, I want to change the copyright to that year, e.g. change copyright 2011 to 2012 easily, without having to go through each and every individual page, or add in another link to a new page easily

If you can provide links to tutorials and resources that would be awesome. Thanks :)

  1. Mike
    May 1, 2011 at 12:32 am

    The problem is that HTML5 still is a static language which means if your page consists of 5 html files you will have to change the footer in each of them.

    The only alternative would be to either use a frameset for the entire page or to use a single inline frame for the footer.

    Todays standard is to use PHP to include the different areas of the page.




    By using PHP you wouldn't have to do any changes yourself since it has functions which are able to report (output) the current year and will therefor adjust itself automatically.

    • Mike
      May 1, 2011 at 12:35 am

      Disqus stripped everything within the code-Tag, another try

      div with php include("header.php")
      div with your content
      div wiht php include("footer.php")

      • Josh
        May 1, 2011 at 3:56 am

        What about just normal HTML?

        • James Bruce
          May 4, 2011 at 11:47 am

          As Mike said, you can't do that with standard HTML. PHP is the language that makes pages dynamic (or Javascript, of course).

          The way your page would be designed is:

          HTML5 provides the SEMANTICS of the site - header, footer, sidebar, post content, asides, images

          CSS provides the STYLING and LAYOUT - fonts, position, size etc.

          PHP gives you DYNAMICS to pull content, possibly from xml files, or from a database, and to output that data how you wish it to be displayed.

          Showing the current year would be incredibly easy in PHP - you would just add a line of code - but you CANNOT do this in HTML, plain and simple. (iframes arent really acceptable)

    • Josh
      May 1, 2011 at 4:02 am

      Thanks Mike - tho that was an example. How can I use html or css to do it - such as putting in another link in the navigation if a new page is created, etc, I would like to stay away from php if i can. thanks )