（できるだけ）正しい HTML を書くために～実践編～

2020年11月9日 00:00

前回の記事で予告していた通り、今回はサイトのデザインから HTML に落とし込むまでの私なりのやり方を書いていきます。

HTML についてよく知らない人は是非私が書いた過去の記事を読んでください。

今回マークアップするサイトのデザインはこれです！

よくあるブログサイトを目指して描いてみました。（デザインセンスの無さは見逃して……）

注意
※今回はサイトデザインにかかれている文字を適切にマークアップすることに注力していくので見た目の再現については考慮しません。
そのため、完成した HTML を表示しても見た目は画像と同じになりません。
※HTML には絶対の正解はありません。
私の書き方（もしくはマークアップ）だけが正しいわけではないので、1例として読んでください。（むしろ、間違ってたらゴメンナサイ……）

アウトラインを考える

まず最初にどんなアウトラインになればいいか考えます。
今回はコンテンツが少ないので悩む部分は特にありませんが、情報量が多いサイトだと「これは見出しだろうか……、それとも太字で少し文字サイズが大きいだけのテキストだろうか……」とメッチャ悩みます。

1 章... 【初心者向け】HTML5 について調べてみた！【解説記事】
  1 章 1 節... Wikipedia での説明を確認してみる
  1 章 2 節... 独自調査の結果

今回のアウトラインは上記のようになればいい感じかなと判断しました。
ではこれを HTML に落とし込んで行きましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マークアップ頑張る</title>
</head>
<body>
<h1>【初心者向け】HTML5 について調べてみた！【解説記事】</h1>
<section>
   <h2>Wikipedia での説明を確認してみる</h2>
</section>
<section>
   <h2>独自調査の結果</h2>
</section>
</body>
</html>

悩みどころ「ページ上部にあるサイトの名前は見出しではないのか？」
昔はページの左上とかにあるサイト名やロゴを h1 にしていましたが、Web サイト（HTML 文書）を1冊の本だと考えると
　・サイト名は本のタイトルに当たる
　・ここを h1 にするとすべてのページで章の名前が「サイト名」になってしまっておかしい
の理由から、章の名前ではないなぁと思って普通のリンクとしてマークアップするようになりました。
ただし、本のタイトル名と同じ章の名前もあり得るのでトップページだけなら h1 にするのもありだと思います。

ヘッダー、フッター、メインなど大きな塊を置く

デザインを見て、ざっくりと大まかな構造を考えます。
慣れない間はデザインを印刷して下記みたいに書き込むといいかもしれません。

今回のデザインではフッターはありませんね。
では、これを HTML に落とし込んでいきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マークアップ頑張る</title>
</head>
<body>
<header>
   <a href="/">マークアップ頑張る</a>
   <nav>
       <!-- ここにリンクを置く -->
   </nav>
</header>
<main>
   <article>
       <h1>【初心者向け】HTML5 について調べてみた！【解説記事】</h1>
       <section>
           <h2>Wikipedia での説明を確認してみる</h2>
       </section>
       <section>
           <h2>独自調査の結果</h2>
       </section>
   </article>
</main>
<ol>
   <!-- ここにパンくずのリンク -->
</ol>
</body>
</html>

ここらへんでマークアップチェッカーにコードを突っ込んで記述に問題ないか確認したり、アウトラインチェッカーにコードを突っ込んで意図した通りのアウトラインになっているか確認します。

全部書き終わってからチェッカーでチェックするとミスしていた場合に大幅に書き直す必要が出たりするので、切りが良いところでちょくちょく確認するのをオススメします。
ちなみに現在の時点でマークアップチェッカーはエラーなしですが、アウトラインチェッカーはこんな感じに表示されました。

最初に考えてたアウトラインとは違うものが出来上がってしまっています。
これにはキチンとした理由があるので説明していきますね。

まずは、青枠部分について説明します。
想定よりアウトラインの深さが 1 レベル深くなっています。（章のつもりが節になってしまっている）
これは article 要素が原因です。セクショニングコンテンツには中身のアウトラインの深さを 1 レベル深くする効果を持つものがあります。（section 要素、aside 要素も中身のレベルを 1 深くします。）

