マークアップとは？意味やHTMLでの正しいやり方、コーディングとの違いを詳しく解説

2.　HTMLでマークアップをしてみよう

ここからは、実際にHTMLでマークアップするときに必要となる、基本的なHTMLタグやそれぞれのタグの使い方を解説します。

HTMLは、英語表記がベースとなっています。まずはDOCTYPE宣言と呼ばれるコードから、「htmlタグ」「headタグ」「metaタグ」「bodyタグ」など、表示されるWebサイトの大枠を担うコーディング部分を記述します。続いて、コーディングのタグの間に、「hタグ」や「pタグ」などのマークアップ部分を記述していきます。

コーディング部分とマークアップ部分を同一の画面に記述していくため、HTMLに馴染みのない方は慣れるまでに時間がかかるかもしれません。しかし、基本なソースコードの書き方は変わらないので、コーディングの場所とマークアップの場所を覚えておくと安心です。

このように、HTMLの基本構造を知っておくことで、Webサイト制作を外注するときなども的確な要望を出せるようになります。

次項からは、HTMLを記述するときによく使用されている基本的なHTMLタグを、実際のソースコードを示しながら解説します。

基本的なHTMLタグ

Webサイトを制作する中でよく使われているHTMLタグを以下の表にまとめました。

上記の表に記載したHTMLタグは、あらゆるWebサイトやWebページで使われているため、優先的に覚えておきましょう。

HTMLタグを使って、かんたんなマークアップをしてみよう

基本的なHTMLタグが理解できたところで、かんたんなマークアップ作業をやってみましょう。

例えば、以下のような文章があったとします。

上記の表記にはHTMLタグが一切ないため、見出しにしたい箇所やリスト化したい料金プラン、アンカーリンクなどを正しく読み取ってもらえません。正しく表示するためには、以下のようなマークアップが必要です。

このようにそれぞれの文章が担う役割に合わせたHTMLタグを活用しましょう。コンピュータにも読み取れるようにマークアップすることで、ユーザビリティの向上だけでなく効果的なSEO対策ができます。

また、文章内の文字を太字にする「strongタグ」やグループ化して一部分のみレイアウトや装飾を変更する「divタグ」なども頻繁に使われるため、合わせて覚えておきましょう。

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

マークアップとコーディングの違いがわからないという人も多いですが、以下のように作業目的が異なります。

●　マークアップ

見出しや段落などの文章構造を明確化させる作業

●　コーディング

ソースコード全体の記述ルールなどを明確化させる作業

マークアップがコンピュータに文章構造を正しく理解してもらうための役割であるのに対し、コーディングはコンピュータに読ませるソースコード全体のルールをあらかじめ決める役割を担っています。マークアップを正しく理解するためには、コーディングとの違いを明確にしておくと良いでしょう。

ここからは、具体的なマークアップとコーディングについて、実際のソースコードを示しながら解説します。

HTMLでコーディングしてみよう

先ほどマークアップの例で使用した文章に、以下のようなコードを追加するのがコーディングです。

HTMLによるコーディングでは、DOCTYPE宣言と呼ばれるコードから、「htmlタグ」「headタグ」「metaタグ」「bodyタグ」など、表示されるWebサイトの大枠部分を記述します。ちなみに「bodyタグ」の中に記述されているタグは、サイト内の文章をマークアップしたものです。

マークアップとコーディングは、明確に記述する場所が分かれているわけではないことから、意味と役割を混同してしまう方が多いです。しかし、Webサイト制作を依頼する場合は知っておきたい違いのため、それぞれの役割を理解しておきましょう。

4.　まとめ

今回はWebサイト制作において必須ともいえるマークアップの意味から、コーディングとの違いまで詳しく解説しました。マークアップとコーディングの違いのように、Webサイト制作には専門的な知識が必要です。

基礎知識として吸収することは重要ですが、実際に自社が思い描くようなWebサイト制作をする場合、Webサイト制作を専門的に扱っている企業に依頼するほうが良いでしょう。仕事の外注先やビジネスパートナーを探すときには、無料で利用できる「リカイゼン」などのマッチングサービスを積極的に利用してみるのもおすすめです。