この章での目標

HTML についての理解を深める
HTML を使用した構造化を知る

HTML とは

Wikipedia (HyperText Markup Language) には、以下のように説明されています。

HyperText Markup Language（ハイパーテキストマークアップランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

~~ぶっちゃけ説明を読んでもよくわからないですね。~~
まあ、簡単に言うとウェブ上で表示する文章形式だと考えていいと思います。
人が読める文章を、コンピュータが読めるように意味付けをしたものが HTML ファイルになります。
Web ブラウザが正しく判断できるようにするために、正しいタグを正しい場所に書いてあげる必要があるんですね。

なんでコンピュータが正しく読めるようにする必要があるの？

「Web デザインは人間がきれいなデザインを見るためだからコンピュータに正しく読ませる必要ないじゃん」と考えるかもしれませんが それはよくありません。目が見えない人のための読み上げ機能や Google 検索などで活用されることもあるので見えない部分にも気を配って構造化を行う必要があります。ユーザビリティやアクセシビリティの観点から見ても良くないことがわかると思います。

HTML だけでウェブデザインはできるのか

魅力的なウェブサイトを制作するには、HTML だけではまず無理だと思います。
HTML では、あくまで文章に意味付けを行います。
それに CSS や JavaScript を組み合わせることによって、魅力的なウェブサイトを作り合わせることができます。

HTML5 について

HTMLにも多くのバージョンが存在しています。
現在、2014年に勧告された HTML5 以降の書き方を基準にすることが一般的とされています。
2017年には HTML 5.2 が勧告されました。

この記事では、基本である HTML5 について書いていきたいと思います。
HTML 5.1 と HTML 5.2 に関しては、また後日まとめます…

HTML の例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="このサイトについての説明が入ります。">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>ここにページタイトルが入ります</title>

	<!-- StyleSheets -->
	<link rel="stylesheet" href="./css/style.css">

	<!-- Scripts -->
	<script src="./js/script.js"></script>
</head>
<body>
    <main>
        <section>
            <h3>ウェブデザイン初心者のための入門講座 (Part 2) - HTML編</h3>

            <p>こんにちは！これは、HTMLタグを使用した例となっています！</p>

            <ul>
                <li>リスト１</li>
                <li>リスト２</li>
                <li>リスト３</li>
            </ul>
        </section>
    </main>
</body>
</html>

このような形で HTML を書きます。

HTML は、開始タグ と 閉じタグという要素で構成されており、状況に応じて適切なタグを使用して文章に意味を付けていきます。
昔の HTML ではタグは大文字で使用するパターンもありましたが、 HTML5 では、小文字のタグを使用します。

一つ一つ説明していくと

<!DOCTYPE html>

これが HTML5 を使用する際の宣言文になります。
必ず使用するので、覚えておきましょう。
ここの宣言に関しては、大文字でも小文字でもどちらでも良いです。

<!doctype html> や <!DOCTYPE HTML>
などでも宣言自体には問題ありません。

<!DOCTYPE html>
<html lang="ja">
    ...
</html>

まずはじめに、全体を html タグで囲みます。
lang="ja"
これは日本語のサイトという意味で使用されます。
英語であれば lang="en" 中国語であれば lang="zh" を使用します。
余談ですが、Chrome の翻訳機能はここで見分けているんでしょうか…

<!DOCTYPE html>
<html lang="ja">
<head>
   ...
</head>
<body>
   ...
</body>
</html>

そして、 head タグと body タグを追加します。

head タグにはブラウザや検索エンジンに見える情報を記述します。

<head>
    <meta charset="UTF-8">
    <meta name="description" content="このサイトについての説明が入ります。">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>ここにページタイトルが入ります</title>

    <link rel="stylesheet" href="./js/script.js">

    <script src="./css/style.css"></script>
</head>

meta、title、link、script などのタグが入ります。
ちなみに意味に関しては、

タグ名	意味
meta	その文書に関する情報（メタデータ）を指定する
title	文書にタイトルをつける
link	リンクする外部リソースを指定する
script	文書にJavaScriptなどのスクリプトを組み込む
となっております。

ここの内容をしっかり記述することによって検索エンジンの表示結果が変化します。
head内に書くべきタグを総まとめ：SEO対策に有効なものは？ - https://saruwakakun.com/html-css/basic/head
こちらの記事の記事を参考にすると良いと思います。

body タグには人間が見える部分を記述します。

<body>
    <main>
        <section>
            <h3>ウェブデザイン初心者のための入門講座 (Part 2) - HTML編</h3>

            <p>こんにちは！これは、HTMLタグを使用した例となっています！</p>

            <ul>
                <li>リスト１</li>
                <li>リスト２</li>
                <li>リスト３</li>
            </ul>
        </section>
    </main>
</body>

今回使用したタグを例に出して説明すると

タグ名	意味
main	メインコンテンツであることを示す
section	一つのセクションであることを示す
h3	見出し（h1〜h6まで存在する）
p	ひとつの段落（パラグラフ）であることを表す
ul	順序のないリストを表示する
li	リストの項目

先程も述べたように、HTMLでは文章の意味を付けながらタグ付けを行います。（構造化）
構造化した文章を解説してみると…

main タグを使用し、メインコンテンツだと言う意味を付ける
section タグを使用し、その文章（コンテンツ）が一つのまとまりであるという意味を付ける
section タグ内の文章をそれぞれの意味に合わせ構造化する。

のように意味を考えながら構造化を行います。

HTML の構造化には制約はあるのか

基本的には、どのように構造化を行っても表示自体には問題ありません。しかし、構文エラー自体は存在します。

<section>
    <p>これは間違った構造化です。</p>
</section>

section タグや article タグではブロック内に見出しタグ（h1、h2、h3、...）を使用していない場合はエラーを出します。
HTML5 からは多少はゆるくなりましたが、エラーが出ないようしっかりと正しい構造化を行いましょう。

The W3C Markup Validation Service
ここにて、構造化のエラーチェックを行うことができます。
これをバリデーションと呼びます。
どんどん活用してエラーの出ない構造化を目指しましょう！

ちなみに、サンプルコードはエラーが出ないように構造化してあります笑

まとめ

始めはとりあえずで囲んだぐちゃぐちゃな構造化になると思いますが、しっかりとした構造化を行うことで CSS や JavaScript を書くときに困らずに済むのでしっかりと覚えましょう。
次回は、タグの簡単なチートシートについて書いていきたいと思います！

参考文献

HTML5リファレンス - http://www.htmq.com/html5/