[猫図解]Htmlの構造と主要タグを知ろう！

Published on: 2022年10月20日
Category: html-css
Tags: html,タグ
Author: SAKUWEB by Liruu Design

htmlは、「タグ」というものを使ってレイアウトを形成していきます。

実際のHTMLコードを見ながら、

全体の構造と、主要タグというか必須なタグを見ていきましょう！

htmlの全体構造
ドキュメント宣言文「doctype」　HTMLファイルです！
htmlタグ　こっからHTML書きまーす！宣言タグ！
headタグ　コミュニケーションが得意！外部とやり取りします！
Bodyタグ　ページに表示します。
headerタグ　サイトロゴやタイトル名、ナビゲーションを格納します！
mainタグ　コンテンツのメインとなるパーツです！
Footerタグ　サイトマップやSNS、著作権を表示します！
まとめ

htmlの全体構造

下のコードは、全体構造です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>ページタイトル</title>
    <meta name="description" content="ページの説明">
  </head>
  <body>
    <header>
      ヘッダー
    	<nav>ナビゲーション</nav>
    </header>
    <main>
      コンテンツ
      　<article>
    		コンテンツの詳細
        </article>
      	<section>
    		コンテンツの詳細
        </section>
      　<aside>
        	サイドバー 
        </aside>
      <!-- その他いろんなタグの種類を組み合わせます -->
    </main>
    <footer>
      フッター
    </footer>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

上から順にみていきましょー。

ドキュメント宣言文「doctype」　HTMLファイルです！

<!doctype html>

私はHTMLファイルです！と宣言する部分です。

ページには表示されませんが、必ず最初に記述します。

htmlタグ　こっからHTML書きまーす！宣言タグ

<html lang="ja">
 <!-- 中略 -->
</html>

ここからHTML記述しますよー！

～中略～

HTMLはここまでですよー！

という役割です。

lang属性に入っている値「ja」は、日本語という意味です。

ここもページには表示されませんが、公式として覚えましょ。

headタグ　コミュニケーションが得意！外部とやり取りします！

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>ページタイトル</title>
    <meta name="description" content="ページの説明">
  </head>

主に、ファイルを読み込んだり、値を渡したり、外部とやりとりする部分です。

文字コードやビューポートの指定、ページタイトルや説明文などなど・・・・。

ここもページに表示されない箇所です。

ここには必要に応じていろんなタグを入れ込むことができます。

Bodyタグ　ページに表示します。

<body>
<!-- 中略 -->
</body>

Bodyの中に入る要素は、基本的にページに表示される部分です。

この中にheaderやFooterなど、いろんな種類のタグを入れて記述していきます。

図解するとこんな感じ。

まず、bodyタグ・・・・ネコですね。

ネコを構成するには、頭であるheaderタグと、身体であるmainタグと、足であるfooterタグがあって初めて、ネコになります。

さらに、頭は目や鼻口があり、身体は胸やお腹など、足は指や肉球などに細分化できますね。それぞれのパーツは、それぞれの役割を持ち合わせています。

タグも同じく、パーツごとにいろんな役割があって、全部で108種類ほどあります。

普段コーディングしている身としても、鼻で笑っちゃったくらい・・・・・多すぎですね。

でも大丈夫！

主要タグ+α程度で十分にページは作れます！

headerタグ　サイトロゴやタイトル名、ナビゲーションを格納します！

<header>
      ヘッダー
    	<nav>ナビゲーション</nav>
    </header>

ヘッダーには、主にナビゲーションやサイトロゴ、メインビジュアルなどを入れます。

サイトの顔になる重要な部分です。

猫も、個体によって顔や性格違いますよね。

サイトも、商材によって謳いたいことが異なります。

ナビゲーションは、道路標識のような部分です。

首都高なんかの分かりにくい標識は・・・・ストレスですね。

なので、ユーザーにストレスを与えないように考慮してナビゲーションを記述します。

mainタグ　コンテンツのメインとなるパーツです！

<main>
      コンテンツ
      	<section>
    		コンテンツの詳細
        </section>
      　<aside>
        	サイドバー 
        </aside>
      <!-- その他いろんなタグの種類を組み合わます -->
</main>

ここには、メインコンテンツが入ります。

ネコでいう心臓や肺、腸などなど・・・・これないと死んじゃいますね。

サービスの情報や商品、キャンペーンなど、ユーザーに知って欲しいことを記載します。

ユーザーは、興味のある情報があれば、欲してくれます。

なのでTOPページでは、基本的には、全コンテンツへ誘導する目次エリア的な役割。

メニュー表みたいなイメージですね。

そして、詳細ページへ誘導します。

Footerタグ　サイトマップやSNS、著作権を表示します！

<footer>
      フッター
</footer>

フッターには、サイトマップのように全ページへのリンクや、著作権情報などを入れます。

最近は、シンプルな構成が多くなり、

サイトのロゴなどの他、「SNS情報」などを含めることで、2本の足でしっかり立てるようになります。

とりあえず主要タグ、というか必須タグを大雑把にお伝えしました。

まとめ

HTML主要タグ

ドキュメント宣言文「doctype」でHTMLファイルを宣言
htmlタグ：囲った中身はHTML言語で記述する
headタグ：CSSやJSなど外部ファイルを読みこんだり、ページの説明をするタグ
Bodyタグ：コンテンツ本体の部分
headerタグ：ページ上部のパーツでナビゲーションやサイトロゴなどを入れる
mainタグ：メインとなるコンテンツを格納する
Footerタグ：サイトマップや著作権表示を格納する

タグタグって・・・何？

次回は「タグ」を説明します。