この記事では、Webサイト制作の基本となる「HTML」の書き方を学んでいきます。
HTMLの基本的な概念も合わせて解説していくので、Webサイト制作の基礎となる知識を身につけていきましょう。
- HTMLの役割
- HTMLの書き方
- HTMLの雛形
HTMLの基礎知識を学ぼう
まずは、HTMLを簡単に説明していきます。
HTML とは
HTMLは、Webサイトを作成するために使われる「マークアップ言語」です。
（マークアップ言語はプログラミング言語とは少し違う親戚のようなものです）
正式名称は「Hypertext Markup Language」と言います。
HTML の役割
HTMLの役割は、簡単に言うとWebサイトの構造を記述することです。
そのために「タグ」というものを使っていきます。
Webサイトの要素の例
Webサイトは上記の例のように、「画像」「見出し」「文章」などの要素から構成されています。
Webサイト上の要素をタグを用いて表すと次のようになります。
Webサイトの要素をタグで表した例
それぞれの要素に対して、タグを用いて表してみました。
タグを使うことで、それぞれどんな要素なのかを説明をすることができるのです。
HTML の基本文法
次は、HTMLの書き方を確認していきましょう。
HTMLの書き方（タグ）
<p>Hello World</p>上記のコードは、「pタグ」というタグを使ったときのHTMLの書き方の基本の形です。
詳しく構造を見ていきましょう。
HTMLの書き方は「開始タグ」と「終了タグ」で囲むことが基本文法になります。
（一部、「終了タグがないタグ」も存在します。）
HTMLでは、開始タグと終了タグの一つのかたまりを「要素」と呼びます。
また、こちらのタグを使って、その要素に構造の役割を示します。例えば、pタグであれば「文章」「段落」といった役割を持ちます。詳しくは、こちらの記事で記載しています。
HTMLの書き方（属性）
<p class="sample">Hello World</p>次は、HTMLのタグに「属性」をつけた形を確認していきましょう。
開始タグの中には「属性」を書くことができます。
属性とは、タグに対して記述する設定のようなものです。
ほとんどのタグでも使うことができる属性や、特定のタグと一緒に使われる属性が存在します。
属性についてもたくさん種類があるので、まずは「class属性」を覚えておきましょう。
後ほど学んでいくCSSでも使用する大切な属性になります。
HTML 書き方のまとめ
ここまでで、HTMLの基本文法を説明しました。
- タグは「開始タグ」と「終了タグ」を記述する
- 開始タグには「属性」が記述できる
- 「class属性」を絶対に覚える
以上のことを覚えていれば大丈夫です。
HTMLファイルの基本構造を学ぼう
次に、HTMLファイルの基本構造を確認していきましょう。
今回は必要最低限のコードに絞って説明します。
HTMLファイルの雛形
HTMLを記述する際は、必ず記述する「雛形」が存在します。
Webサイトを作るときは、以下のHTMLの基本構造を毎回記述します。
HTMLファイルの雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- headタグ内に、Webサイトの内部情報を記述する -->
<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タグ内に、Webサイトの構造を記述 -->
</body>
</html>上記のコードは、全て手書きで書ける必要はありません。
実際に記述する際はコピペなどを用いて記述します。
ですが、以下のコードの内容は最低限覚えておきましょう。
<!DOCTYPE html>でHTMLファイルの宣言をする
<!DOCTYPE html>1行目の<!DOCTYPE html>は「このファイルは、HTMLファイルです」という宣言をしています。
（<!DOCTYPE html>はドックタイプ宣言と呼ばれます。）
htmlタグで「headタグ」と「bodyタグ」を囲む
<html lang="ja">
<head>...</head>
<body>...</body>
</html>2行目にはhtmlタグを記述します。
「HTMLファイルの内容はここからここまでです」ということを示すために、必ず書きましょう。
htmlタグのすぐ後には、headタグとbodyタグが入るように記述します。
headタグ内にWebサイトの内部情報を書く
<!-- Webサイトの内部情報を記述する -->
<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>headタグの中には、主にWebサイトの内部情報を記述していきます。
ここでは、特に大切な以下の２つを覚えておきましょう。
CSSファイルの読み込み
<link rel="stylesheet" href="css/style.css">Webサイトの見た目を整える「CSSファイル」の読み込みを行っています。
CSSに関しては以降の記事で学習していきますので、今は読み込み方法だけ覚えておきましょう。
Webサイトのタイトルの設定
<title>Document</title>ブラウザやGoogleの検索結果で表示される「Webサイトのタイトル」の設定を行なっています。
他にもたくさん記述する内容がありますが、まずは上記の内容を覚えておきましょう。
bodyタグ内にWebサイトの構造を記述する
<!-- Webサイトの構造を記述 -->
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>bodyタグには、主にWebサイト構造を記述していきます。
Webサイトを閲覧した際に表示される要素は、bodyタグの中に書いた要素になります。
詳しい構造については、今後のレッスンで習っていきます。
HTMLファイルの雛形のまとめ
ここまでで、HTMLファイルの雛形のコードについて説明しました。
- 雛形は手書きする必要はない
- <!DOCTYPE html>でHTMLファイルの宣言をする
- htmlタグで「headタグ」と「bodyタグ」を囲む
- headタグ内にWebサイトの内部情報を書く
- bodyタグ内にWebサイトの構造を記述する
以上のことを覚えていれば大丈夫です。
インデントを意識する
最後に、HTMLを記述する上で意識しなければいけないインデントについて説明していきます。
インデントとは、HTMLのコードを見やすくする書き方です。
タグの中にタグを記述する際は、１段下げてコードを記述します。
このようなコードを見やすくするための記述方法を「インデント（字下げ）」というのです。
また、「タグの中にタグを記述する」書き方のことを「入れ子構造」といいます。
タグの種類によっては、入れ子にできないタグもあるため注意が必要です。
また、インデントを自動で綺麗に整える設定もありますので、まだ導入していない方はぜひ、こちらの記事を参考に、設定をしてみてください。
まとめ
今回は、Webサイト制作に使われるHTMLという言語について簡単に解説しました。
記事の内容として、以下の内容が押さえられていれば次の記事に進んで大丈夫です。
- HTMLの役割：Webサイトの構造を記述する
- HTMLの書き方：「開始タグ」と「終了タグ」、「属性」を記述する
- HTMLの雛形：雛形のコードの内容を覚えておけば大丈夫
HTMLの理解はWebサイトの構造を作る上で必要不可欠なものです。
「タグを使って構造を作る」イメージを掴んでください！
