初級フロントエンドエンジニアが知っておきたい基礎の基礎【HTML編】

CODE
のり
のり

こんにちは！駆け出しフロントエンジニアのnoriです！HTMLの勉強をしているけど、なかなか知識が身についているかどうかわからないので、アウトプットとしてHTMLの基礎の基礎をまとめたいと思います！

Webサイトはどうして見えているのか？

まずは、HTMLとは何かをまとめる前にWebサイトがどうして見えているかについて簡単に理解をしておきたいと思います。

Webサイトとは

Webサイトとは、Webページの集まりのことです。Webページ１枚だけのWebサイトもありますが、企業のサイトなど、多くは複数のWebページで構成されているものと理解すれば良いかと思います。

Webページとは

Webページとは、情報を1枚のページにまとめて、インターネット上で公開している文書（リソース）のことです。Webページは大きく以下４つのリソースによって構成されています。

  • HTML（文章や表やリンク）
  • CSS（見た目）
  • Javascript（HTML/CSSの動的制御など）
  • その他リソースファイル（画像ファイル、動画ファイルなど）

Webページを家で例えると、HTMLは骨組み（構造体）を担当し、CSSは外壁、装飾（デザイン）を担当、Javascriptが電気や水道などのインフラ、そしてその他リソースファイルは画像ファイルや動画ファイルなので、絵画や家電などを担当していると考えることができます。

Webブラウザとは

Webページを表示するには、Webブラウザというアプリケーションが必要です。Webブラウザとは、URLに指定された文書（リソース）を表示するためのアプリケーションです。URLとは、Uniform Resource Locatorの略で、文書（リソース）の格納されているアドレスのことです。

Webブラウザはリソース（HTML/CSS/Javascriptなど）を統合して表示するという役割を担っていて、大まかな表示手順は以下になります。

  1. 指定したURLにアクセスしてリソース（HTML/CSS/Javascript/画像/動画など）を取得する
  2. 取得したリソースを解析する（読み込む）
  3. 解析結果を基に文章やスタイルを適切に配置して、Webブラウザに表示する

リソースはHTMLを起点として統合されるため、Webページを表示するには、Webブラウザが文書構造を解析して表示できるHTMLが必要ということになります。それでは、Webページの土台となるHTMLについて見ていきましょう。

ここまでのまとめ
  • WebサイトはWebページの集合体のこと
  • Webページはリソース（HTML/CSS/Javascriptなど）によって構成されていて、示するにはWebブラウザが必要
  • WebブラウザはHTMLなどのリソースを解析/統合して表示するアプリケーション
  • Webブラウザが解析できるリソースの一つがHTML
  • Webページを家で例えると、HTMLは骨組み（構造体）を担当

HTMLとは？

HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップ言語）の略で、プログラミング言語ではなくマークアップ言語です。HTMLで文書を書くとブラウザにどのように表示すればよいか意味が伝わります。

ハイパーテキストとは、ハイパーリンク（通称リンク）を埋め込むことができる高機能なテキスト（文書）のことを意味します。また、マークアップとは目印のことで、文書（リソース）の構造に目印となるタグを定義することです。

よって、HTMLとは文書構造を定義する言語、または文書そのもののことです。

実際のHTML

実際のHTMLを見てみましょう。以下はYahoo!のトップページのWebブラウザでの表示とHTMLファイルです。Webブラウザ上の適当な箇所を右クリックし、「ページのソースを表示」で見ることができます。

Yahoo!のトップページ
Yahoo!のトップページのソースコード
ここまでのまとめ
  • HTMLとは、Webブラウザが理解できるように文書の構造を定義したもの

HTMLの基本

HTMLとは、Webブラウザが理解できるような文書の構造を定義したものだということを先程理解しました。では、実際にどのように定義されているのかを見てみましょう。以下のコードは非常に単純なHTMLファイルの例です。HTMLファイルは大きく、DOCTYPEとhtml要素の２つから構成されています。

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
    </head>
    <body>
        <p>本文です。</p>
    </body>
</html>

Webブラウザ上では、以下のような表示になります。

本文です。

HTMLファイルを作成するには

HTMLファイルを作成するには、テキストファイルの拡張子を「.html」にすればOKです。通常トップページのHTMLファイルは「index.html」とする慣習があります。

