A good HTML skeleton

痴心易碎 提交于 2019-12-02 17:00:57

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.

unor

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!