A good HTML skeleton_问答_开发者_运维开发者技术经验分享

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&开发者_Go百科lt;/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>

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

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.

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>

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.

<!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>

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.