HTML？マークアップ？HTMLタグを使ったマークアップ法とは？

HTMLを学んでいるとマークアップという言葉が出てきます。

そこで今回はHTMLとマークアップについて説明しながらHTMLタグを使ったマークアップ法を初心者にもわかりやすく紹介していきます。

HTMLとは

HTMLはHyper Text Markup Languageの頭文字をとった略称になります。

HyperTextとはリンクを埋め込んだり貼り付けたりできるテキストのことで、この機能を使って関連する情報を結び付けることができ、情報を整理することができるというのが大きな特徴です。

ウェブページを作る基本のマークアップ言語で、ほとんどのウェブページがHTMLを使って作られています。

HTMLの書き方

HTMLタグとは、そのページの内容を要素(タグ)で囲んだものです。

タグは基本的に<タグ名>内容というように構成されます。

<タグ名>は開始タグ、は終了タグと呼ばれ、終了タグにはスラッシュがついているのが開始タグとの違いです。

開始タグにはタグ名の他に属性を書き込む場合もあり、タグ名によっては終了タグを使わない場合もありますが、基本的には<タグ名>内容で構成するというのを覚えておきましょう。

マークアップとは

マークアップとはHTML言語を使ってサイト内の文章に意味付けをしていく作業のことです。

先ほど使ったHTMLタグを使って、この文章はタイトル、この文章は見出しというように、その文章に意味を付けてあげることをマークアップと言います。

マークアップの役割

正しくマークアップをすることで、SEO対策の効果があります。

マークアップすることでコンピューターにどのようにウェブサイトを表示させるか伝えることができます。

そのため、正しくマークアップをすることでコンピューターがページの情報を理解して、検索結果の上位に表示させることができるという役割があります。

マークアップ言語

マークアップの言語には先ほどから紹介しているHTMLと、XMLという2つの言語があります。

基本的にはHTML言語を使ってマークアップをしていきます。

XML言語は主にウェブアプリケーションを作るときに利用される言語です。

HTMLとXMLの大きな違いは、タグ名を自由に決められるかどうかになります。

HTMLでは見出しは

<h1>見出し</h1>

と入力すると決まっているのに対して、XMLでは<時間>12：00のように、自分でタグ名を決めることができます。

これによってデータ管理ができることから、XML言語はウェブアプリケーションで使われることが多い言語となります。

マークアップとマークダウンの違いとは?

マークアップと似た言葉としてマークダウンという言葉があります。

このマークダウンは、サイト内の文章に意味付けをしていくという点ではマークアップと同じですが、意味付けのやり方が異なります。

タグを使って意味付けをするマークアップに対して、マークダウンは特殊記号を使って意味付けを行っていきます。

マークアップでの大見出しの指示は

<h1>大見出し</h1>

と書き込むのに対して、マークダウンでは#大見出しと書き込むことでマークアップと同じように大見出しとして表示させることができます。

記述が少なく済むというメリットがありますが、マークアップが主流なので初心者の方はマークアップから覚えるのがおすすめです。

マークダウンについては下記の記事で解説しています。

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

マークアップとコーディングは似ていることから混同されることも多いですが、マークアップはサイト内の文章に意味付けをしていく作業のことをさすのに対して、コーディングはマークアップ言語やプログラミング言語を使ってコンピューターが処理できるプログラムを入力していく作業のことという違いがあります。

HTMLタグを使ったマークアップ法

実際にHTMLタグを使ったマークアップ法にはどんなものがあるのかを紹介していきます。

基本のタグ6選

どんなWebページを作る際にも使うことの多い、これだけは絶対に覚えておくべき基本のタグを6つ紹介していきます。

中にはタグの中に属性を使ってさらにこまかく設定を行っていくものもあるので、属性やタグの使い方と共に、タグの意味を理解していきましょう。

h1～h6(見出し)

見出しタグはSEO対策にも欠かせないタグになります。

見出しの大きさはh1→h2→…h6とどんどん小さくなっていきます。

h1は大見出し、h2は中見出しと呼ばれ、h3~h6は小見出しとして必要に応じて使います。

タグの使い方は

<h1>大見出し</h1>

のような使い方になります。

見出しタグについては下記の記事でも詳しく解説しています。
▶ 見出しの書き方とWEBにおける見出しタグの付け方を教えます

br(改行)

段落の中で文章を改行する際に使われるタグです。

タグの使い方は

今日の天気は晴れ<br>

のような使い方で、終了タグはありません。

p(段落)

こちらは文章を段落わけする際に使われるタグで、pタグで囲われた部分が1つの段落として認識されます。

pタグの前後に改行が入るので先ほどの「brタグ」と混同されやすいのですが、pタグは段落わけ、brタグは段落の中での改行という違いがあります。

つまりbrタグはpタグの中で使われるということになります。

タグの使い方は

<p>今日の天気は晴れ<br>
最高気温は28度です</p>

のような使い方になります。

div(ブロック)

文章をブロック分けする際に使われるタグで、divタグで囲われた部分が1つのブロックとして認識されます。

こちらもpタグと混同されやすいですが、divタグの中には様々なタグを入れることができ、ここで紹介しているタグは勿論のこと、divタグの中にさらにdivタグを入れるような使い方もできます。

divにはidやclassを使ってブロックに名前付けをすることができ、cssを使ってページレイアウトをする際に役立ちます。

タグの使い方は

<div>
<h2>天気予報</h2>
<p>今日の天気は晴れ<br>
最高気温は28度です</p>
</div>

のような使い方になります。

img(画像)

画像を表示させる際に使うタグで、中にsrc属性やalt属性を入れて画像を表示・設定をすることができます。

src属性は画像の指定(画像のURL)、alt属性は画像が表示されなかったときに代わりに表示されるテキストを指定する属性になります。

タグの使い方は

<img src=”画像URL” alt=”代替テキスト”>

のような使い方になります。

a(リンク)

テキストや画像をクリックして指定のページを開くためのタグです。

aタグの中に属性を入れることができ、URLを入れてリンクを設定する際にはhref、別のタブでリンク先を表示させるにはtarget属性を”blank”に設定したりと、中に属性を入れてリンクへの誘導方法を設定することができるのが特徴です。

タグの使い方は同じページでリンクを表示させる場合

<a href=”URL”>リンク名</a>

別タブで表示させる場合は

<a href=”URL” target=”blank”>リンク名</a>

というような使い方になります。

まとめ

• HTMLはHyper Text Markup Languageの頭文字をとった略称で、ほとんどのウェブページがHTMLを使って作られている。
• HTMLを書くときは基本のソースコードをテンプレートとして使って書いていくのが良い。
• HTMLタグとは、そのページの内容を要素(タグ)で囲んだもので、基本的に<タグ名>内容というように構成される。
• マークアップとはHTML言語を使ってサイト内の文章に意味付けをしていく作業のこと。
• 正しくマークアップをすることでコンピューターがページの情報を理解して、検索結果の上位に表示させることができるという役割がある。
• マークアップの言語にはHTMLと、XMLという2つの言語があり、基本的にはHTML言語を使ってマークアップをしていく。
• タグを使って意味付けをするマークアップに対して、マークダウンは特殊記号を使って意味付けを行っていく。
• マークアップはサイト内の文章に意味付けをしていく作業のことをさすのに対して、コーディングはマークアップ言語やプログラミング言語を使ってコンピューターが処理できるプログラムを入力していく作業のことという違いがある。

HTMLはwebページを作る際に土台となるとても大切な部分です。

まずはHTMLタグを覚えてマークアップしながら運用しやすいサイト作りを目指してくださいね!