0からはじめるWebサイト制作の勉強|知行合一

2015年6月より求職者支援訓練でWebサイト制作を学んでいます。学んだことの要点や実践での備忘録を記録して、一歩ずつ成長に努めます。

HTML概要のまとめ

HTMLとは

  • HTMLとは、HyperText Markup Languageの頭文字をとったもので、Webページを記述するためのマークアップ言語のこと。
  • HyperTextとは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組みのこと。
  • テキスト間を結びつける参照のことをハイパーリンクという。
  • Markupとは、文書に目印を付けることで、その部分が文書中でどんな働きをしているか(見出しなのか、段落なのかなど)を意味付けすること。

 HTMLを記述するときに注意すること

  • Web系のタイピングでは全角スペースは原則使わないこと
  • HTMLファイルを配置するフォルダの名前に全角文字は原則使わないこと
  • 英数字は原則、半角文字を使用すること

HTML記述の基本ルール

HTMLを記述するときは、「<>」(アングルブラケット)で囲まれた「タグ」を使い、
文書をマークアップ(目印付け、意味付け)します。

HTMLで文書をマークアップするときは、次の3つを記述します。

  • どこからを示す、「開始タグ」
  • どこまでを示す、「終了タグ」
  • どんな種類の情報なのかを表す、「要素の種類」

HTMLの基本構造

HTMLは次の基本構造で構成されています。

HTMLのバージョンを宣言する部分
HTML文書の冒頭で、どのバージョンのHTMLを使用して記述するのかを宣言します。
これをDOCTYPE宣言「DTD:Document Type Definition(文書型定義)」と呼びます。
例えば、<!DOCTYPE html>で「これはHTML5で書かれていますよ」と宣言しています。
HTMLで記述されている範囲を示す「箱」の部分
htmlタグでHTMLで記述する範囲を囲います。
htmlタグで囲われた部分は、HTMLが記述されていることを示します。
htmlタグで囲われた部分は、head要素とbody要素で構成されます。

head要素について

head要素は、headタグで囲った範囲に、文書自身に関する情報(タイトル、関連ページなど)を格納します。
head要素内に記述する内容は、ブラウザが理解するためにあるので、ブラウザ上には表示されません。

HTMLを記述するときは、head要素の中に、次の情報を常に記述します。

文字コードの指定
Webページを表示する際の文字コードを指定します。
文字コードは、文字化けを起こさないために、指定します。
通常、文字コードは「UTF-8」を指定します。
文字コードはmeta要素のcharset属性で指定します。

(記入例) <meta charset="UTF-8">

HTMLはコードを上から順に処理するため、
文字コードの指定はheadタグのすぐ後に記述するのが望ましい。
タイトルの指定
どんな文書も「タイトル」「件名」なしでは通用しません。
同様にWebページにもタイトルが常に必要です。

タイトルはブックマークに登録された際や、 検索エンジンの検索結果で表示されるため、
「他の人がタイトルだけを見ても文書の内容が分かる」ようにつける必要があります。

タイトルはtitle要素で指定します。

(記入例) <title>Webページのタイトル</title>

その他、スタイルシートJavaScriptなどを、
外部ファイルから読み込む場合は、
link要素で参照する外部ファイルを指定します。

(記入例)外部のスタイルシートを読み込む場合
<link rel="stylesheet" href="スタイルシートのファイルパス">

body要素について

body要素は、bodyタグで囲った範囲に、読者に読んでもらう本文を記述します。
body要素の内容は、ブラウザ上に表示されます。

本文の記述では、文書構造を読み解き、文書が正しいツリー構造となるようにマークアップすることが重要です。