web-dev-qa-db-ja.com

優れたHTMLスケルトン

私は再びウェブサイトの作成を開始したいのですが、私はしばらくの間HTMLシーンから脱出しました。これがウェブサイトのスケルトンに適しているのかと思っていました。そうでない場合、何を変更、追加、削除する必要がありますか？

<!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>
htmlboilerplateskeleton-code
42
Nick

www.htmlshell.com を試してください。jQueryやfaviconsなどのオプションのインクルードを使用して、基本的なスケルトンを取得できます。

44
Steve Niles

HTML5 Boilerplate .. で始めました。さまざまなブラウザ間ですべてが最も一貫性があり、後で必要になるものの大部分をすでに考慮していることを確認するのに役立ちます。

16
FatherStorm

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>

HTML5スケルトンは次のようになります。

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

</body>
</html>

（これは 最小のHTML5文書 ではないため、多くの部分がオプションであることに注意してください。）

UTF-8とは異なるエンコードを使用している場合は、それに応じて meta-charset の値を変更します。

英語以外のコンテンツ言語を使用している場合は、それに応じて lang属性の値 を変更します。

テキストの方向性を明示的に指定する場合は、dir要素で html属性 を使用します。例：<html dir="ltr" lang="en">

linkに追加する一般的なmeta/head要素

  • スタイルシート （text/cssはデフォルトで想定されています）：

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

  • favicon ：へのリンク

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

  • ドキュメントの 正規URL を指定する：

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

  • ページのコンテンツの 説明 を提供する：

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

bodyの要素

各ページは異なるため、これには一般的に答えることができないため、bodyを空のままにしておくのが最善です。

ただし、ほとんどのページはおそらくWebサイトの一部であり、ほとんどのWebサイトにはおそらくサイト名のヘッダー（→header）があります（→h1）、フッター（→footer）、ナビゲーションメニュー（→nav）。これらはbodyセクショニングルートに属している必要があります（つまり、親として他のセクショニングコンテンツ要素がありません）。 navは、headerの一部である場合とそうでない場合があります。
メインコンテンツ（→main）は、セクショニング要素（通常はarticleまたはsection、またはそれらの複数）で構成されている場合とそうでない場合があります。

<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>
5
unor

XHTML 1.0 Transitionalには<footer>要素のようなものはありません。次のようにする必要があります。

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

私は自分のプロジェクトで厳格なDoctypeを使用するのが好きですが、あなたの作品も機能します。

3
jwueller
<!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>
1
2371

W3C DOM Level 1 Core は、開始するのに適した場所です。

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

W3C DOMレベル1を使用すると、コンテンツツリーを任意の方法で変更できますwant。 HTMLドキュメントを最初から作成するのに十分強力です。

そこから任意のオプション（<html lang="en">、<meta charset="utf-8">など）、要素（link、main、nav、div、footerなど）またはライブラリの依存関係（jQuery、Bootstrapなど）、ニーズと好みに基づいて。

1
Elan