HTMLの基本を知るには

812 views

HTML 言語とは…

ウェブページに掲載するテキストや画像などの情報(コンテンツ)に『タグ』を付けて、『 ページの構造を記述・説明する言語 』であり、『人が読めて、機械(ブラウザ)が処理できる言語 』です。

ということで、堅い定義のような説明文から入らせてもらいましたが、想像がなんとも…という方もいらっしゃるのではないでしょうか。
なので、ザックリとしたイメージ・考え方の土台から説明していきたいと思います。

HTML 言語の正式名称

『Hyper Text Markup Language』

の頭文字です。それぞれの意味するところは、

“Markup”

なんとなく語幹から伝わりますが、マークを付けることです。
HTML 言語では、コンテンツにその表示方法を指示・指定するマーキングを施します。
このマーキング作業が、『タグ付け』 と呼ばれています。

“Hyper Text”

専門用語のため該当する和訳は無く、”ハイパーテキスト”とそのままで呼ばれています。
ウェブサイトは複数のページの集合体です。文章・画像・音声など、複数のコンテンツが含まれています。

その中でより詳細なページ・関連するページへなどの、他ページと繋ぐためにページ間のリンク(結び付け)を設けるものがハイパーテキストです。

サイトを構成するコンテンツやページらを集合体として関連するもの同士で相互に結びつける為のシステムですね。

“Language”

そのまま和訳で言語です。
HTML が上記の特殊な意味・仕様を持つプログラミング言語であるということですね。

どのコンテンツがどういった情報として、
どのようなレイアウトで表示し、
リンク先で何を表示するか、

などなど…

これらをサイトの構造設計に沿って、文字や画像にマーキングしていきサイト・ページを構築していきます。

タグ付け(マーキング) は言わば、人間しか読めない状態のコンテンツに
ブラウザが理解して上記の付加された処理を理解できるように印をつけて指示を出すことです。
なので、『 人が読めて、機械(ブラウザ)が処理できる言語 』なのです。

HTML 言語は、機械(ブラウザ)にタグ付けによる指示・指定をし、どのコンテンツをどのように処理・表示するか、どのコンテンツがどのページへ関係・接続するかを理解させるための言語です。

仕様・基礎情報

HTMLの仕様

というわけで、実際のソースを元にザックリとしたHTML言語のイメージ・記述方法を見ていきたいと思います。
掘り下げた説明は後述していくので、まずは実際の記述を始める前にこんな感じなんだ…程度に基礎知識をつけましょう。

sample_1-1
https://ezo-style.com/sample/sample-1-1.html

<h1>株式会社エゾスタイル</h1>
<h2>システムは、常に変化する。</h2>

ページトップに「株式会社エゾスタイル」
スローガン風に「システムは、常に変化する。」
と入力してみました。

簡易ではありますが、タグ付けとは基本的にこれだけです。

一部例外はありますが、表示させたいコンテンツを『タグ “< >” “< / >” 』で挟んでマークするのが基本の記述方法です。

今からHTMLを使用される方は、２０２０年１１月現在の最新バージョン 「HTML5」 を利用されるかと思います。
HTML5には、約２００種ほどのタグが用意されております。
一般的に常用するタグの種類は３０ー４０種程度と言われております。

余談

構造が複雑化、細かい詳細設定をつけることで使用するタグが増え難解になっていきます。
しかしながら、SEO対策が優先順位にまだ無い開発段階であれば、種類を絞って問題ないです。とりあえずのタグで仮止めを行い、後に正しいと思われる種のタグに置き換えることができます。

用途によっては１０種程度でシンプルなもの、個人の有用性に特化したもの、特定の人しか利用しない、など異なる目的で製作されたものもあります。
なので、タグの使い分けは、それぞれの優先するものに基づいて判断が必要です。

こちらでは、最もベースになるタグのみを紹介していきますのであしからず。

名称と構造・記述ルール

タグの構造とそれぞれの名称

ということで早速、タグの構造について掘り下げていきましょう。
ページの製作に無くてはならない、リンクを施したコンテンツの記述を例に見ていきたいと思います。

sample_1-2
https://ezo-style.com/sample/sample-1-2.html

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

ここでは、<p>タグと<a>タグを使用しています。
<p>タグ は、”P“aragraphの意です。このコンテンツはテキスト・文章であることを示しています。
<a>タグ は、”A“nchorの意です、リンクの設置を意味します。

