この記事では、Webサイト制作の基本となる言語である「HTML」の書き方や、HTMLの基本的な概念を解説をしていきます。
Webサイトを制作していく方はまずはHTMLの基礎である、概念や書き方から学習していきましょう。
また、HTMLとCSSは使われる言語ですので、各々の役割、書き方などを覚えていきましょう。
HTML について学ぼう
まずは、HTMLを簡単に説明していきます。
HTML とは
HTML (Hypertext Markup Language)は、Webサイトを作成するために使われる言語です。
ここでの「言語」とは、私たちがコンピューターに話しかけるための言語です。私たちも日常会話では、日本語や英語など、場所・相手に応じた言語を使って会話をします。
Webサイトの作成においても、コンピューターが理解できる言語を用いて伝える必要があります。
「Webサイトの要素・構造はこうなっているよ！」と伝えるために使用するのが「HTML」という「マークアップ言語」となります。（マークアップ言語はプログラミング言語とは少し違う親戚のようなものです)
HTML のタグ
HTMLの特徴的な書き方として、「タグ」があります。
Webサイトは見出し、文章、リンク、画像などの「要素」によって構成されます。
タグは、Webサイトの要素が何を表しているのか意味を与えるものになります。
要するに、コンピューターに対しWebサイトの構成要素を教えてあげるために使われます。
私たちのようにWebサイトを見る人（ユーザー）は、「この要素は見出しだ」「この要素は文章だ」と、Webサイトの構造を目で見て理解することができます。
しかし、コンピューターは、Webサイトの構造を判断することはできません。
そのため、Webサイトを作るにあたって「この要素は見出しです」「これは文章です」ということをコンピューターに教えてあげる必要があります。
そこで、HTMLは「タグをつける ＝ マークアップする」ことでWebサイト内の要素の意味をコンピューターに伝えているのです。
ここまでで、HTMLとは何かを説明してきました。
Webサイトのデザインを、HTMLという言語を使って構造を教えてあげているイメージを持ってもらえれば大丈夫です。
HTML の書き方
タグ
HTMLの書き方は「開始タグ」と「終了タグ」で囲むことが基本文法になります。
HTMLでは、開始タグと終了タグの一つのかたまりを「要素」と呼びます。
（一部、「終了タグがないタグ」も存在します。）
マークアップの作業は「意味付けをしたい部分はここからここまで」ということを示すために、タグという目印をつけます。
・タグの例
今回は以下のコードを例に解説していきます。
<h2>これは見出しです。</h2>
<p>これは文章です。これは文章です。</p>
<a href="">これはリンクです</a>上記のコードでは、
- h2タグに囲まれたテキスト =「見出し」
- pタグに囲まれたテキスト =「段落(文章)」
- aタグに囲まれたテキスト =「リンク」
と意味付けされています。
ここでは、見出しを表す「h2タグ」、文章（段落）を表す「pタグ」、リンクを表す「aタグ」の３つを用いてマークアップを行いました。
この他にも沢山のタグが存在し、それぞれ違った意味や役割を持っています。
属性
開始タグの中に<タグ名 属性=”値”>という形で「属性」を書くこともあります。
属性とは、タグに対して記述する設定のようなものです。
ほとんどのタグでも使うことができる属性や、特定のタグと一緒に使われる属性が存在します。
・属性の例
今回はaタグを例に解説していきます。
<a href="https://zero-plus.io/" target="_blank" class="link">- href属性
- target属性
- class属性
の3つの属性が記述されています。
「href属性」の値に、ZeroPlusの公式サイトのURLを入れて、リンクで飛べるように設定しています。
また、「target属性」の値に「_blank」を入力することで、リンクを新しいタブで開くように設定しています。
以上2つの属性は、主にaタグと一緒に用いられます。
「class属性」はほとんどのタグに使用することが可能な属性です。
値に「クラス名」を記述することができます。
別記事で紹介するCSSでHTMLにスタイルを記述する際に使用します。
HTML 書き方のまとめ
ここまでで、HTMLの基本的な書き方を説明しました。
- タグは要素に意味を付与する
- 意味付けしたいものを「開始タグ」と「終了タグ」で囲う
- 開始タグには「属性」が追加されることがある
以上のことがイメージできているようにしましょう。
HTMLファイル
次に、HTMLファイルの基本構造を確認していきましょう。
今回は必要最低限のコードに絞って説明させていただきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
</body>
</html>Webサイトを作るときは、このHTMLの基本構造を毎回記述します。
・<!DOCTYPE html>でHTMLの宣言をする
1行目の<!DOCTYPE html>は「このファイルは、HTMLファイルです」という宣言をしています。
この宣言はHTMLのバージョンにより異なりますが、最新のHTML5では<!DOCTYPE html>と書くことが決まっています。
特徴として、終了タグはありません。
・htmlタグで「headタグ」と「bodyタグ」を囲む
2行目にはhtmlタグを記述します。「HTMLファイルの内容はここからここまでです」ということを示すために、必ず書きましょう。
htmlタグの中には、headタグとbodyタグが入るように記述します。
インデントを意識する
HTMLは基本的に「タグをタグで囲う」ことで構造を示していきます。このような「タグでタグを囲う」書き方のことを「入れ子構造」といいます。
この入れ子構造をわかりやすく見せるために、HTMLでは「インデント（字下げ）」という書き方をします。
タグの種類によっては、入れ子にできないタグもあるため注意が必要です。
・headタグ内にWebサイトの内部情報を書く
headタグの中に記述するものは、主にWebサイトの内部情報となります。
- 文字コードの設定
- レスポンシブ対応（スマホ対応）の設定
- CSSファイルの読み込み
- タイトルの設定
上記は一例ですが、Webサイトに関して必要な設定や内部情報を記述していきます。
この他にも検索エンジンやブラウザに対し設定を行う情報も記述することができます。
特徴として、headタグは１ページに１度しか用いることができません。
・bodyタグ内にWebサイトの構造を記述する
bodyタグの中に記述するものは、主にWebサイトの目に見える部分となります。
Webサイトを閲覧した際に表示される要素は、bodyタグの中に書いた要素になります。
特徴として、bodyタグも１ページに1度しか用いることができません。
ここまで、HTMLの基本的な書き方を説明しました。
次は、HTMLで記述した要素がどのようにブラウザで表示されるか学んでいきましょう。
HTMLの考え方をマスターしよう
今回は、Webサイト制作に使われるHTMLという言語について簡単に解説しました。
HTMLの理解はWebサイトの構造を作る上で必要不可欠なものです。「タグを使って構造を作る」このイメージを掴んでくれれば一旦は大丈夫です。