次に赤枠について。
これは nav 要素のせいです。nav 要素などのいくつかのセクショニングコンテンツに分類される要素は暗黙的な見出しを持っています。
仕様書にも

ユーザーエージェントは、明示的なセクションの見出しを持たないセクションに対するデフォルトの見出しを提供すべきである。

と書いてあります。今回利用したアウトラインチェッカーでは「Untitled Section」と表示されていますが、別のアウトラインチェッカーでな「Untitled NAV」と表示されます。
nav 要素はそれだけで「ナビゲーション」という見出しを持っているので「Untitled」と付いていても気にしなくて大丈夫です。
そして nav 要素もセクショニングコンテンツなので、見出しレベルが 1 つ深くなっているので「節」扱いになっています。

最後に緑枠の理由を説明します。
ヘディング要素が見出しレベルを下げるセクショニングコンテンツの中にしか存在しないからです。
試しに上記に書いてある HTML の main 要素の開始タグの直後に h1 要素を設置してみてください。その h1 要素が章として扱われるはずです。

「じゃあ、今 article 要素の中にある h1 要素をarticle 要素に出せば想定通りのアウトラインになるのでは？」と考えてしまいますが、それをやっては絶対ダメです。アウトラインのために文書構造を変更するのは間違っています。
今回のように説明出来る「Untitled Section」は存在していてもセーフです。
SEO 対策をしっかりしていると有名な某ポータルサイトや、SEO がきちんとしていると噂の某 WordPress のテーマもアウトライン見てみたら「Untitled Section」が存在しているので、これはもうしょうがないです。

ヘッダー要素の中身

ひとまず、マークアップもアウトラインも問題なさそうなので後は上からやっていくだけです。
というわけで header 要素の中身をサクッと書いていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マークアップ頑張る</title>
</head>
<body>
<header>
   <a href="/">マークアップ頑張る</a>
   <nav>
       <ul>
           <li>
               <a href="">趣味</a>
           </li>
           <li>
               <a href="">プログラミング</a>
           </li>
           <li>
               <a href="">自己紹介</a>
           </li>
       </ul>
   </nav>
</header>
<main>
   <article>
       <h1>【初心者向け】HTML5 について調べてみた！【解説記事】</h1>
       <section>
           <h2>Wikipedia での説明を確認してみる</h2>
       </section>
       <section>
           <h2>独自調査の結果</h2>
       </section>
   </article>
</main>
<ol>
   <!-- ここにパンくずのリンク -->
</ol>
</body>
</html>

メイン要素の中身

メイン要素の中身（というか article 要素の中身）を書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マークアップ頑張る</title>
</head>
<body>
<header>
   <a href="/">マークアップ頑張る</a>
   <nav>
       <ul>
           <li>
               <a href="">趣味</a>
           </li>
           <li>
               <a href="">プログラミング</a>
           </li>
           <li>
               <a href="">自己紹介</a>
           </li>
       </ul>
   </nav>
</header>
<main>
   <article>
       <ul>
           <li>
               <a href=""># HTML5</a>
           </li>
           <li>
               <a href=""># 技術記事</a>
           </li>
       </ul>
       <h1>【初心者向け】HTML5 について調べてみた！【解説記事】</h1>
       <span>投稿日: <time datetime="2020-11-08">2020年11月08日</time></span>
       <p>
           皆さん！<br>
           HTML って何か知っていますか！？私は知りません！！というわけで HTML について調べてみたことを書いていきたいと思います！
       </p>
       <section>
           <h2>Wikipedia での説明を確認してみる</h2>
           <p>
               まずは Wikipedia の HTML の記事でどんな説明をしているか見てみましょう！
           </p>
           <blockquote>
               HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。SGMLを元に開発された。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
               <span>出典: <cite>Wikipedia</cite></span>
           </blockquote>
           <p>
               どうやら、Web サイトと密接な関係があるものみたいですね！<br>
               これだけだとまだ良く分からないので、更に独自に調査してみました！！
           </p>
       </section>
       <section>
           <h2>独自調査の結果</h2>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
       </section>
       <img src="image/profile.png" alt="プロフィール画像">
       <span>モノ</span>
       <p>
           とあるベンチャー企業で自社サービスの開発をしています。 使用言語 PHP/JavaScript/HTML/CSS
       </p>
   </article>