『開始タグ・終了タグ』

基本的に、タグは対象のコンテンツの開始と終了に番いで配置します。

終了タグには『 / (ｽﾗｯｼｭ) 』が付くので記述時は注意してください。
終了タグがないものも一部あります。

『属性・値』

開始タグの中にある ” href “、これは『属性』 と呼ばれる部分になります。

属性は、対象のタグについて、機械側にその「詳細」を伝えます。

値は、その「詳細」の内容、こうなるようにしなさい(してます)、こういうものです、といった指示とその説明のような部分です。

※　値には、" " (ﾀﾞﾌﾞﾙｸｫｰﾃｰｼｮﾝﾏｰｸ)が絶対に必要です。

今回の場合だと、
<a>タグ　　→　”どこかにリングで飛びます。”
　　　　　　→→　href属性　→　”リンク先は、”
　　　　　　→→→　値　→　”https://www.google.co.jp“　というページへ
となります。

HTML言語のみであれば、これらの　開始タグ・終了タグ・属性・値 の４つが主な構造要素です。
これさえ押さえれば、ソースを見ることでおおよそのコンテンツとページ構成を読み取ることができるようになるかと思います。

『記述ルール』

コンテンツ(テキスト)を除いて、コーディングは 半角英数字の小文字 のみを基本的に使用します。
作成・リンクを行うフォルダ名・ファイル名は、 半角英数字の小文字と” – (ﾊｲﾌﾝ)・ _ (ｱﾝﾀﾞｰﾊﾞｰ) ” のみ使用します。

上記を怠るとページや画像の差し込みのリンクが上手く動作しない、記述や動作が誤っているものと判断されブラウザ側で読みこまない、
などが起きてレイアウトが崩れる・表示エラー等のバグが発生するので注意してください。

ということで実は、sample-1-2は未完全です！
タグを並べただけの状態にしているので、ページで表示してみると<p>タグ のテキストが表示されるだけで、リンクの働きが反映されてません。

ネストといわれる、構造に沿った記述をしていないからです。次は、そのネストについて触れていきましょう。

ネスト・階層・親子関係

ネスト

前章で説明したとおり、タグ付けは基本的にコンテンツをタグで挟み込むことで行います。
なので、p要素を<a>タグでネスト(挟み込み)しなければなりません。

※　コンテンツにタグ付けしたものを『要素』と呼びます。

sample_1-3
https://ezo-style.com/sample/sample-1-3.html

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

ということで、

タグはコンテンツのみでなく要素(タグ+コンテンツ) も挟み込めます。

このようにタグ内にタグを使用する構造のことを『ネスト(入れ子)』といいます。

後ほど図解を含め説明しますが、HTML言語が難解になる理由の１つには、
ページの構成にこだわればこだわるほど、このネストが多くなり『 階層 』が増えていくことが挙げられます。

階層と親子関係

結論からいうと、「家族関係」を比喩したそれぞれ相対的な関係性が「階層」同士で存在します。

例として、ネストが組まれている３階層のソースを準備してみました。

sample_1-4
https://ezo-style.com/sample/sample-1-4.html

<div>
    <h3>リンクから今すぐチェック</h3>
    <a href="https://www.google.co.jp">
        <p>google検索</p>
    </a>
</div>

とはいっても、イメージが沸かないですよね…

そこで、
HTMLの構造を理解するには、ボックス状またはツリー状のものを思い浮かべると分かりやすいです。

[ボックス状]

[ツリー状]

最も「上 / 外」の階層がdiv要素です。最も「下 / 内」の階層がp要素です。第２階層が、h3要素とa要素にあたりますね。

『親要素』

下の階層から見た１つ上の階層の要素を指します。

p要素から見たa要素
a要素から見たdiv要素
h3要素から見たdiv要素

の関係にあたります。

『子要素』

上の階層から見た1つ下の階層の要素を指します。

div要素から見たh3要素
div要素から見たa要素
a要素から見たp要素

の関係ににあたります。

※さらに細かいところだと、h3要素とa要素は”兄弟関係”などと色々あるのですがそれは省きます。気になる方は知らべてみてください。

ネストを組むと必ずこの『親子関係』が発生します。

そして、この親子関係には『継承』という重要な仕様があります。

