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

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

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

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

マークアップとは？

マークアップとは、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なら「テキストエディット」という、それぞれに標準で付いてるソフトを使用してマークアップすることも可能です。

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

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

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

マークアップする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タグで文章の両端に記述します。

するとマークアップした文章は文書構造内の「見出し」の意味を持つ要素になり表示できます。

文章になる部分にはHTMLのタグのうち、文章としての意味を持たせることができるpタグでマークアップします。

文書構造内で「文章」としての意味付けになり表示できます。

文章で箇条書きにしたい部分がある場合などでは「箇条書き」の意味を持つHTMLのタグのliタグを用いてマークアップします。表示上でもリスト形式の表示ができます。

マークアップする箇条書きにはいくつかの種類のタグがあり、今回は表示のとき番号付きのリストにするHTMLのolタグをliタグに囲んでマークアップします。

ウェブサイトで見かけることが多いリンクもHTMLのタグで意味付けをして文書構造内で「リンク」の意味を持たせると、検索エンジンがリンクを見つけられるようにマークアップできます。

リンクを作るマークアップの仕方はHTMLのaタグを使用するのですが、<a></a>とマークアップするだけではリンクにならなず、half属性というものでリンク先のURL指定をして開始タグにマークアップすることでリンク形式にできます。

マークアップしてからブラウザでHTMLファイルを表示すると、見出しや文章、リストやリンクのそれぞれの意味を持つタグを目印にしたブラウザが初期値のCSSのレイアウトで表示してくれるので、ブラウザに対してマークアップの意味づけができていることがわかります。

マークアップしてHTMLの要素を作る

マークアップとは文書構造に意味を持つ要素を作ることでもあります。

HTMLのタグで文章の始まりにマークアップしたタグが＜開始タグ＞、文章の終わりにマークアップしたタグが＜/終了タグ＞。

このときの開始タグから終了タグまでマークアップした部分を「要素」と言います。

例えば見出しのh2なら「h2要素」とか「見出し要素」と言ったりします。

マークアップした要素を作ると、マークアップする役割のうちの１つでCSSを使用した装飾に対してのマークアップに関係が深くなります。

たとえばマークアップした見出しの文字色をピンクに装飾したいとします。

h2{
    color: deeppink;
}

CSSはスタイルシートに書き、基本的に「セレクタ」「プロパティ」「値」で構成する書き方をします。上記のCSSではh2をセレクタ、colorをプロパティ、colorの値としてカラーネームのdeeppinkを記述してます。

このようにCSSを書くとh2の見出しの文字色がピンクで装飾できます。

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

これは、文字色を装飾するCSSの目印要素としてHTMLファイル側で見出しをh2タグで囲み、見出し文章を含めたh2要素をマークアップして、CSSのセレクタとの意味付けの役割が果たせてるのでCSSで装飾ができます。

CSSで装飾をするためのマークアップとは、装飾をする目的の部分にタグで囲んでマークをつけた目印の要素を作ることが理解できるかと思います。

まとめ

マークアップとはWebサイト制作をするときに骨組みとなる基礎作りとして、とても重要な役割をします。

ネット上にはさまざまなデザインのWebサイトがありますが、基本は同じでも、どれも異なる文書構造にマークアップした作業を経てデザインされています。

そのため基本的なマークアップだけではなく、基本を応用できて、自分以外の人が見ても意味が理解しやすい、そして修正がしやすいマークアップができるようになるのが理想だと思っています。