ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5セマンティックコードを使用してWebページを設計します

著者：Eve Cole 更新時間：2025-03-27 06:00:02

まず、ドキュメントタイプを宣言して作成したい場合は、public -// w3c // dtd xhtml 1.0の移行のようにHTML 4またはXHTML 1.0を使用しなくなりました。

  1.  <！doctypehtml>

見て、それはシンプルで明白で、ケースに依存しません。後方互換性を容易にすることができます。少なくとも、タイピングの時間を節約できます。

これで、HTML 5ドキュメントのタイプを定義しました。これまでのところすべてがうまくいきました。それでは、HTML5の新しいタグを見てみましょう。新しいタブを閲覧する前に、通常の書き方を見てみましょう。

  1.  <html>
  2.  <head>
  3.  ...他の...
  4.  </head>
  5.  <body>
  6.  <divid = header>
  7.  <h1> css3-html5 home </h1>
  8.  </div>
  9.  <divid = nav>
  10.  <ul>
  11.  <li>ホーム</li>
  12.  <li> </li>について
  13. <li>連絡先</li>
  14.  </ul>
  15.  </div>
  16.  <divid = content>
  17.  <h1>タイトル</h1>
  18.  <p> ... </p>
  19.  </div>
  20.  <divid = footer>
  21.  <p>著作権情報</p>
  22.  </div>
  23.  </body>
  24.  </html>

上記の例で<div>を使用することは、現在非常に一般的な慣行です。その目的は二重です。まず、Webページの章に特別に適用できる一意のIDIDを提供します。第二に、識別は原始的な疑似セマンチックな構造としてです。各WebサイトのID名は異なる場合があるため、これらのIDの意味を理解することは困難です。

<header>タグ：

<header>タグは、通常<div id = header>で定義するタグに相当します。あなたのウェブサイトがまだ<div id = header>でこのように定義されている場合、<header>に置き換えることができます。

<NAV>タグ：

<NAV>は、通常使用するのと同じように、ナビゲーションタグです。

<div id = menu>

<ul>

<li>インデックス</li>

<li>ニュース</li>

...

</ul>

</div>

<NAV>を使用してください：

  1.  <nav>
  2.  <ul>
  3.  <li> <Ahref = index.html> home </a> </li>
  4.  <li> <ahref =/about/about/about </a> </li>
  5.  <li> <ahref =/blog/> blog </a> </li>
  6.  </ul>
  7.  </nav>

<section>タグ：<section>タグは、通常は開始タグとエンドタグを備えたコンテンツグループまたはトピックグループのグループになります。もちろん、このタグもネストできます。

<portis>タグ：<porth>タグ内にコンテンツのセクションがあります。

<asas>

<footer>タグ：<footer>タグ、言わない場合は、これが何であるかを理解できます。また、通常はウェブサイトの下部に複数あります。

最後のコードを見てみましょう。

  1.  <！doctypehtml>
  2.  <html>
  3.  <head>
  4.  ...もの...
  5.  </head>
  6.  <body>
  7.  <ヘッダー>
  8.  <h1> mysite </h1>
  9.  </header>
  10.  <nav>
  11.  <ul>
  12.  <li>ホーム</li>
  13.  <li> </li>について
  14. <li>連絡先</li>
  15.  </ul>
  16.  </nav>
  17.  <section>
  18.  <h1> myarticle </h1>
  19.  <記事>
  20.  <p> ... </p>
  21.  </article>
  22.  </section>
  23.  <フッター>
  24.  <p> ... </p>
  25.  </footer>
  26.  </body>
  27.  </html>

コードを通して、それはより簡潔で理解しやすいですよね？

関連記事