マークアップとは何か？HTMLで練習しながら理解する

HTMLの勉強を始めたときに「マークアップってそもそも何？」の疑問をいまいちピンこないままHTMLを使い始めたのを思い出しました。

今さらですが私なりにマークアップとは何かまとめました。

マークアップとは何か？そして「何を使用してどんなことをやるのか」の疑問に対してヒントになるような内容で説明します。

1. マークアップとは？
2. マークアップとは何を使用すればいいのか？
- 2.1. HTMLの練習にテキストエディタを使用
- 2.2. マークアップするHTMLファイルを作成
3. マークアップとはどのようにやるのか練習
- 3.1. HTMLで意味を持たせるのがマークアップ
- 3.2. マークアップしてHTMLの要素を作る
4. まとめ

マークアップとは？

マークアップとは、HTMLファイル内でHTML言語というものを使用して、「ここが見出し」「ここは文章」など文書を構成する各部分にマーク(目印)を付けることにより意味を持つ文書構造にしていく作業のことです。

文書を構成する各部分にマークをつける作業で使用するHTML言語は、タグというものを使用してマークアップをします。

たとえば文書に見出しと文章をマークアップする場合が以下のマークアップです。

<h2>道は長く険しい</h2>
<p>まさか、こんなに道が険しいとは思わなかったさ...</p>

HTML言語で見出し部分に<h2></h2>というタグを、文章には<p></p>というタグを、文章の始まりと終わりに囲むように目印をつけるのがマークアップ。

マークアップすることで文章構造の中のタグで「見出し」「文章」としての意味を持たせることができます。

マークアップという用語をニュアンスで理解してみるとヒントになるかもしれません。

マーク⇒目印
アップ⇒上げる

文書構造に「目印をつけてファイルに上げる」もしくは「目印を付けてあげる」

マークアップして目印を付けるのは何に対して必要なのか？主に2つの役割があります。

検索エンジンに文書構造の意味を伝える役割
Webページを装飾するCSSに対しての役割

普段わたし達は文字を書くときのメモ用紙やメモアプなどに、自分自身や他の人に対して意味が理解できる文字で文章を構成します。

このとき書いた私たちが理解できる文字の意味や構成は検索エンジンには理解ができないので、マークアップしたHTML言語のタグを目印にして意味を理解させるために必要です。

またマークアップしたHTMLのタグを目印にした文書構造を骨組みにしてWebサイトに表示する見出しや文章などの各構成部分の色やレイアウトをCSSでデザインするためにも必要です。

そのためマークアップはWebサイト制作の土台や基礎として必要なことでもあり「マークアップエンジニア」という職業の方達が必要とするスキルにもなるのがマークアップです。

マークアップとは何を使用すればいいのか？

HTMLのタグでマークアップ練習してみようと思ったときに、マークアップ作業には何を使用すればいいのか？練習する前の段階で疑問ができるかもしれません。

マークアップには「テキストエディタ」を使用します。

使用するテキストエディタでHTMLファイルを作成することで、作成したファイル内にマークアップする文章やタグの記述ができます。

HTMLの練習にテキストエディタを使用

HTMLでマークアップの練習に使用するテキストエディタとは、テキストファイルを編集できるソフトのことです。

Windowsなら「メモ帳」Macなら「テキストエディット」という、それぞれに標準で付いてるソフトを使用してマークアップすることも可能です。

HTMLファイルの作り方をMacとWindowsで覚える

マークアップのやり方を軽く練習してみたいくらいならメモ帳やテキストエディットでも問題ないです。

しかしWebサイト制作のように、HTMLのマークアップ言語以外のプログラミング言語が必要になる場合も多く、その場合メモ帳やテキストエディットでは機能不足なためマークアップなどに特化したテキストエディタをインストールして使用するのが良いです。

テキストエディタVisual Studio Codeをインストールする

テキストエディタを使用してみたい方は上の記事が参考になるかと思いますのでよければ読んでみてください。

マークアップするHTMLファイルを作成

マークアップとは主に文書構造を組み立てていく作業をHTML言語を使用してHTMLファイル内でします。

このときのマークアップしていくHTMLファイルとは、文書ファイルの形式でファイルの拡張子を.htmlにして作成したファイルのことをいいます。

例えばVisual Studio CodeのテキストエディタでHTMLファイル作成をする場合

テキストエディタを開くとプレーンテキストの新規ファイルが開いているので、キーボードでcommand+sを入力します。

するとファイル名を入力できるのでindex.htmlのように拡張子を.html付きで入力して保存をします。

ファイル名の保存後にはHTMLファイルになった状態のファイルなので、HTML言語を使用してマークアップの作業をすることができます。

マークアップとはどのようにやるのか練習

マークアップとはどのようにやるのかを実際に手を動かして練習するとマークアップについての理解が深まります。

テキストエディタでHTMLファイルを作成した中に文書だけを書いた以下の状態からマークアップとはどのようにやるのか練習してみます。

この道は長く険しい

まさかこんなに道が険しいとは思わなかった...
それに歩いてきた道を振り返ると、これまでの道も険しかった...
今、私は3つの選択肢に迷いが生じている

自分を信じて前に進む
初心に戻るため引き返す
とりあえず寝る

私が選んだ選択肢は続きを見て欲しい

続きを読む

マークアップ前に文書をブラウザに表示すると非常に視覚的にも見づらいです。

HTMLで意味を持たせるのがマークアップ

マークアップとはHTMLファイル内の構造を検索エンジンが理解できるように意味を持たせる目的、ウェブ上に表示する文書構造の装飾と関連づける目的を持ちマークアップします。

下記のように各文章には両端に小なり記号と大なり記号で囲まれたアルファベットを記述します。

<h2>この道は長く険しい</h2>

<p>まさかこんなに道が険しいとは思わなかった...</p>
<p>それに歩いてきた道を振り返ると、これまでの道も険しかった...</p>
<p>今、私は3つの選択肢に迷いが生じている</p>

<ol>
    <li>自分を信じて前に進む</li>
    <li>初心に戻るため引き返す</li>
    <li>とりあえず寝る</li>
</ol>

<p>私が選んだ選択肢は続きを見て欲しい</p>

<a href="smple.html">続きを読む</a>

囲むようにマークアップした小なり記号と大なり記号とアルファベットで構成してるのが文章を意味付けしているHTMLのタグです。

上記のマークアップした構造を１つずつ説明します。

見出しの意味を持たせるときは、hタグというアルファベットのhと1から6までの数字の組み合わせでマークアップします。上記のマークアップなら「この道は長く険しい」の文章にh2タグで文章の両端に記述します。