DOCTYPE宣言

１行目の<!DOCTYPE html>では、ドキュメントタイプを宣言しています。必ず書かないといけないもので、ここではHTMLのヴァージョンを定義しており、「このファイルはHTML５で記述されています」という意味になります。

HTMLの最新はHTML５です。他にHTML4.01などありますが、これからの主流はHTML５なのでこの記載で覚えておくのが望ましいです。

html要素

２行目以降の<html>〜</html>が実際のHTMLの中身になります。<html>〜</html>は、html要素といい、<html>〜</html>で囲われた部分がHTML文書であることを示しています。

要素とタグについて

<html>, </html>のように、< >で囲まれた記号をタグと呼び、このタグの開始タグから終了タグまでのまとまりを要素といいます。※終了タグのない要素もあります

要素

以下のHTMLのタグのまとまりを要素という。

＜開始タグ（要素名）＞内容＜/終了タグ＞

終了タグのない要素
<br>
<img>
<hr>
<meta>
<input>
<embed>
<area>
<base>
<col>
<keygen>
<link>
<param>
<source>

head要素とbody要素

<!DOCTYPE html>
<html>
    <head>
        <!-- メタ情報をここに記述します -->
    </head>
    <body>
        <!-- 本文をここに記述します。 -->
    </body>
</html>

htmlタグの中は２つの要素によって成り立っています。head要素とbody要素です。

head要素

head要素は、文書のタイトル等のメタ情報を記述するところです。

head要素の役割は、Googleなどの検索サイトで検索結果に表示されるタイトルや概要を定義することです。Webページとして表示されるのはタイトル部分だけで、大部分はWebページのメタデータになります。メタデータとは、htmlにとって高次のデータ、つまりデータのためのデータのことです。

head要素は検索結果に表示されるということでSEOと関連があります。SEOとは、Search Engine Optimizationの略で、検索エンジン最適化を意味する言葉ことです。つまり、いかに検索結果で上位に表示されるかと深い関係があります。

body要素

body要素は、文書のコンテンツを記述するところです。

body要素の役割は、Webページとして文書の構造と内容を定義することです。Webページに表示されている部分がこのbody要素といってよいです。

body要素は、見出しや段落、リスト、表などを定義することができます。

属性について

属性とは開始タグの中に書かれた付加情報のことです。多くのタグは属性と合わせて記述されます。

属性

<html lang=“ja”>

langが属性名、“ja”が属性値、両方合わせて属性といいます。

ここまでのまとめ
  • HTMLのタグのまとまりを要素という
  • 要素の付加情報のことを属性という
  • HTMLはDOCTYPEとhtml要素で構成されている
  • html要素はhead要素とbody要素で構成されている

head要素内での記述

ここでは、head要素に記述する内容について、まとめていきます。例として、以下のソースコードを見てください。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="このWebページの概要を記載します">
    <title>タイトル</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="https:〜/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="https:〜/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="https:〜/bootstrap.min.js"></script>
    <style>
      body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
  </body>
</html>

meta要素

meta要素は、文書のメタ情報である文字エンコーディングや文書の概要などを記載するところです。

<meta charset="UTF-8">はUTF8の文字エンコーディングをおこなうという宣言です。これを記載していないと文字化けする可能性が出てくるので決まり文句のように書いておきます。

<meta name="description" content="このWebページの概要を記載します">は、サイトの概要を説明するためのメタ情報です。content部分は検索結果に表示されるため、SEO対策する上で重要です。

title要素

title要素（<title>タイトル</title>）は、サイトのタイトルを定義します。head要素内でWebページの利用者に直接現れるのはこのtitle要素だけです。また、検索結果にも表示される部分なので、こちらもSEO対策する上では重要です。

title要素はWebブラウザのタブに表示される

link要素

link要素はスタイルシート(CSS)や外部ファイルを参照する際に使用します。rel属性で外部ファイルのタイプを、href属性でファイルの場所を指定します。

script要素

script要素は、Javascriptやその他ライブラリを参照する際に使用します。src属性でファイルの場所を指定します。

style要素

style要素は、スタイルシートを記述する際に使用します。スタイルシートとは、HTML文書の見栄えの制御のことを言います。HTMLファイル単体でスタイルシートを記述する場合以外は、CSSファイルに記述してlink要素で参照するのが一般的です。

