【HTML】HTML5でコーディングするときの基本

2022年6月1日 17:01

昔からWEBの制作をやっていますと、HTMLの書き方等がどんどん変わってきて行くのがよくわかります。私も、最近は古いHTMLを触る機会が結構あるのですが、やっぱり昔と今とでは考え方から違ってるなぁと思う次第でございます。

新しいやり方を覚えず古いままでやっていくことも可能ですが、新しいやり方でHTMLを組んでいくほうがメンテナンスもしやすいですし、何よりもこれから先のWEBデザインに対応出来るようになっていきます。

これから先の学習のためにも今現在覚えていることを簡単にまとめていこうと思います。まず最初に、HTMLのタグについてまとめてみました。

まずはHTML5のタグを使ってみる

HTML5はざっくりと言うと動画の再生やビットマップ画像の描画機能と言った次世代のメディアに対応したHTMLになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
</body>
</html>

普通のページ制作をする場合には上記のような感じで書いていきます。この辺りは昔のHTML4とさほど変わりません。どちらかと言うとシンプルになっています。
vs-codeをお使いの方でしたらemmetが搭載されていますので、「html:5」と入力しますと同じような基本セットが出てきます。

目的に合わせたタグの色々

HTML5になるとタグの数がかなり増えています。用途や目的に合わせてタグを設置していくようになっています。文章の構造が分かるようにタグが増えているので、ページ内の文章の構造もそれに合わせてタグを設置するようにしていきます。

とりあえず、さくっと書いてみるとこんな感じになります。

<header>
  <h1>hogehoge</h1>
  <nav>
    <ul>
      <li>globalmenu</li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <header>
      <h1>header</h1>
    </header>
    <section>
      <h2>sectionA1</h2>
      <div>
        <h3>sectionB1</h3>
      </div>
      <div>
        <h3>sectionB1</h3>
      </div>
      <div>
        <h3>sectionB1</h3>
      </div>
    </section>
    <section>
      <h2>sectionA2</h2>
      <div>
        <h3>sectionB2</h3>
      </div>
      <div>
        <h3>sectionB2</h3>
      </div>
    </section>
    <footer>
      <p>footer</p>
    </footer>
  </article>
  <aside>
    <p>hogehoge</p>
  </aside>
</main>
<footer>
  <nav>
    <ul>
      <li>footermenu</li>
    </ul>
  </nav>
  <p>copyright</p>
</footer>

ヘッダやフッタ用の要素を始めとして、記事の大きなかたまり（それ単体でコンテンツとして用意する）のarticle、ナビゲーション用のnav、その他本体とは関係ない追加要素に使用するaside、その他一般的なセクションはsectionを使います。これによって、どの部分がどのような意味を持っているのかがわかりやすくなります。
hタグに関しては、見やすくh1~h3を使用していますが、実を言うとこの部分は全部h1でも大丈夫です。hタグの数字よりも、セクションに対して見出しがあることの方が重要になります。
mainタグも昔は<main role="main">と改めてロールを設定していた時期もあるのですが、今はつけなくても大丈夫です。

ちなみにdivは装飾用の何も意味を持たない要素になります。セクションとしては使用しません

こんな感じでHTMLを書いていきます。デザインはカラフルで色々動いているように見えても、その裏のコーディングはシンプルな文章構造になっているというのが最近のホームページですね。

まだまだHTMLを書く事は多いので、基本的なものは覚えておくと便利ですよ。

この記事が気に入ったらサポートをしてみませんか？