この記事は、ウェブデザイン初心者のための入門講座 (Part 1) - 環境構築編 からの続きです。
良かったらお読みください。
- 2020/02/05 HTML の例の CSS と JS の読み込む設定を間違えていたので修正
この章での目標
- 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 を書くときに困らずに済むのでしっかりと覚えましょう。
次回は、タグの簡単なチートシートについて書いていきたいと思います！