2. HTML
  3. HTMLマークアップの書き方！基礎知識を10分で手に入れよう
HTMLマークアップの書き方！基礎知識を10分で手に入れよう
html

HTMLマークアップの書き方！基礎知識を10分で手に入れよう

どうも、Tommy(@SitommyBlog)です。

初心者の方に向けた内容になります。あまりにも細かすぎる説明だとわかりづらくなると思うので、私が初心者の時こういう風な説明だったらわかりやすい、わかりやすかったことを考慮して書いて行きます。

また、HTML/XHTMLについて詳しくは別の記事に書いていますのでそちらをどうぞ。

ここでは、HTMLのマークアップについて基礎知識をつけて行きましょう。

HTMLファイルを作成

まず、HTMLファイルを作成するには、拡張子『.html』としてファイルを作成します。

例えば、『test.html』とファイルを作成して、中身を以下のように記述すると

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

こちらを保存して、ブラウザに表示させると

Hello World

のように、表示されます。あんなに書いたのに、『Hello World』のみ表示されます。上から順に説明して行くと、

  • DOCTYPE宣言
    ・HTMLの種類を宣言し、ここではHTML5を宣言しています。
  • html要素
    ・HTML文書の最上位要素
  • head要素
    ・タイトル、文字コード、キーワード、説明文、関連ファイルなど設定情報を明記する部分です。また、ブラウザには表示されません。
    詳しくは、
    ・SEO対策もバッチリ！head要素内のテンプレート
    をどうぞ。
  • body要素
    ・コンテンツを記述する部分です。ここに記述したものが実際、ブラウザに表示されます。

ちなみに、『head』内に『<title>』が記述されていますがこちらだけ表示されます。それはどこかというと、

ブラウザのタブに表示されるところがタイトルになります。

マークアップの基礎

先ほど記述した『<p>Hello World</p>』を見て行きましょう。

<p>Hello World</p>

開始タグ<p>と終了タグ</p>で囲んでコンテンツに意味を与えて行きます。

このコードに書いてある<p>は、コンテンツに『段落』という意味を与えています。このように、意味づけをして行くことをマークアップすると言います。

そして、開始タグと終了タグに囲まれた範囲を要素といいます。

その要素に対する様々なオプション設定のような役割を持つのが『属性』と言い、各要素に共通な属性もあれば、特定の要素にしか設定できない属性もあります。

また、要素には2種類に分けられ、ブロック要素とインライン要素に分けられます。

ブロック要素とは、1つの文章のまとまりで前後に改行が入る要素。

インライン要素とは、ブロック要素の内容として用いられる要素で、文章の一部として扱われます。そのため、改行はされません。

ちなみに、このpタグはブロック要素と言われる分類に入ります。

ここから、よく使うタグの紹介をして行きます。

aタグ（エータグ）

<a href="https://www.google.co.jp/">google</a>

aタグには、href属性が設定されこれは特定の要素しか設定できない属性です。ちなみにhref属性はaタグのみが設定できる属性となっています。

href属性は、他のページのURLをいれます。そうすることで、aタグに囲まれたコンテンツをクリックすると指定したページに飛ぶことができます。

この、aタグはインライン要素と言われる分類に入ります。

imgタグ（アイエムジータグ又はイメージタグ）

<img src="画像のパス" alt="画像の説明">

テキストだけが表示されているWebサイトなんてだれも見たくないですよね。ちゃんと画像もついて説明されると理解も増すと思います。その画像を表示するために『<img>』を使います。

注意することは、imgタグには終了タグがありません。

このことを、『空（から）要素』と呼びます。

空要素とは

通常タグは、開始タグと終了タグで囲む必要がありますが、空要素には終了タグがありません。

HTML5では、『<img>』で問題ないところ、XHTMLではより厳密に書く必要があるため『<img />』と書かなければなりません。

HTML5に『<img />』と書いても問題なく表示されますが、XHTMLに『<img>』だとエラーが起こります。そういった違いも徐々に覚えて行きましょう。そして、imgタグ以外にも複数存在しますので後ほど表で軽く紹介します。

『src』属性には画像のパスを記述するので画像を入れているフォルダーを相対パスなのか、絶対パスなのか、はたまたルートパスなのかで指定する必要があります。

制作するWebサイト構成によりますが、基本的には相対パスでしょう。

パスについてわからない人は、下記の記事を御覧ください。

『alt』属性には、画像の説明を入れるのですが、例えばお花の画像があります。

altの説明画像

このように説明を書くことで、検索エンジンにもひっかかり安くなり、音声機能で読み上げてくれます。そうすることにより、目の不自由な方でもWebサイトが閲覧することが可能になります。

この、imgタグはインライン要素と言われる分類に入ります。

h1〜h6タグ（エイチワンタグなど）

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>

hタグには、1から6まであり全て見出しを意味します。

h1から見出しレベルが大きく、もっとも小さい見出しがh6ということになりますが、Webサイトを制作するにあたり構成段階で見出しは多くても3つか4つに収まるように構成を作って行くためh6まで使ったことは私はありません。

