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サイト系

    最近の近況報告~イコール生存報告?~

    しばらくこのブログの投稿をしませんでした一花です。頭の片隅には常にあ…

  2. Webサイト系

    バリスタの、バリスタによる、缶コーヒー飲み比べ.comのお引越し

    タイトルのサイトを置いていた無料のサーバーがサービス終了ということで…

  3. Webサイト系

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

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

  4. Webサイト系

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

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

  5. Webサイト系

    鬼滅の刃 血風剣戟ロワイアル~攻略wikiの究極データベースを運営予定~

    こんにちは一花です。メインPCのディスプレイがスリープから解…

コメント

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

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

Twitter

  1. 株式投資

    株式投資の初手、スノーピーク~なんとか利食い~株式投資
  2. レッドストーン

    RSPASSがランク50になった!!~ペイトンユニークBOXの開封~レッドストー…
  3. モバプロ2レジェンド

    新LP三名考察~特性から選手詳細を見ていこう~モバプロ2レジェンド
  4. 物語「Key Players」

    物語[Key Players]3
  5. モバプロ2レジェンド

    黄金の外野陣考察~今度は外野陣!適用Legend系オーダーは!?~モバプロ2レジ…
PAGE TOP