</main>
<ol>
   <!-- ここにパンくずのリンク -->
</ol>
</body>
</html>

マークアップに悩むような部分が特に無いので解説することが無いですね……。
強いて言うなら「time 要素に datetime 属性を忘れない」、「img 要素に alt 属性を忘れない」ぐらいでしょうか。

パンくずの中身

最後はパンくずの部分ですね。
今まで仮置で ol 要素を置いてましたが、nav 要素の中に ol 要素を置く形に修正しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マークアップ頑張る</title>
</head>
<body>
<header>
   <a href="/">マークアップ頑張る</a>
   <nav>
       <ul>
           <li>
               <a href="">趣味</a>
           </li>
           <li>
               <a href="">プログラミング</a>
           </li>
           <li>
               <a href="">自己紹介</a>
           </li>
       </ul>
   </nav>
</header>
<main>
   <article>
       <ul>
           <li>
               <a href=""># HTML5</a>
           </li>
           <li>
               <a href=""># 技術記事</a>
           </li>
       </ul>
       <h1>【初心者向け】HTML5 について調べてみた！【解説記事】</h1>
       <span>投稿日: <time datetime="2020-11-08">2020年11月08日</time></span>
       <p>
           皆さん！<br>
           HTML って何か知っていますか！？私は知りません！！というわけで HTML について調べてみたことを書いていきたいと思います！
       </p>
       <section>
           <h2>Wikipedia での説明を確認してみる</h2>
           <p>
               まずは Wikipedia の HTML の記事でどんな説明をしているか見てみましょう！
           </p>
           <blockquote>
               HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。SGMLを元に開発された。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
               <span>出典: <cite>Wikipedia</cite></span>
           </blockquote>
           <p>
               どうやら、Web サイトと密接な関係があるものみたいですね！<br>
               これだけだとまだ良く分からないので、更に独自に調査してみました！！
           </p>
       </section>
       <section>
           <h2>独自調査の結果</h2>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
           <p>
               調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト調査結果のテキスト。
           </p>
       </section>
       <img src="image/profile.png" alt="プロフィール画像">
       <span>モノ</span>
       <p>
           とあるベンチャー企業で自社サービスの開発をしています。 使用言語 PHP/JavaScript/HTML/CSS
       </p>
   </article>
</main>
<nav>
   <ol>
       <li>
           <a href="/">TOP</a>
       </li>
       <li>
           <a href="">記事一覧</a>
       </li>
       <li>
           <a href="">プログラミング</a>
       </li>
       <li>
           <a href="">【初心者向け】HTML5 について調べてみた！【解説記事】</a>
       </li>
   </ol>
</nav>
</body>
</html>

改めてパンくず要素のマークアップについて調べていたら「パンくずは主要なリンクなので nav 要素で囲うべき」という意見が多く、私がマークアップキレイだなぁと思っているサイトを見に行ったら nav 要素で囲んでいたので修正しました。
悩んだらマークアップを頑張っているで有名なサイトとかを参考にするのが一番確実だと思います。

ちなみに header 要素の中ににある nav 要素の中身は ul 要素なのに、パンくずの nav 要素の中を ol 要素にしている理由は、パンくずはサイトの構造をその順番で表している＝順番に意味があるリストだからです。

完成

というわけで、これで HTML のマークアップが完成しました！
後はクラス属性を指定したり、見た目を再現するのに必要な分 div 要素や span 要素を追加していって CSS を書けば完成です。

人によって方法は様々だと思いますが、私は
1. 見出し要素を先に置いてアウトラインがぶれないようにする。
2. 大枠をざっくり作る。
3. 細部を作っていく。
という書き方が好きです。
後、文書構造を表すのに必要最低限の HTML を書ききってから CSS を書きます。そうしないと、CSS 都合でマークアップして正しくない HTML を書いてしまいがちなので……。
慣れない内は HTML と CSS の同時進行はオススメしないです。

全部で 6 記事になってしまいましたが、これで「（できるだけ）正しい HTML を書くために」シリーズ完了です。
ここまで読んでくださりありがとうございました。

もし、恵んでやってもいいかなと思ってくださったらぜひお願いします

（できるだけ）正しい HTML を書くために ～実践編～