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

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

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

  2. Webサイト系

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

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

  3. Webサイト系

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

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

  4. Webサイト系

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

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

  5. Webサイト系

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

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

コメント

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

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

Twitter

  1. レッドストーン

    アイテムドロップ情報まとめ~1.地下墓地B1編~レッドストーン
  2. レッドストーン

    とうとう栄光の手袋買ったで~高いのか安いのか~レッドストーン
  3. 未分類

    Round8Figh!
  4. レッドストーン

    2021 金鯖 装備晒し~祈りのかけらホシィ~レッドストーン
  5. 株式投資

    一花「株式投資」始めました~慣れるために初手~株式投資
PAGE TOP