【HTML入門】HTMLの基本構造の書き方

  • 2019.12.30
  • 2022.05.04
  • HTML
【HTML入門】HTMLの基本構造の書き方

HTMLを使ってコードを書いていきたいけど、基本構造がわからない。。
基本構造について教えてほしい!!

こう言ったHTMLの勉強を始めたばかりの方向けに、「HTMLの基本構造の書き方」についてわかりやすく解説していきます。
本日学ぶ内容は以下の7つです。

  • HTMLの基本構造の書き方
  • <header>タグ
  • <nav>タグ
  • <article>タグ
  • <section>タグ
  • <footer>タグ
  • <aside>タグ

この記事を読めば、「HTMLの基本構造の書き方」について理解できるようになります。

では早速やっていきましょう!

HTMLの基本構造の書き方

HTMLでWebサイトを作成するときは、決められたタグを使用しコードを書いていきます。
そうすることで、自分以外の誰かがコードを読むときに読みやすくなったり、SEO的にも正しいタグを使用するといいとされています。
これらを使用しないとうまく反映されないわけではありませんが、初めのうちからしっかりと基礎を知っておくといいでしょう。

では実際にそれぞれのタグについて見ていきましょう!

<header>タグ

<header>タグは、ナビゲーションやWebサイトのタイトル、ロゴ、検索フォームなどを書くときに使用します。
例えば、Webサイトのタイトルを書くときは、下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <header>
      <h1>サイトのタイトル</h1>
     </header>
    </body>
</html>

<header>タグの中に、ヘッダーとして表示させたい内容を書いていきます。

<nav>タグ

<nav>タグは、メニューを表示させたい場合に使用します。
例えば下のようなメニューを書きたい場合に、<nav>タグで囲みます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    //タイトル
        <header>
      <h1>サイトのタイトル</h1>
      </header>

       //メニュー
        <nav>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </nav>
    </body>
</html>

<article>タグ

<article>タグは、記事であることを示すためのタグです。
基本的に記事コンテンツはこの<article>タグで囲みます。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    //タイトル
        <header>
      <h1>サイトのタイトル</h1>
      </header>

       //メニュー
        <nav>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </nav>

       //コンテンツ
        <article>
  
        </article>
    </body>
</html>

<section>タグ

<section>タグは、コンテンツの中で章分けが必要な場合に、使用します。
先ほどの<article>タグの中に、<section>タグを書くようなイメージです。
書き方は下のような書きます。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    //タイトル
        <header>
      <h1>サイトのタイトル</h1>
      </header>

       //メニュー
        <nav>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </nav>

        //コンテンツ
        <article>
           <section>
             <h1>記事タイトル1</h1>
             <p>内容</p>
           </section>

           <section>
             <h1>記事タイトル2</h1>
             <p>内容</p>
           </section>
        </article>
    </body>
</html>

このように書いていきます。
また、<section>タグの中での記事タイトルは、<h1>タグを使用することが推奨されています。

<footer>タグ

<footer>タグは、フッターの内容を書くときに使用されるタグです。
よく使用されるのは、コピーライトなどによく使用されます。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    //タイトル
        <header>
      <h1>サイトのタイトル</h1>
      </header>

       //メニュー
        <nav>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </nav>

        <article>
           <section>
             <h1>記事タイトル1</h1>
             <p>内容</p>
           </section>

           <section>
             <h1>記事タイトル2</h1>
             <p>内容</p>
           </section>
        </article>

        <footer>
          
        </footer>
    </body>
</html>

<aside>タグ

<aside>タグは、サイドバーや広告などに使用させるタグです。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    //省略

      //サイドバーや広告など
      <aside>
      
      </aside>

    </body>
</html>

まとめ

今回は、「HTMLの基本構造の書き方」についてみてきました。
全体のイメージ図は下のような感じです。

HTMLイメージ

この書き方で是非、Webサイトを作成してみてください。
では本日は以上になります。