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

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

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

  4. Webサイト系

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

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

  5. Webサイト系

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

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

コメント

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

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

Twitter

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

    黄金の内野陣考察[改]~左右適正なくても発動しまぁぁす!!~モバプロ2レジェンド…
  2. レッドストーン

    最近のハマり~15年以上続いているRED STONEとは?~レッドストーン
  3. Webサイト系

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

    Round6figt!!
  5. 未分類

    声優になるの?なれるの??
PAGE TOP