2. コンテンツをマークアップする

このチャプターでは、ブラウザに表示するためのコンテンツのマークアップ手法と、HTML要素（HTMLタグ）の意味などについて解説しています。

マークアップ言語とは

HTMLの正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」といいます。HTMLはマークアップ言語と呼ばれており、HTMLを記述することを「HTMLをマークアップする」ともいいます。

マークアップ言語は「文書の構造と体裁を明確に記述するためのデータ記述言語」のことで、「マークアップする」ことは「文書の構造と体裁を明確に記述する」ことに相当します。

…と、難しく書きましたが、ざっくり言うと「ブラウザがこれから表示するページを正しく解釈できるように、用途に見合う正しいHTML要素を使用してHTMLを書く（マークアップする）」ということです。見出しに該当する項目はh1〜h6要素、段落テキストはp要素、リストに該当する項目はul要素（番号付きリストであればol要素）を使用してマークアップするといった具合です。

HTML文書を適切にマークアップすることで、以下のようなメリットがあります。

音声読み上げ機能などアクセシビリティに配慮することができる
スタイルシート（CSS）が読み込まれない状況でも、閲覧者が文書として内容を的確に把握することが可能になる

Wordソフトなどで文書を作成する際は、見出しや段落テキスト、リストや表などを使用して文書を読みやすく整形しながら作成しますが、HTML文書のマークアップもそれと似たようなものです。なお、Word文書作成における「テキストのサイズ変更」や「テキストの右寄せ」、「表のデザイン変更」が、のちのチャプターで行う「スタイルシート（CSS）記述によるレイアウトやデザイン調整」に該当します。

とはいえ、実際にマークアップをしていると「このテキストはどのHTML要素を使ってマークアップすればいいのだ…？」ということも結構あり、すべてを正しくマークアップすることは実際には難しいです。とりあえず最初のうちはあまり難しく考えずに、とくにこのハンズオンではだいたいのふわっとした理解と意味づけでマークアップするでOKです。

なお余談になりますが、マークアップ言語と呼ばれるものはHTMLの他にもいくつかあり、RSSフィードやサイトマップの配信などで利用される「XML（Extensible Markup Language / エクステンシブル・マークアップ・ランゲージ）」もマークアップ言語のひとつです。

コンテンツ構造の確認

まずは、このハンズオンで制作するプロフィールページの構造を確認します。大枠で以下の構造をしています。

ここで制作するプロフィールページの構造と内容はとてもシンプルなものなので、この程度であればheader main footerと各要素に分ける必要もそこまでないのですが（とくにheader要素とfooter要素には中に入る内容がそこまで多くないので）、HTMLの構造としては分けておいたほうが見やすいので、このようにしています。

それでは、HTMLのマークアップをはじめていきます。

コンテンツの大枠となる箱を用意する

ブラウザの画面に表示させる内容は、基本的にはすべてbody要素の中に記述します。まずは大枠の要素を追加します。

ヘッダー部分

ヘッダー部分の箱を用意します。ヘッダーは主にサイト名やサイト内コンテンツへのナビゲーションメニューなど、サイト全般にかかるメニューなどが置かれる領域です。

HTML文書におけるヘッダー要素をマークアップするための要素としては、header要素というまさにそのままのものが用意されているので、これを使用します。

現在のHTMLの仕様において、HTML要素は改行タグ（br）など一部を除き、必ず「閉じ要素（閉じタグ）」が必要です。閉じ要素を書くことにより、「ここからここまでが<HTML>の要素である」という宣言になります。VS Codeなどのエディターでは、HTML要素を入力すると閉じ要素が自動的に補完されるものが多いです。

<header>
  <!-- headerの中身 -->
</header>

メイン部分

つぎに、メイン部分の箱を用意します。メインはそのページのメインコンテンツ（およびそのナビゲーションメニュー）が置かれる領域です。

HTML文書におけるメイン要素をマークアップするための要素としては、main要素というまさにそのままのものが用意されているので、これを使用します。

<main>
  <!-- mainの中身 -->
</main>

フッター部分

最後にフッター部分の箱を用意します。フッターもサイト名や著作権・その他権利に関する表記など、サイト全般にかかる情報が置かれる領域です。ページをスクロールすると表示される「ページ上部に戻る」リンクも、ここに置かれることが多いです。

HTML文書におけるフッター要素をマークアップするための要素としては、footer要素というこれもまさにそのままのものが用意されているので、これを使用します。

<footer>
  <!-- footerの中身 -->
</footer>

各要素をグループ化する

今回制作するページにおいて、header main footerの各要素はすべて横幅が同じです。後々のチャプターでスタイルシート（CSS）を記述する際、これらの要素ひとつひとつに横幅などを指定していってもいいのですが、同じ記述を繰り返すことになりすこし手間になるので、これらをひとつのグループとしてまとめることにします。

グループ化に利用するHTML要素は、それらをひとまとめにした際に意味づけできる要素があればその要素を利用しますが（「記事」を表すarticle要素など）、今回グループ化するheader main footerの各要素は「記事」のように意味づけできる要素がないため、div要素を利用してまとめます。

<div>

  <header>
    <!-- headerの中身 -->
  </header>

  <main>
    <!-- mainの中身 -->
  </main>

  <footer>
    <!-- footerの中身 -->
  </footer>

</div>

div要素について