この継承という仕組みは、CSSに関わる部分なので後ほど説明します。

ここではネストと親子関係についてのイメージを持ち、
実際に記述する際には、複数の要素を意図しない配置にしないように構造を理解しておきましょう。

作業環境の準備・ベースの要素

HTMLソースのコーディングを始めるにあたって、必ず必要な要素や初期設定を説明していきたいと思います。

ほぼテンプレートのようなもので大体のWEBサイトが使用しているで、ニュアンスさえ掴めてしまえばコピー＆ペーストで既存のソースを再利用し、入力作業を省いてしまいましょう。

フォルダ・ファイルの配置

まずは、任意のディレクトリ内に上記のフォルダ・ファイルを作成してください。

「css」は、後ほど作成するCSSファイルを入れる場所です。

「img」は、背景や挿入する画像ファイルを入れる場所です。

そして、これからの作業のメインになるファイルが「index.html」です。

基本的にサイトには、１ページに１つのhtmlファイルを用意しますが、
トップページ(ホーム画面) になる最初のファイルは”index.html“という名称を使います。

この名称自体に仕様・機能が設けられているので、

何か特殊な用途などがない限りはこの名称を使用しましょう。

では、htmlファイルをお使いのテキストエディタで開き、コーディングに移ります。

※ まだエディタをインストールされていない方は、VSCode(無償)のインスト―ルをおすすめします。

コーディングスタート時

最も大きな要素を構成し、ベースになる必須のタグを記述します。
土台のタグなので、１つのhtmlファイル内に複数回使用しないです。初期設定みたいな捉え方でいてください。

sample_1-5
https://ezo-style.com/sample/sample-1-5.html

<!doctype html>
<html lang=jp>
    <head>
    </head>
    <body>
    </body>
</html>

`<!doctype html>`

“DOCTYPE宣言“といい、このドキュメントが「HTML5に則っていること」を表します。

`<html lang=jp>`

要素内(コンテンツ)で使用している言語を表します。英語であれば”en”となります。

`<html> </html>`

HTML言語を利用した記述の開始・終了位置を示します。

`<head> </head>`

ページ自体の情報・詳細を記述し、ブラウザに伝える部分になります。下記で詳しく説明します。

`<body> </body>`

実際にページに表示されるコンテンツ・画像やリンク等の要素を配置・レイアウトを記述していきます。

body要素以外は実際にページ表示されるものではなく、ブラウザに情報を提供・処理の指示をする役割を担います。

現状、<body>タグ内にコンテンツ・要素は無いため、ブラウザで開いても何も表示されません。

※都合上、前・次ページへのリンクのみサンプルでは表示するようにしてあります。

これら５つが構成ベースとなる要素で、ここに色々と書き足しを行っていく形になります。

開発環境・ローカルで展開するものを簡易的に作るのであれば、この要素構成でも十分です。
また、この子の状態でbody要素に記述していっても表示はされます。

ただ残念ながら、初期設定としてメタデータの追加を避けることができません。
面倒なので、次に紹介するページのものをテンプレとして使い回してしまいましょう。

メタデータ・コメントアウト(メモ)

メタデータ

head要素には、ページ自体の情報・詳細を記すソース『メタデータ』をブラウザに向けて記述します。

※『メタデータ』とは、”データのためのデータ”を意味します。
図書館を例とすると、「集まっている書籍」は蓄積された”データ・ファイル”といえるでしょう。
では、家に沢山の書籍があれば図書館というでしょうか。そうではないはずです。
なぜなら、図書館には「様々な書籍が集まる場所」に加え「公的な機関」「誰でも利用できる」といった、様々な定義や位置づけなどの情報があります。これにより家は図書館ではないことが判別できますし、データ(書籍)の種類も区分けがされると思います。家に集まる書籍は個人の趣味が反映されるのに対して、図書館に集まる書籍には趣味は関係ありません。
このようにデータ(書籍)の区分けや詳細・説明を行うデータのことをメタデータといいます。初期設定みたいなものですね。

少し、話が脱線しました。
head要素には<meta ~~~>と記述するメタ要素で記していきます。

sample_1-6
https://ezo-style.com/sample/sample-1-6.html