ここまでのまとめ
  • meta要素には、文書のメタ情報を記載する
  • title要素には、唯一Web利用者に表示されるタイトル情報を記載する
  • link要素には、スタイルシートなどの参照情報を記載する
  • script要素には、Javascriptなどの参照情報を記載する
  • style要素には、スタイルシートを記載する

body要素内での記述

body要素では、コンテンツを記述します。ここでは、主なコンテンツの記載について紹介します。

見出し

見出しは、<h1>〜</h1>のように記載します。hはheading（見出し）の意味です。

See the Pen basic-html-heading by Nori (@ysnoritnk) on CodePen.

段落

文章中の段落は、<p>〜</p>のように記載します。pはparagraphの略です。また、文章中の改行は<br>を記載することでできます。brはline breakの略です。

See the Pen basic-html-paragraph by Nori (@ysnoritnk) on CodePen.

リスト

リストには２種類あります。箇条書きリストと順序付きリストです。

箇条書きリストは<ul><li>〜</li><ul>で記載します。ulはunordered listの略で、liはlist itemの略です。

See the Pen basic-html-ul by Nori (@ysnoritnk) on CodePen.

順序付きリストは、<ol><li>〜</li></ol>で記載します。olはordered listの略です。

See the Pen basic-html-ol by Nori (@ysnoritnk) on CodePen.

リンク

ハイパーリンク（通称リンク）は、<a>〜</a>で記載します。また、href属性でリンク先を指定します。aはanchorの略、hrefはhyper referenceの略です。

See the Pen basic-html-a by Nori (@ysnoritnk) on CodePen.

画像

画像は<img>タグを使用して以下のように記載します。src属性に画像が格納されているパスとalt属性に画像が表示出来ない時のテキスト表示を記載します。imgはimageの略、srcはsourceの略、altはalternative textの略です。

<img src="./imageが格納されているパス" alt="画像が表示されない時のテキスト表示">

テーブル（表）

テーブル（表）は以下のように記載をします。

See the Pen basic-html-table by Nori (@ysnoritnk) on CodePen.

フォーム

フォームは<form>〜</form>で記載します。また、入力/送信フォームなどは<label>要素、<input>要素を一緒に記載することで実装できます。

label要素には、for属性でフォーム部品とラベルを関連付けることができます。

input要素は、様々なtype属性があり、代表的なものを以下で紹介します。

See the Pen basic-html-form by Nori (@ysnoritnk) on CodePen.

id属性とclass属性

id属性とclass属性は、属性の中で一番多く使用される属性で、HTMLのタグの中に名前をつけることができます。id属性は、同じWebページ内で重複しない名前を定義します。それに対して、class属性は、同じWebページ内に何度でも同じ名前を定義できます。

なぜid属性、class属性を定義するかというと、CSSでのデザインを指定するセレクタなどで使用するからです。id属性とclass属性は一つの要素に両方定義することができます。

ここまでのまとめ
  • 見出しは、<h1>〜</h1>のように記載する
  • 段落は、<p>〜</p>のように記載する
  • リストには２種類あり、箇条書きリストは<ul><li>〜</li></ul>、順序付きリストは<ol><li>〜</li></ol>のように記載する
  • リンクは、<a href="#">〜</a>のように記載する
  • 画像は<img src="./画像パス" alt="代替テキスト">のように記載する
  • テーブルは、<table>,<thead>,<tbody>,<th>,<td>を用いて記載する。
  • フォームは<form>〜</form>で記載し、<label>と<input>でラベルとフォーム部品を作成する。
  • id属性は、同じWebページ内で重複しない名前を定義できる
  • class属性は、同じWebページ内に何度でも同じ名前を定義できる

まとめ

現在は、HTMLのみのWebサイトはほとんどないため、Webサイトを作ろうとしている人にはHTMLは基本中の基本です。今回は代表的なものしか紹介していませんが、下記のようにいろいろな要素、属性がありますので参考にしてみてください。

HTML5リファレンス
HTML5の解説
www.htmq.com

また、HTMLと合わせて、CSS/Javascrptなどより、デザインの幅が広がる言語も勉強していきましょう！では！

スポンサーリンク

コメント

タイトルとURLをコピーしました