サクッとWEBサイトを作る「SAKUWEB(さくうぇぶ)」

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

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

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

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

 

目次

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

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など、いろんな種類のタグを入れて記述していきます。

図解するとこんな感じ。

主要htmlタグ「header」「body」「main」「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タグ:サイトマップや著作権表示を格納する

 

タグタグって・・・何?

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

Recent Post

Category Post

Back To Top