スライドショースライドショースライドショー

HTMLで理解するコーディングとマークアップの違いと意味

コーディングと マークアップの違い


コーディングとマークアップの違いがよく分からない。
それぞれの役割・意味することは何なのだろう?
どのような作業を区別する言葉なのか知りたい!

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にはalttargetなどさまざまな属性があるのでこれらについてもしっかりと記述するところまでマークアップは行います。

コーディングとは

この章では「コーディング」について詳しく見ていきましょう。主に役割や意味、実際のコーディングがどのような作業なのかについて学んでいきます。

コーディングが意味するもの

マークアップが文章を構造化する作業なのに対して、コーディングはソースコード全体を記述する作業と言えます。また、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まで、幅広い対応が求められています。これらの要素をマークアップの時点で考慮するのかコーディングする時に検討するのかはケースバイケースと言えるでしょう。

このような背景からも分かるように、それぞれの役割や境界線が曖昧になってきているのが混乱の原因とも言えるでしょう。

まとめ

今回はコーディングとマークアップの違いや役割について解説しました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • マークアップは文章を構造化してブラウザが認識しやすくする
  • コーディングは仕様に沿ってソースコード全体を記述していく作業
  • コーディング作業の中にマークアップ作業があるというイメージ

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説