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

HTMLの

HTMLの<nav>要素は、Webページ内にナビゲーションリンク（メニュー）をまとめて定義するために使用されるタグです。主要なページへのリンク集を意味的にグループ化することで、検索エンジンやスクリーンリーダーにも構造が伝わりやすくなります。このタグはHTML5で新たに導入されたセマンティック要素の一つです。

基本的な使い方

それでは、実際に<nav>タグを使ったサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<nav>
    <a href="/tutorialslibrary/">チュートリアル</a> |
    <a href="/programming_examples/">コード集</a> |
    <a href="/online_dev_tools/">ツール</a> |
    <a href="/articles/">記事</a> |
    <a href="/questions/index.php/">Q&A</a> |
    <a href="/current_affairs/index.htm/">最新情報</a>
</nav>
</body>
</html>

コードの解説

上記の例では、まず<a>タグとhref属性を使って、複数のハイパーリンクを設定しています。

<a href="/tutorialslibrary/">チュートリアル</a> |
<a href="/programming_examples/">コード集</a> |
<a href="/online_dev_tools/">ツール</a> |
<a href="/articles/">記事</a> |
<a href="/questions/index.php/">Q&A</a> |
<a href="/current_affairs/index.htm/">最新情報</a>

これらのリンクを適切に整理して「ナビゲーション領域」として明示するために、全体を<nav>要素で囲んでいます。

<nav>
    <a href="/tutorialslibrary/">チュートリアル</a> |
    <a href="/programming_examples/">コード集</a> |
    <a href="/online_dev_tools/">ツール</a> |
    <a href="/articles/">記事</a> |
    <a href="/questions/index.php/">Q&A</a> |
    <a href="/current_affairs/index.htm/">最新情報</a>
</nav>

<nav>タグを使うメリット

  • SEO対策： 検索エンジンがサイト内の主要なリンク構造を認識しやすくなります。
  • アクセシビリティ： スクリーンリーダー利用者がナビゲーション部分だけをスキップしたり、直接移動したりできるようになります。
  • コードの可読性向上： ページのどの部分がメニューなのかがソースコード上で一目瞭然になります。

注意点

<nav>要素は、サイトの主要なナビゲーションブロックに対して使用するのが推奨されています。フッターの著作権表記や利用規約へのリンクなど、すべてのリンクを<nav>で囲む必要はありません。あくまで「重要なナビゲーションの集合」に使うことがポイントです。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"