HTMLの書き方を徹底解説！タグの種類からコードの基本構造まで、初心者向け入門ガイド

こんにちは！かたすけです。

前回は、HTMLとは何かについて学びました。今回の記事では、「HTMLが何かは分かったけど、コードはどう書けばいいの」や、「タグって何？」という方に向けた記事になっています！HTMLの総復習をしたい方もぜひ見ていってくださいね。

前回の記事はこちら↓

今回の記事を読むと

HTMLの書き方の基礎が分かる
「タグ」について理解できる

HTMLの基本：タグで要素を囲んでWebブラウザに指示
HTMLの基本の型
覚えておきたい！よく使うHTMLタグ
分かりやすいコードを書くための3つのコツ
まとめ：Web開発への第一歩は、HTML！

HTMLの基本：タグで要素を囲んでWebブラウザに指示

HTMLでは、文字列を「タグ」で囲むことで、Webブラウザに「ここは見出しだよ！」「ここは段落だよ！」と指示を出します。

開始タグ：<タグ名>のように、要素の始まりを示します。
終了タグ：</タグ名>のように、要素の終わりを示します。

例えば、
<h1>Web開発って面白い！</h1>
と書くと、「Web開発って面白い！」という文字が、Webページで一番重要な見出しとして表示されます。

HTMLの基本の型

HTMLには、記事の内容には直接関係のないことをはじめに書かなくてはなりません。これを基本の型と呼んでいます。まずはコードを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの書き方を徹底解説！タグの種類からコードの基本構造まで、初心者向け入門ガイド</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>は、HTMLのバージョン指定、<html lang=”ja”>は日本語を指定しています。ここは、こういうものなんだと感じるだけでOKです！

HTMLの基本構造は、

<バージョン指定>
<html 言語指定>
<head>
サイトのコンピュータ向けの様々な情報
（文字コードの指定やタイトルなど）
</head>
<body>
サイトの内容
</body>
</html>

となっています！headの中身も、テンプレなので覚えなくていいです！これ以降は、最も重要であるサイトの中身、すなわちbodyの中身の話をしていきます！

覚えておきたい！よく使うHTMLタグ

HTMLにはたくさんのタグがありますが、まずはこれだけ覚えておけばOK！

見出しタグ：<h1> ~ <h6>

Webページの見出しを定義します。<h1> が一番大きくて重要な見出し、<h6> が一番小さい見出しです。記事のタイトルとか、章のタイトルとかに使います。

<h1>Web開発入門</h1>
<h2>HTMLの基本</h2>

段落タグ：<p>

文章の段落（まとまり）を定義します。文章を区切って読みやすくするために使います。

<p>HTMLを学ぶことで、Webページの構造を理解することができます。Web開発の第一歩として、HTMLをマスターしましょう！</p>

改行タグ：<br>

文章を途中で改行します。<br> タグは、文章の途中で改行したいときに便利です。

<p>これは一行目の文章です。<br>これは二行目の文章です。</p>

リストタグ：<ul>、<ol>、<li>

リストを作るときに使います。

<ul>：順不同リスト（箇条書き）。順番が重要じゃないリストに使います。
<ol>：順列リスト（番号付きリスト）。手順とか、ランキングとか、順番が重要なリストに使います。
<li>：リストの各項目。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JavaScriptを学ぶ</li>
</ol>

リンクタグ：<a href=”リンク先”>

他のWebページやWebサイトへのリンクを作ります。`href` のところに、リンク先のURLを入れます。

<a href="https://www.google.com">Googleへ</a>

画像表示タグ：<img src=”画像の場所” alt=”代替テキスト”>

Webページに画像を表示します。

`src` 属性：画像の場所（URLまたはファイルパス）を指定します。
`alt` 属性：画像が表示されない場合に表示される代替テキストを指定します。`alt` は、画像が表示されないときだけでなく、目の不自由な方がWebページを読むときにも使われるので、必ず設定しましょう。

画像の場所は、相対パスで指定するのがオススメです。相対パスは、HTMLファイルから見て、画像がどこにあるかを指定する方法です。例えば、HTMLファイルと同じフォルダにある `images` フォルダの中に `my_image.jpg` という画像がある場合は、`src=”images/my_image.jpg”` と書きます。

<img src="images/my_image.jpg" alt="僕のアイコン">

これらの他にも、タグはたくさんあります！
気になる方は、ぜひ調べてみてください！

分かりやすいコードを書くための3つのコツ

コードを書くときに、ちょっと意識するだけで、グッと分かりやすくなります！

インデントを付ける: タグが入れ子になっているときは、インデント（字下げ）を付けると、コードの構造が分かりやすくなります。
改行を適切に入れる: 長いコードは、適宜改行を入れると見やすくなります。
コメントアウトする:<!– と–>で囲むと、プログラムに読み込まれなくなります。それを利用することで、コードの説明をしておくといいです。

まとめ：Web開発への第一歩は、HTML！

HTMLは、Webサイトを作るうえで欠かせない言語です。一歩ずつ頑張りましょう！

最後まで読んでいただき、ありがとうございました！

お勧めの本はこちら！

リンク