Webサイト系

Webデザイン~検索データベースシステムが出来るまで~PART3 「タグ」

今回はHTMLでつかうタグの一例をご紹介します。特にHTML5の5から使われるようになったタグです。

HTML「タグ」

<body>・・・これはHTML5でなくても使われる文書の本体を表します。
<h1>~<h6>・・・1が一番大きい見出しで、2、3と続きます。
<div>・・・一つの範囲であることを示します。

ここからがHTML5準拠のタグです。
<header>・・・ページの上部にあたるヘッダーであることを示します。
<article>・・・記事の本文であることを示します。
<section>・・・主に<article>の中にあり、一つのセクションであることを示します。
<aside>・・・本文ではなく、補足や余談情報であることを示します。
<nav>・・・ナビゲーションであることを示します。
<footer>・・・ページの下部にあたるフッターであることを示します。
<address>・・・連絡先や問い合わせ先であることを示します。

例えば、本文を書きたいときに、<div>タグで括ることもできるんですが、整理してHTMLを書きたいと思った時に、本文に<article>を使ったり、<section>を使ったして見やすくします。どこかのサイトを見た時に、よくF12キーなどで開発者ツールで中身を見る事がありますが、ここでサイトの構築の仕方が視えちゃいます。どのようにタグを使っているかを誰でも閲覧できるので、そのサイトがHTML5準拠で作られているかなど見られて恥ずかしいのもあって、基本を押さえて作ることが基本にもなっています。

つまり、その<header>タグの情報が一体何なのかをわかりやすくタグだけで示すやり方がHTML5で取り入れられた、ということです。

<header>ここはヘッダー</header>
<article>
<section>
<h1>トップ見出しだぜ!<.h1>
</section>
<section>
<h2>二番目の見出しタグだぜ・・・<.h2>
</section>
</article>
<footer>残りのフッター</footer>

などと表記することができます。ここで、各タグを全部<div>に置き換えることも可能なのですが、要するにどこが何の領域なのかがわかる辛くなるため、それを防ごうというのがHTML5のやり方です。CSSにも関わってくることなのですが、それはまた後日ご説明いたします。

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART2

    HTMLという言語を使う時は、adobeが提供しているdreamwe…

  2. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART1

    このタイトルでは、私一花が今まで独学で築き上げてきた技術やコツをこれ…

  3. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART4 「タグ2」

    タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しま…

  4. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

    本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Twitter

  1. モバプロ2レジェンド

    一日限定ガチャは木曜日?~赤5は出ないの??~モバプロ2レジェンド
  2. モバプロ2レジェンド

    最強ショートは誰だ!?~守備遊と攻撃遊を私的ランキング!~モバプロ2レジェンド
  3. モバプロ2レジェンド

    モバプロ仕様書~適正やモデル、キーポジとは???~モバプロ2レジェンド
  4. レッドストーン

    エリプシャンの製錬!!~今日も勝負だ!いでよ+7!!~レッドストーン
  5. レッドストーン

    知識比率お守り!!~さぁ勝負だ!槍につけるよ!!~レッドストーン
PAGE TOP