試しに、上記で書いてあるコードをかき変えてブラウザに表示して見てください。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
</body>
</html>

このように、デフォルトで文字サイズが異なって表示されます。これは、それぞれ見出しレベルを意味しているため1がもっとも大きいサイズになって行きます。

ただ、ブラウザによって違いは出てきます。Chrome/Firefox/IE/Edge/Safariらへんを確認して見ましょう。

この、hタグはブロック要素と言われる分類に入ります。

divタグ（ディブタグ）

このタグには、特に意味がありません。でも、使用する頻度は上位に入ってきます。なぜなら、BOXとしてタグをまとめて記述してHTMLは書いて行きます。そのため、『<div>』は必要になってきます。

どのように記述して行くかというと、

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>見出し１</h1>
<div>
  <h2>見出し2</h2>
  <p>テキストテキストテキスト</p>
</div>
<div>
  <h2>見出し2</h2>
  <p>テキストテキストテキスト</p>
</div>
<div>
  <h2>見出し2</h2>
  <p>テキストテキストテキスト</p>
</div>
</body>
</html>

このように、divタグで囲むことによってh２タグとpタグは1つの塊で意味を表すものだと理解しやすくなり、またCSSをスタイルをつけるときに楽になります。

この、divタグはブロック要素と言われる分類に入ります。

spanタグ（スパンタグ）

このタグも同じで特に意味がありません。でも、使い方は同じです。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>見出し１</h1>
<div>
  <h2>見出し2</h2>
  <p><span>テキストテキストテキスト</span></p>
</div>
<div>
  <h2>見出し2</h2>
  <p>テキスト<span>テキストテキスト</span></p>
</div>
<div>
  <h2>見出し2</h2>
  <p>テキストテキスト<span>テキスト</span></p>
</div>
</body>
</html>

spanタグはインライン要素なので、ブロック要素の中で囲むタグになります。例えば、spanタグに囲まれた部分だけスタイルを変えたいなど様々な用途で使用します。

先ほども言いましたが、spanタグはインライン要素と言われる分類に入ります。

もっとたくさんタグはあり覚えていかなければいけないですが、頻繁に使用するタグはせいぜい10個程度だと思います。

それくらいはすぐ覚えられると思いますが、こういう仕事は全て完璧に覚える必要はなく、必要になったときにどう扱えばいいかわからなくなった場合、検索すれば済みます。

覚えることも大事ですが、検索力もとても大事なスキルだと私は思います。

使用頻度が高いタグの表

マークアップの作業は、複雑な内容になればなるほど作り手によって大きく変わっていきます。

なので、私の記事や別の方の記事の内容が少し違っていても不思議ではありません。

教えてもらった環境や、1人の考え方で違って当たり前です。でも、致命的はミスや明らか文章構造からかけ離れたマークアップをして入れば問題になるのでそこだけ気をつけましょう。

私もよく現場でいろんな人と、「ここって見出しとして扱いになりますかね？」など意見を交換しています。

初め、大丈夫かな？っと悩むことあると思いますが、マークアップ本来の役割と各要素の意味をしっかり理解し考慮し作業に取り組めば、そうそう大きな間違いにならないと思います。

分類 要素 用途 備考 利用頻度
ブロック要素 <h1>〜</h1>
…
<h6>〜</h6>		 見出し h1〜h6までの6段階 ☆5
<div>〜</div> 任意の範囲・グループ化 この要素は特に意味はない ☆5
<section>〜</section> 任意の範囲・グループ化 章として囲むために使用 ☆5
<article>〜</article> 任意の範囲・グループ化 内容が単体で完結するセクションであることを示す際に使用 ☆3
<p>〜</p> 段落   ☆5
<ul>〜</ul> 箇条書きリスト（順不同） li要素とセットで使用 ☆5
<ol>〜</ol> 箇条書きリスト li要素とセットで使用 ☆4
<dl>〜</dl> 定義リスト dt要素とdd要素とセットで使用 ☆4
<table>〜</table> 表組み tr要素とtd要素などとセットで使用 ☆4
インライン要素 <a>〜</a> ハイパーリンク リンクを貼るときに使用 ☆5
<em>〜</em> 強調 強勢する箇所に使用※HTML5で変更点あり ☆3
<strong>〜</strong> より強い強調 強勢する箇所に使用※HTML5で変更点あり ☆3
<b>〜</b> 太字となるようなテキスト 文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用 ☆4
<span>〜</span> 任意の範囲   ☆5
<img> 画像   ☆5
<br> 改行   ☆5

上記の表は横スクロールします。

※上記の表はHTML5をメインとして書いております。XHTMLの場合、多少違いがありますので注意ください。

まとめ

今回は基礎知識として説明させていただきました。次回はもう少し深い話をしていこうと思います。

また、今回たくさんの要素/タグが出てきました。読んだだけだと理解はできないので、手も一緒に動かして見てください。この業界はやったもん勝ちです。

html

Related

Ranking

目次