HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のnavタグとは？ナビゲーションリンク専用セクションの作り方と実装例

HTML5の<nav>タグは、ページ内の主要なナビゲーションリンクだけをまとめたセクションを定義するための要素です。サイトのグローバルメニューやカテゴリへのリンク集など、ユーザーがページ間を移動するためのリンク群をマークアップする際に使用します。

<nav>タグを使うことで、検索エンジンやスクリーンリーダーなどの支援技術が「この部分はナビゲーションである」と認識しやすくなり、SEOやアクセシビリティの面でもメリットがあります。

navタグの基本的な使い方

以下のコードは、データベース関連チュートリアルへのナビゲーションメニューを<nav>タグで実装した例です。実際にブラウザで動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Nav Tag</title>
  </head>
  <body>
    <p>データベースチュートリアル：</p>
    <nav>
      <a href = "dbms/index.htm">DBMS</a> |
      <a href = "mongodb/index.htm">MongoDB</a> |
      <a href = "mysql/index.htm">MySQL</a> |
      <a href = "plsql/index.htm">PL/SQL</a> |
      <a href = "sql/index.htm">SQL</a>
    </nav>
  </body>
</html>

使用時のポイント

  • すべてのリンクを<nav>で囲む必要はなく、主要なナビゲーションブロックのみに使用します。
  • フッターの利用規約やプライバシーポリシーへのリンクなど、補足的なリンクには<footer>内に直接記述する方が適切な場合があります。
  • 1つのページに複数の<nav>要素を配置することも可能です（例：グローバルナビとパンくずリスト）。

このコードを実行すると、DBMS、MongoDB、MySQL、PL/SQL、SQLの各チュートリアルページへ移動できるナビゲーションメニューが表示されます。HTML5のセマンティック要素を活用して、構造的により分かりやすいWebページを作成しましょう。

  1. HTMLの入力ボックスで数値のみを受け付けるようにする方法

    HTMLの入力ボックスで数値入力のみを受け付けるようにするには、<input type=number> を使用します。このタイプを指定することで、ブラウザは数値専用の入力フィールドを自動的に生成し、ユーザーがテキストや記号を入力できないよう制御できます。入力ボックスを数値に制限した状態で、ユーザーが文字列を入力して送信ボタンを押すと、ブラウザの標準バリデーションによって「数値を入力してください。」というエラーメッセージが表示され、フォームの送信が阻止されます。実装例以下のコードを実行すると、1から20までの数値のみを受け付ける入力ボックスを作成できます。<!DOCTYPE h

  2. 【解決済み】「このブックには、安全でない可能性のある1つ以上の外部ソースへのリンクが含まれています」エラーの直し方

    本記事では、Excelを開いた際に表示される「このブックには、安全でない可能性のある1つ以上の外部ソースへのリンクが含まれています」というエラーメッセージを解消する方法を詳しく解説します。ワークブック内のセルが、別のワークブックのセルを参照している場合、そのファイルを開くたびにこの警告メッセージが表示されることがあります。 エラーを解消する3つの方法 ここでは、上記のエラーを解決するための3つの異なる方法をご紹介します。どの方法も同じデータセット(他のワークブックへの外部リンクを含む書店の売上データ)を使用して説明するので、違いを比較しながら理解しやすくなっています。 方法1: リンクを自動更