<!doctype html>
<html lang=jp>
<head>
   <!-- ★　文字コードの指定。基本的には、”UTF-8” -->
   <meta charset="UTF-8">
   <!-- ☆　Internet Explorer用の互換に関係するものです。-->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!-- ☆　画面サイズの設定を指定する。ユーザーのデバイス(勿論それぞれ異なる)を" 1 (=100%)"にします。 -->
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- ★　Webサイトの説明文。検索結果表示の時にタイトルの下に２－３行分で表示される文章です。 -->
   <meta name="description" content="サイトの説明文。検索時にタイトルの下に３行程表示される文章。">
   <!-- ★　サイトのタイトル。検索時・開いたときのタブに表示される名前です。 -->
   <title>検索時に画面表示されるタイトル。サイトが開かれたときには、タブに表示されるページ名。</title>
   <!-- ★　読み込むスタイルシート"cssファイル"の読み込み元の場所を指定します。 -->
   <link rel="stylesheet" href="css/stylesheet.css">
</head>
    <body>
    </body>
</html>

★ー必ず記述するものです。
☆ー必ずではないですが、使用することを推奨するものです。

※　sampleページのソース内にも同じくコメントで記載していますので、見づらい方はそちらを確認してみてください。

Googleであれば、『F12』で開発ツールを開けるので、そちらで閲覧いただけると見やすいかと思います。

標準で使うおおよそのメタ要素はこれぐらいです。
しかし、必要に応じて足さなければならない物も場合によってはありますので、それらに関しては別途調べてみてください。
とりあえずのところは、ここに記載されているものをそのままコピーして使いまわしても差し支えないと思います。

<!doctype html>
<html lang=jp>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="サイトの説明文。検索時にタイトルの下に３行程表示される文章。">
   <title>検索時に画面表示されるタイトル。サイトが開かれたときには、タブに表示されるページ名。</title>
   <link rel="stylesheet" href="css/stylesheet.css">
</head>
    <body>
    </body>
</html>

コメントアウト(メモ)

 で挟み込むことでページに表示しないようにします。

ソースコードを加筆・修正する際の注意点や備忘録などのメモ書きであったり、修正で要素を消すが後で使うかもしれない要素などを一時的に避けておきたい、といった用途で使います。

sample_1-7
https://ezo-style.com/sample/sample-1-7.html

<div>
    <p>ここは表示する。</p>
    <p>ここは一時取り除くする。</p>
    <p>ここも取り除く。</p>
    <p>ここは表示する。</p>
</div>

sample_1-8
https://ezo-style.com/sample/sample-1-8.html

<div>
    <p>ここは表示する</p>
    <!--  <p>ここは一時取り除くする</p> 
    <p>ここも取り除く。</p>  -->
    <p>ここは表示する</p>
       <!--このコメントも非表示です。-->
</div>

このように使用します。間違いなく今後利用していくと思うので、覚えておきましょう。

BODY 要素内へ　1.

では、いよいよメインの body 要素に入ります。

といっても全てのタグには触れられないので、頻出のものだけピンポイントで説明していきます。
可能であればこのままテキストエディタにコピー、またはサンプルページのソースを参考にブラウザでの表示と見比べながら学習を進めてください。

ということで、初めに下記のようなサンプルを用意させていただきました。

sample_2-1
https://ezo-style.com/sample/sample-2-1.html

  <!--ページに表示するコンテンツ・画像・リンク等の「要素」の配置・レイアウトをbody要素内に記述していきます。-->
<body>
  <header class="grey-white" id="pagetop">
    <h1>ページのタイトルやメインテーマ</h1>
    <h2>サブタイトルやスローガン</h2>
  </header>
  <article>
    <h2>記事のタイトル</h2>
    <h3>見出し・キャッチコピー</h3>
    <p>
      文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章<br />
      文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
    </p>
  </article>
  <section>
    <img
      src="img/sample.png"
      alt="写真が表示されないときに表示されるテキスト"
    />
    <div>
      <h3>記事のタイトル</h3>
      <h4>見出し・キャッチコピー</h4>
      <p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
      <p>文章文章文章文章<strong>文章文章文章文章</strong>文章文章文章文章</p>
      <p>文章文章文章文章<span>文章文章文章文章</span>文章文章文章文章文</p>
    </div>
  </section>
  <footer class="grey-white">
    <p><a href="https://www.google.co.jp/">google</a>検索画面へ</p>
    <a href="#pagetop">
      <p>↑　ページトップへ　↑</p>
    </a>
    <p>©2019. EZOSTYLE.</p>
  </footer>
