"

HTML5とは 初心者にもわかる使い方をざっくりすぎる位で書きます

とりあえず、HTML5のタグに触れてみよう

ざっくりいきます。

HTML5というのはマークアップ言語と言われるやつで、本文に「ここは見出し」とか「ここは他のページへのリンク」とか印をつけるものです。

本文の他にそのページがどんなページなのか、何語で書かれているのかなども書いていきますそのあたりはヘッダー(<head>タグ)になるので後述にします。

本文というのは何かというと、「ページに表示されているすべての言葉」です

つまり、ブログなどでいうと記事の中身だけでなく、サイトのタイトルやメニュー、広告なんかも含みます。

たとえばその文章がメニュー(ナビゲーション)なら、<nav>と</nav>で囲む
サイトのタイトルや記事のタイトルなどセクションのタイトルなら<h1></h1>や<h2></h2>などで囲む。
というようにジャンジャン囲んでいきます。

それ以外にもページの一番重要なところ全体を<main></main>で囲むなんてこともして、見る人だけでなく本文を読まなくても「ここが大事なんだな」とPCや機械に対してわかりやすく書いていくのがhtmlです。

一番基本的なページのHTMLのつくりとは

では、実際によく使うタグを書いていきます。

<html>
  <head>
  </head>

  <body>
    <header>
    <h1></h1>
    <nav>
      <ul>
        <li><a></a></li>
        <li><a></a></li>
      </ul>
    </nav>
  </headr>

  <main>
    <section>
      <h2></h2>
      <p></p>
      <div>
        <img>
        <p></p>
      </div>
    </section>
  </main>

  <section>
    <h2></h2>
    <p></p>
    <div>
      <img>
      <p></p>
    </div>
  </section>

  <footer>
    <small></small>
  </footer>
 </body>
</html>

こんな感じでできるはずです。さっぱりわかりませんよね。

では、実際に使う最低限のHTMLタグとは

ここで使ったものが一番よく使うもので、使わないサイトはほぼないと思います。

  1. html:htmlで書いてますよって宣言
  2. head:本文以外のデータの部分(後述)
  3. body:ここから本文ですよ、表示する部分ですよって宣言
  4. header:ページのヘッダーですよって宣言 いろんなページにいっても共通の部分を囲むことが多い。
  5. h1:見出し/タイトルだよって宣言 宣言の強さに合わせてh1~h6まであるが、h3くらいまでしか使わない
    h1は1ページに1個というのが暗黙の了解
  6. nav:ナビゲーションだよって宣言 サイト内の他のページへのリンクメニューですよっていう意味
    これも1ページに1個というのが暗黙の了解で、ページ最下部にある奴はnavにしない場合が多い
  7. ul:ここからリストがはじまるよっていう宣言 olにすると1から数字をつけてくれる
  8. li:リストの一項目だよって宣言
  9. a:リンクだよって宣言 <a href=”飛ばしたいURL”>という感じでリンクをつける
  10. main:表示されてるページの本題の部分 これも1ぺーじに1個
  11. p:段落だよって宣言 普通の文章/内容の部分に使う
  12. div:日本語的な意味は全くない。デザインを調整するときに必要になるグループを作るタグ
    たとえばこのdivの部分だけ枠線をつけて、背景色も変えたいよという時に枠組みとして使う
  13. section:セクションの宣言 使い方はmainと同じだが1ぺーじに何個あっても良い このタグだけでは重要さは伝わらない要素
    また、セクションの中には必ず見出し(h1~h6が必要で毎回h1から始めるべきという噂もある)
  14. footer:ページの最下層/フッターですよって宣言 いろんなページにいっても共通の部分を囲むことが多い。
  15. small:コピーライトを書くときによく使われる

HTML5のタグに関して最後に

他にもタグはたくさんあるので、必要になった時に調べましょう。しかし、正式勧告の前と後でWEBのクリエイターたちそれぞれのタグへの解釈があったりしますので、書かれた日付に注意してください。

このWEBの世界は「ドッグイヤー」なんて言われてます。1年で進歩する量が非常に大きいのです。

もし、サイトを短いスパンで変更したりしていきたいのなら、迷わずにプロに任せるべきです。