【HTML入門】超基本!マークアップの意味やタグの書き方などを解説

2021.09.17
html マークアップ

HTMLを勉強していて、

「HTMLはプログラミング言語じゃないって聞いたけど本当?」

「マークアップするって良く聞くけどういう意味?」

と思ったことはありませんか?

マークアップとは何か理解することで、よりHTMLを理解して使うことができるようになりますよ。

今回は、以下の内容がわかる記事になっています。

  • プログラミング言語とマークアップ言語の違い
  • プログラミングを学ぶ上で必要な用語
  • マークアップの方法

実際にマークアップのやり方も解説していきますので、HTMLを本当の意味で正しく使えるようになりたい!

という方は、ぜひ最後まで見てくださいね。

HTMLはプログラミング言語じゃない!?

まず初めに、HTMLはマークアップ言語であるということを理解しておきましょう。

あれ?プログラミング言語じゃないの?

と思った方もいるでしょう。

プログラミング言語は、以下のようにコンピューターに計算処理などを指示する言語のことで、主にJavaScriptやPHPなどの言語のことを意味しています。

// JavaScript
var test = 5 + 3;
console.log(test);

マークアップ言語とは何か?については、他の基礎用語と合わせて、次で詳しく解説します。

HTMLを学ぶ上で覚えておきたい超基礎用語

マークアップとは、人間の言語をコンピューターがわかるようにHTMLを使って翻訳することです。

人間の言葉はコンピューターにとっては理解できないものなので、HTMLのタグによってはじめて意味が付けられるのです。

具体的には、以下のようにHTMLのタグを使ってそれぞれの言語に意味を付けていきます。

<h1>これは大見出しです</h1>
<h2>これは小見出しです</h2>
<p>これはテキストです</p>

タグにはそれぞれ意味があるので、「このタグで囲まれた箇所は○○という意味なんだ」とコンピューターが理解できるようになるのです。

マークアップ以外にも、HTMLを学ぶ上でよく使用する基礎用語をがあります。

以下2つの用語も一緒に覚えておきましょう。

マークダウン

マークアップと似ている言葉で「マークダウン」という用語があります。

似ているのは名前だけでなく用途まで同じで、マークダウンもテキストに意味付けをすることを指します。

マークアップと異なる点は、タグではなく「特殊記号」を用いて意味付けを行っていること。

具体的には、以下のように記述します。

#これは大見出しです
##これは小見出しです
これはテキストです 

先ほどのマークアップのサンプルコードと、ブラウザ表示は同じになります。

記述が少なくて済むのでマークダウンを好んで使う人もいますが、主流はマークアップなどで初心者の方はマークアップから覚えましょう。

コーディング

「コーディングする」「マークアップする」

などの言葉が使われていますが、両者の違いを分からずに使用している人も多いでしょう。

コーディングはソースコードを記述すること自体を意味するので、テキストに意味づけを行うことであるマークアップとは意味が違ってきます。

JavaScriptやPHPなどのプログラミング言語を記述することも「コーディング」に当てはまります。

つまり、ソースコードを記述するコーディングの中でにマークアップを行う作業があるということです。

HTMLのマークアップをやってみよう!

では、実際にどのようにHTMLタグを使ってマークアップするのか見ていきましょう!

以下のテキストをマークアップしていきます。


Webサイトのタイトル
Webサイトのディスクリプション(要約)

ヘッダー。Webサイトの名前やメニューバーなどを記載します

大見出し
テキスト

小見出し
リスト1
リスト2
sampl.jpg
https://web-camp.io/magazine/

フッター。Webサイトの名前やサイトマップなどを記載します

最低限覚えておきたい基礎タグを用いて、マークアップする方法を解説していくので、初心者の方は実際にやってみてくださいね。

1.HTMLの枠組みの基本タグ

まずは、HTMLページを作る枠組みを作っていきます。

<html>
 <head>
 </head>

 <body>

  <header>
  </header>

  <footer>
  </footer>

 </body>
</html>

それぞれのタグには、以下のよな意味があります。

htmlタグHTML文書
head文書に関する情報(ヘッダ情報)
bodyタグ文書の本体
headerタグイントロダクションやナビゲーショングループ
footerタグWebサイトに関する情報(著作権、関連文書へのリンク、誰が書いたのかなどの情報)

では、それぞれに先ほどのテキストをマークアップしていきましょう。

2.headタグ内をマークアップ

<html>
  <head>
    <title>Webサイトのタイトル</title>
    <meta name="description" content="Webサイトのディスクリプション(要約)">
  </head>
  ・
  ・
  ・

headタグ内には、Webサイトのタイトルや使用している言語の指定など、文書全体の情報を定義する内容を記述します。

ブラウザ上に表示されませんが、SEO対策で重要なタグです。

bodyタグ内をマークアップ

 ・
 ・
 ・
 <body>  
    <header>ヘッダー。Webサイトの名前やメニューバーなどを記載します</header>
    
    <div>
      <h1>大見出し</h1>
        <p>テキスト</p>

      <h2>小見出し</h2>
        <ul>
          <li>リスト1</li>
          <li>リスト2</li>
        </ul>
      <img src="img/sample.jpg">
      <a href="https://web-camp.io/magazine/"></a>
    </div>
    
    <footer>フッター。Webサイトの名前やサイトマップなどを記載します</footer>
  </body>
</html>

bodyタグ内に記述されたコードはブラウザ上に表示されます。

bodyタグ内で使用される要素の代表的な例と、それぞれの意味は以下の通りです。

divタグひとかたまりの範囲として定義
h1~h6タグ見出し。数値が小さいほど高いランクの見出し
pタグ一つの段落
ulタグ順序のないリストを表示する
liタグリストの項目
imgタグ画像を表示する
aタグハイパーリンクを指定する

h1タグの大見出しや、imgタグの画像など用途が決まっている要素以外に、divタグなど特に意味を持たない要素も存在します。

divタグは、いくつかの要素をグループで囲い、CSSでスタイリングしたい場合などに利用されます。

また、headerタグやfooterタグには、上記のような文書ではなく、以下のようなものを記載する意図で使用されます。

【headerタグ】 ・会社のロゴ ・Webサイトの名称 ・ナビゲーションバー ・SNSのリンク

【footerタグ】 ・著作権についての記述(copyright…など) ・関連文書へのリンク ・サイトマップ ・SNSへのリンクなど

マークアップの意味を理解して適切にHTMLのコーディングをしよう!

今回は、マークアップについて詳しく解説しました。

以下は、この記事のまとめです。

  • HTMLはプログラミング言語ではなくマークアップ言語
  • マークアップすることでコンピューターが理解できる意味が付く

よく耳にする「コーディング」や似ている言葉の「マークダウン」との違いをしっかり理解しておくことが大切です。

正しくマークアップすることは、Webサイトを正確に表示するだけでなく、SEO対策としても重要。

今回ご紹介した以外にも様々なタグが存在しているので、わからない箇所は調べながらマークアップしてみてくださいね。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5