コーディングとマークアップの違いがよく分からない。
それぞれの役割・意味することは何なのだろう？
どのような作業を区別する言葉なのか知りたい！
Web関連の勉強をしているとさまざまなよく似た用語が出てきますよね？ なかでも特に悩ましいのがコーディングとマークアップの違いではないでしょうか。
実際のところ、どちらも同じような意味で使われている場合があって余計に混乱することもあります。用語の定義をしっかり学ぶことは重要で、意見や提案をする時にもこの知識は必要になってきます。
この記事ではHTMLを例にしてコーディングとマークアップの違いや役割などについて分かりやすく解説していきます。ぜひ最後まで読んで理解を深めて頂ければ幸いです。
マークアップとは
この章では「マークアップ」について詳しく見ていきましょう。主に役割や意味、実際のマークアップがどのような作業なのかについて学んでいきます。
マークアップが意味するもの
Webの世界ではマークアップという言葉をよく耳にするのですが、なかでも特にHTMLを学習する時に出てきます。
理由は簡単で、HTMLが【HyperText Markup Language】の略称であることからも分かるように、マークアップを行うための言語だからです。それでは、マークアップというのは一体どういう意味なのでしょうか？
簡単に言ってしまえば、文章がどのような構造になっているのかを明確化するための作業と言えます。
例えば、次の文章を読んでみてください。
はじめに これはサンプルのテキストです。 以下に項目を明記しておきます。 りんご バナナ メロン 詳しくはhttps://www.google.co.jpで調べてみましょう！
少し読みにくい文章ですが、人間が見ると【見出し】【リスト】【リンク】の箇所がなんとなく分かるのではないでしょうか？
しかし、これをブラウザが機械的に見るとどうでしょうか？ おそらく、すべて同じ文章として解釈されるでしょう。つまり、どこが見出しで何がリンクなのかさっぱり分からない状態であるというわけです。
このような文章を構造化して、意味のある文章にする作業をマークアップと言います。
HTMLでマークアップする
それでは具体的にマークアップの一例を見ていきましょう。
例えば、先ほど紹介したサンプルの文章をHTMLでマークアップすると以下のようになります。
<h1>はじめに</h1> <p>これはサンプルのテキストです。</p> <p>以下に項目を明記しておきます。</p> <ul> <li>りんご</li> <li>バナナ</li> <li>メロン</li> </ul> <p>詳しくは<a href="https://www.google.co.jp">https://www.google.co.jp</a>で調べてみましょう！</p>
マークアップをする前はただの文章の塊という扱いでしたが、HTMLをマークアップしたことで文章が構造化されてそれぞれの役割が明確になりましたね。
見出し・リスト・リンクがどこにあるのかはっきりしているので、ブラウザが機械的に見てもしっかりと認識できるので画面上にも分かりやすく表示されるわけです。
もっと細かく言うと、HTMLにはaltやtargetなどさまざまな属性があるのでこれらについてもしっかりと記述するところまでマークアップは行います。
コーディングとは
この章では「コーディング」について詳しく見ていきましょう。主に役割や意味、実際のコーディングがどのような作業なのかについて学んでいきます。
コーディングが意味するもの
マークアップが文章を構造化する作業なのに対して、コーディングはソースコード全体を記述する作業と言えます。また、HTMLに限らずJavaScript, PHP, Ruby, Pythonなどさまざまなプログラミング言語を用いてコーディング作業を行います。
またプログラミングという言葉と同じように扱われますが、基本的にはプログラマが設計した仕様に沿ってソースコードを記述していく作業がコーディングと呼ばれることが多いでしょう。
つまり、HTMLで例えるとソースコード全体をコーディングする中にマークアップを行う作業があるというイメージになります。
具体的な例については次の章で見ていきましょう。
HTMLでコーディングする
それでは、コーディングの例を見ていきましょう。
分かりやすいように冒頭で解説したサンプル例をそのまま使って、基本的なコーディングをすると以下のようになります。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample HTML</title>
</head>
<body>
<h1>はじめに</h1>
<p>これはサンプルのテキストです。</p>
<p>以下に項目を明記しておきます。</p>
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>メロン</li>
</ul>
<p>詳しくは<a href="https://www.google.co.jp">https://www.google.co.jp</a>で調べてみましょう！</p>
</body>
</html>
この例を見ても分かるように、コーディングは仕様に沿ってソースコードを完成させる作業のため、HTMLであればDOCTYPE宣言から始まりタグで終了するまですべてを作ります。この中にマークアップ作業が存在するというイメージになるわけです。
もちろん、場合によってはコーディングもマークアップも一緒に作業するようなケースもありますし、プログラムの設計からすべてこなす人もいます。
ただし、それぞれの役割を自分の中でしっかりと定義してイメージできるようになることが重要です。
コーディングとマークアップの違い
ここまでマークアップとコーディングについて詳しく見てきましたので、最後にもう一度おさらいをしておきましょう。
それぞれの役割を簡単に言うと次のとおりです。
- 【マークアップ】文章の構造を明確化する
- 【コーディング】ソースコード全体を記述する
流れとしては、Webサイトに掲載するテキストをマークアップし、それをコーディング作業に挿入するというイメージです。
また、最近ではSEO対策や高齢者・障害者向けのアクセシビリティから使いやすいUXまで、幅広い対応が求められています。これらの要素をマークアップの時点で考慮するのかコーディングする時に検討するのかはケースバイケースと言えるでしょう。
このような背景からも分かるように、それぞれの役割や境界線が曖昧になってきているのが混乱の原因とも言えるでしょう。
まとめ
今回はコーディングとマークアップの違いや役割について解説しました。
最後に、もう一度ポイントをおさらいしておきましょう！
- マークアップは文章を構造化してブラウザが認識しやすくする
- コーディングは仕様に沿ってソースコード全体を記述していく作業
- コーディング作業の中にマークアップ作業があるというイメージ
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