div要素はheader要素などとは違い、要素それ自体に意味はありません。スタイルシートで記述されてスタイルが適用されるまでは、他の要素に影響も与えません。div要素の種類としては「コンテンツ区分要素」といい、HTMLの構造上で今回のように要素をグループ化するためなどに利用されます。

このように複数のHTML要素をグループ化すると、グループ化に利用したHTML要素とグループ化されたHTML要素は親子関係となります。

この場合は、親がdiv要素で、子がheader main footerの各要素となり、それぞれを親要素・子要素といいます。header main footerの各要素は、それぞれ兄弟関係（兄弟要素）になります（厳密にはdiv要素でグループ化する前も兄弟関係です）

この親要素・子要素の関係は、スタイルシートを記述する際に必要になるので、なんとなく頭の片隅に置いておくとよいです。また、header main footerそれぞれの要素の中にHTML要素が入ると、それらも親子関係となり、div要素から見ると「孫要素」になります。

なお、上記のコード例ではdivで囲われた要素のインデントを下げています。HTMLに限らず、スタイルシートやJavaScript、PHPなどでコードを見やすくするために適切にインデントを入れておくと、コードの可読性が上がり、コードが読みやすくなったり、閉じ要素の記述ミスを発見しやすくなります。エディターによっては改行時に自動でインデントが入ります。

各HTML要素にclass属性を付与する

コンテンツの大枠となる箱としては以上で完成ですが、もうひと手間、スタイルシートを書くときにあると助かるclass属性を付与することにします。

以下のようにHTMLでマークアップされた左右が横並びのレイアウト表示があるとします。

<div>
  <div>
    <p>左側の要素</p>
  </div>
  <div>
    <p>右側の要素</p>
  </div>
</div>

このレイアウトを実装するためのスタイルシートの記述は、以下のようになります（スタイルシートはのちのチャプターで解説するので、ここではコードのみ記載します）

body > div {
  display: flex;
  align-items: center;
}

div div {
  margin-right: 1em;
  padding: 1em;
  background-color: #eee;
  width: fit-content;
}

div p {
  margin: 0;
}

そこまでHTMLが複雑ではないのでこれはこれでアリですが、divの記述がどのdiv要素を指しているのか、一見しただけではすこしわかりづらく感じるかと思います。スタイルシート上でもどのdiv要素なのか指定する必要があり（body > divの>は「直下」を意味します）、HTML文書からも「どういうレイアウトの構造なのか」が掴みづらいです。

これを以下のように修正すると、コードが見やすくなったのではないでしょうか。

<div class="wrapper">
  <div class="box left_area">
    <p>左側の要素</p>
  </div>
  <div class="box right_area">
    <p>右側の要素</p>
  </div>
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.box {
  margin-right: 1em;
  padding: 1em;
  background-color: #eee;
  width: fit-content;
}

.box p {
  margin: 0;
}

このようにHTML要素のclass属性に適切な値を付与することで、HTML文書を見るとレイアウトのイメージが掴みやすくなり、またスタイルシート書きやすくなります。

class属性の付与

前置きが長くなりましたが、さきほどマークアップしたHTML文書にclass属性を付与します。

class属性の値は基本的に自由に設定できますが、以下の記述は無効になります。

数字はじまり
ハイフン（-）やアンダースコア（_）以外の記号

<!-- OK -->
<p class="text">テキスト</p>
<p class="text-red">テキスト</p>
<p class="text_red">テキスト</p>
<div class="box1">要素</div>

<!-- NG -->
<p class="text*1">テキスト</p>
<div class="1box">要素</div>

上記はHTML文書として無効ということではなく、ブラウザでページを読み込み時、スタイルシートが反映される際に無効になります。

他にも細かいルールがあるのですが、class属性の値は「アルファベットからはじまる値を指定する」と覚えておくとよいです。

なお、値に日本語や絵文字を指定することも可能ですが、一般的なサイトでは半角英数とハイフンおよびアンダーバーで構成されることがほとんどです。

<div class="wrapper">

  <header class="header">
    <!-- headerの中身 -->
  </header>

  <main class="main">
    <!-- mainの中身 -->
  </main>

  <footer class="footer">
    <!-- footerの中身 -->
  </footer>

</div>

class属性の値は基本的に自由に決めてよいですが、HTML文書の構造上わかりやすい命名をおすすめします。

ここまでに記述したコード

ここまで記述したHTML文書の中身です。

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <meta name="robots" content="noindex,nofollow,noarchive">
  <title>My Profile</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<div class="wrapper">

  <header class="header">
    <!-- headerの中身 -->
  </header>

  <main class="main">
    <!-- mainの中身 -->
  </main>

  <footer class="footer">
    <!-- footerの中身 -->
  </footer>

</div>

</body>
</html>

まだindex.htmlをブラウザで開いても画面が真っ白でなにも表示されません。次はheader要素のHTMLをマークアップします。

参考情報など

このチャプターで解説した各HTML要素について、詳細の仕様を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントもご覧ください。

2. コンテンツをマークアップする

2. コンテンツをマークアップする

マークアップ言語とは

コンテンツ構造の確認

コンテンツの大枠となる箱を用意する

ヘッダー部分

メイン部分

フッター部分

各要素をグループ化する

div要素について

各HTML要素にclass属性を付与する

class属性の付与

ここまでに記述したコード

参考情報など

results matching ""

No results matching ""