45

I want to start creating websites again, but I've been out of the HTML scene for a while now. I was just wondering if this is a good skeleton for a website. And if not, what should I change, add and/or remove?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <rel="stylesheet" type="text/css" href="css/main.css" />
        <meta http-equiv="content-type" content="text/php; charset=utf-8" />

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
        </div>

    </body>

    <footer>
        <div class="Footer">
            <b>Copyright - 2010</b>
        </div>
    </footer>
</html>
Nick
  • 1,082
  • 1
  • 15
  • 27

6 Answers6

46

Try www.htmlshell.com, you can get a basic skeleton there, with optional includes for things like jQuery or favicons, etc.

Steve Niles
  • 822
  • 10
  • 15
  • Cool site. I'm not sure if the "Autorun JavaScript" is cross-browser. (If you didn't notice, this question is about two years old.) – Brigand Dec 23 '11 at 02:35
  • This site looked good but unfortunately they put the "script" tags inside the body.. – Yann Sagon Jul 26 '12 at 14:24
  • 1
    @YannSagon The script tags were put in the body on purpose. It is commonly recommended in order to speed up page rendering. See [here](http://developer.yahoo.com/performance/rules.html#js_bottom) for more info. – Steve Niles Dec 03 '12 at 21:56
15

I've been starting with HTML5 Boilerplate... it helps make sure that everything is the most consistent across the various browsers and already takes into account the majority of the stuff I'll need later.

FatherStorm
  • 7,133
  • 1
  • 21
  • 27
  • Thanks alot, it looks really good, and I'm sure I will use it. Unfortunatly I want to create my own site from scratch, so I cant mark this as an answer. But thank you either way. – Nick Nov 09 '10 at 13:23
  • 2
    Wow, this thing is _huge_. Looks rather overkill in my eyes. Sounds interesting, though. – jwueller Nov 09 '10 at 13:26
  • 1
    That's true. The code on the page itself hurt my eyes. I just hope the actual code looks better. – Nick Nov 09 '10 at 13:27
6

tl;dr

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h1>Example <!-- site name --></h1>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

An HTML5 skeleton could look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(Note that this is not the most minimal HTML5 document, so many parts are optional.)

If you are using a different encoding than UTF-8, change the value of the meta-charset accordingly.

If you are using a different content language than English, change the value of the lang attribute accordingly.

If you want to explicitly specify the text directionality, use the dir attribute on the html element, e.g.: <html dir="ltr" lang="en">

Common link/meta elements to add to the head

  • Linking to a stylesheet (text/css is assumed by default):

      <link rel="stylesheet" href="/default.css">

  • Linking to a favicon:

      <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • Specifying the canonical URL of the document:

      <link rel="canonical" href="http://example.com/">

  • Providing a description of the page’s content:

      <meta name="description" content="…">

Elements for the body

As each page is different, this can‘t be answered generally, so it might be best to leave the body empty.

However, most pages probably are part of a website, and most websites probably have a site-wide header (→ header) with site name (→ h1), footer (→ footer) and navigation menu (→ nav). These should belong to the body sectioning root (i.e., have no other sectioning content element as parent). The nav may or may not be part of the header.
The main content (→ main) may or may not consist of a sectioning element (usually article or section, or multiple of them).

<header>
  <!-- site-wide header -->
  <h1>Example <!-- site name --></h1>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
3

There is nothing like a <footer> element in XHTML 1.0 Transitional. You should do it like this:

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

I like to use a strict doctype in my projects, but yours works, too.

jwueller
  • 30,582
  • 4
  • 66
  • 70
  • Wait, are you sure there isn't? Sorry about that, I was looking around on google and thought there was. (http://www.quackit.com/html_5/tags/html_footer_tag.cfm) – Nick Nov 09 '10 at 13:19
  • 7
    @Nick: Obviously, this tag is included in HTML 5, but you are using XHTML 1.0 Transitional. And even if you could use it, it would still be required to put it into the ``. All visible elements need to be placed there. – jwueller Nov 09 '10 at 13:21
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main/css.css">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
            <div class="Footer">
                Copyright - 2010
            </div>
        </div>
    </body>
</html>
2371
  • 957
  • 1
  • 6
  • 19
1

The W3C DOM Level 1 Core is a good place to start:

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch.

From there you can add any option (<html lang="en">, <meta charset="utf-8">, etc.), element (link,main, nav, div, footer, etc.) or library dependency (jQuery, Bootstrap, etc.), based on your needs and preferences.

Elan
  • 539
  • 1
  • 6
  • 18