</body>

まずは構造から確認していこうと思います。

グループ化を行うタグ

`<header> <article> <section> <footer> <div>`

これらのタグは、よくbody要素の直下の”子要素”に使用されます。
これらのタグの大まかな役割は『グループ化』です。

今回の例だと、上記のbody(ページ全体の構成)は大きく４部のグループ(セクション) に分かれていることになります。
この「セクション」とは、製作者がそれぞれの要素を「意味・用途」に合わせて分類し、１つの塊として完結するようにグループ化したものになります。
なので上記の４つのタグの違いは、”どのような意味・用途“でグループ化されているかを示します。

役割としては、仕様頻度が極めて高い <div> も同類にあたるので、下記の一覧で合わせて説明したいと思います。
画像と合わせてイメージを掴んでいきましょう。

!! このように分類はありますが元も子もないことを言ってしまうと、上記はお互いに全て成り代われます。
というのもレイアウトのみ観点で言えば、セクションで区切ることがで重要であり、意味のあるなしはレイアウトに影響しません。

使い分ける理由は、

製作者がそれにより作業・修正箇所を判別しやすいこと
SEOにタグの意味とコンテンツの住み分けが関わっていること
後に紹介するCSSの記述が楽になること

などが主な理由です。

例えば、上記の例にあるソースコードでレイアウト的には問題はないので<section>タグを使用していますが、

内容が記事のような読み物です。section要素はarticle要素であるべきでは、とSEOなどの観点からは言えるでしょう。

余談

body要素の直下から全体的に<div>を多用するサイトもありますが、これも問題は特にありません。
SEOへの対策が後回しであれば、一度作り上げてしまってから差し替えていくのでも構わないと思います。
一方で、複数人で分業を行う場合には読み取りづらく、担当している箇所を一目で分かりずらといったこともあります。
body要素直下のような、大きなグループに対しては何かしらのセクションで括ってあげることをおすすめします。

body要素内へ　2.

テキスト系のマークアップタグ

`<h1> <p> <strong>`

これらのタグは、テキストであることを意味することに加え、その重要度(強調)によって使い分けます。
下記で紹介するタグはそれぞれ、異なるテキストの大きさ・太さの仕様を持っています。

sample_2-2
https://ezo-style.com/sample/sample-2-2.html

※実際のコードは、ページソースを参考にしてください

※様々なブラウザがありますが、p要素のフォントサイズ初期値は、16pxと言われています。

※タグを使用しなくても、テキストは入力可能(body要素内ではあるため)です。
ですがそうしてしまうと、

改行がしづらい
行間がおかしい
CSSを適用しづらい
ソースが見づらい

などのデメリットが多いので、テキストには必ずタグを使用しましょう。

つづいて、画像(image)の挿入を行う<img src=" " alt=" ">、リンクの付加を行う<a href=””>を見てみましょう

画像のマークアップタグ

`<img>`

<img src="" alt="">

“<img>“タグは、”画像を挿入して表示すること“を意味します。
src属性(“S”ou”RC”e)とalt属性(“ALT”ernative)が必須です。

src属性の値には、使う画像の引用元アドレス『パス』を記します。

alt属性の値には、不具合により画像が表示されない環境だった時にテキストでどういった写真が表示される予定だったかを記します。
ユーザーへの情報伝達の欠落をカバーするものです。

※　加えて、SEOの面や読み上げ機能といったUIの側面から記述することが推奨されます。

リンクのマークアップタグ

`<a>`

<a href="">

href属性(“H”ypertext “REF”erence)が必須です。
href属性の値には、リンク先のURLまたはアドレス『パス』を記します。

ということで、『パス』を記述するのですが、パスの記述方法には大まかに２パターン存在します。
少々ややこしいので、次で紹介します。

絶対パス・相対パス

画像の挿入時は勿論のこと、他ページへのリンク、cssやjsなどのファイルの読み込み時に、パス(url)が必要になります。

本章の初めの方に作成したような、フォルダの位置配置関係に深く関わります。

絶対パス

相対パス

どちらのパスが良いかは、どのようなサイトを製作・構築するかに大きく影響されます。
ですので良し悪しは製作時・修正時の利便性を調査した上で判断してみてください。