Webサイトを作りたいと思ったとき、最初に触れるのがHTML（エイチ・ティー・エム・エル）です。
今回は、HTMLとは何かという基本から、よく使う重要なタグ、ブログですぐに使える具体的な書き方までを分かりやすく解説します。
1. HTMLとは？（Webサイトの「骨組み」）
HTMLは「HyperText Markup Language」の略で、Webページに文章や画像を表示し、構造を作るための言語です。
よく家づくりに例えられますが、WebサイトにおいてHTMLは「柱や壁（骨組み）」の役割を持ちます。見た目を装飾する「デザイン（内装）」はCSS、動きをつける「家具（設備）」はJavaScriptという別の言語が担当します。
2. HTMLの基本ルール「タグ」で囲む
HTMLは、テキストを「タグ」と呼ばれる記号で囲むことで、コンピューターに「ここが見出し」「ここが段落」と伝えます。
基本的な書き方
HTML
<p>ここに文章が入ります。</p>
<p>（開始タグ）： ここから要素が始まることを示します。</p>（終了タグ）： ここで要素が終わることを示します。スラッシュ（/）を忘れないようにしましょう。
3. これだけは外せない！基本のHTMLタグ5選
ブログ記事やWebページを作る際、最も頻繁に使う5つの重要タグです。
① 見出しタグ（<h1>〜<h6>）
文章のタイトルや見出しを指定します。h1が一番大きく、重要度に応じてh2, h3と小さくなっていきます。
HTML
<h2>これが大見出しです</h2>
<h3>これが中見出しです</h3>
② 段落タグ（<p>）
一般的な文章（テキスト）を書くときは、このpタグ（Paragraph）で囲みます。
HTML
<p>これはブログの本文です。HTMLを学ぶと、自由にWebページを作れるようになります。</p>
③ リンクタグ（<a>）
他のページへ移動するリンクを作成します。href="..." の中に移動先のURLを記述します。
HTML
<a href="https://example.com">ここをクリックして詳細を見る</a>
④ 画像タグ（<img>）
ページに画像を表示します。このタグは例外的に終了タグ（</img>）が必要ありません。
HTML
<img src="image.jpg" alt="可愛い猫のイラスト">
src：画像のファイル名やURLを指定します。
alt：画像が表示されなかったときの代わりのテキスト（説明）です。
⑤ リストタグ（<ul> / <ol> / <li>）
箇条書きを作るためのタグです。
<ul>：順序のない箇条書き（・がつく）<ol>：順序のある箇条書き（1. 2. 3. がつく）<li>：リストの各項目
HTML
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>ぶどう</li>
</ul>
4. 全体の構造（基本のテンプレート）
実際のWebページを作る際は、上記で紹介したタグを以下のような「全体の枠組み」の中に書いていきます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログのタイトル</title>
</head>
<body>
<h1>ようこそ、私のブログへ！</h1>
<p>ここに記事の本文を書いていきます。</p>
</body>
</html>
| タグ名 | 役割 |
<!DOCTYPE html> | 「これは最新のHTML（HTML5）で書かれています」という宣言 |
<html lang="ja"> | HTML全体の囲み。lang="ja"で日本語のページであることを指定 |
<head> | 検索エンジンやブラウザへの指示を書く場所（画面には表示されない） |
<title> | ブラウザのタブに表示されるページのタイトル |
<body> | 実際にブラウザの画面に表示されるコンテンツを書く場所 |
まとめ：まずは触ってみよう！
HTMLの基本は「タグで囲むこと」です。
まずは自分で簡単な文字をタグで囲むところからスタートして、少しずつWebサイトの形を作っていきましょう！
コメント