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

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

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

  3. Webサイト系

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

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

  4. Webサイト系

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

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

  5. Webサイト系

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

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

コメント

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

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

Twitter

  1. レッドストーン

    復帰後初の鏡の魔法書~確率は32%?~レッドストーン
  2. レッドストーン

    キーボード狩りは変態??~マウス派とキーボード派~レッドストーン
  3. Webサイト系

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

    ソロ地図売りについて~買)ソロ地図経験値〇50とは~レッドストーン
  5. Webサイト系

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