はじめに
前回の記事では、HTMLの「骨格」となる基本構造を説明しましたが、うまくできましたか？
実際に手を動かしてみるのが一番大事。
まだの方はぜひチャレンジしてみてください☺
＊＊＊
ただ、
書いては見たけど、実際どういう意味なのか分からなくてぴんとこない。つかえてる実感も湧かない。。。
と感じている方もいるはず。
この記事でできるようになること
この記事を読み終えると、HTMLの基本的なタグ（h1〜h6・p・a・img）の意味と使い方がわかるようになります。「タグって何？」という疑問から「自分で書ける！」という感覚まで、一緒にたどり着きましょう。
HTMLタグとは？仕組みをざっくり理解しよう
HTMLタグとは、ブラウザに
「これは見出しですよ～」
「これはリンクですよ～」
と役割を伝えるための目印です。基本的な形は以下の通り。
<タグ名>ここに内容を書く</タグ名>最初の`<タグ名>`を開始タグ、最後の`</タグ名>`を終了タグと呼びます。
この2つでコンテンツをサンドイッチするイメージ！
「開けたら閉じる」が鉄板だと覚えましょう。
見出しタグ：h1〜h6
見出しを作るタグです。h1が一番大きく、h6が一番小さい見出しになります。
新聞で例えると、h1が一面の大見出し、h6が小さなコラムのタイトルのようなイメージです。
以下のコードを書いて、ブラウザで確認してみてください！
<h1>これはh1：一番大きい見出し</h1>
<h2>これはh2：セクションの見出し</h2>
<h3>これはh3：小見出し</h3>
<h4>これはh4</h4>
<h5>これはh5</h5>
<h6>これはh6：一番小さい見出し</h6>h1はページに1つだけ使うのがルールとされています（SEO的にも重要！）。
h2以降はセクションごとに使い分けていきましょう。
下の見本コードを見ながら、自分の手でコードを入力してみましょう。コピーより手で打つ方が断然身につきます。プレビューでh1〜h6の大きさの違いをリアルタイムで確認してみてください！
段落タグ：p
前回の記事でも登場した`<p>`タグ。
pはparagraph（段落）の略です。
文章を書くときは必ずこのタグで囲む、と覚えておきましょう。
<p>これが段落です。テキストはこのタグの中に書きます。</p>
<p>2つ目の段落です。pタグを分けると、ブラウザが自動で改行してくれます。</p>「改行したいから`<br>`を使いまくる」という方法もありますが、文章の区切りにはpタグを使う方がHTMLの意図に合っています。
pタグを使うと余白も自動でついて読みやすくなりますよ。
このブログも頻繁に改行がされてあります。
特に最近はPCではなくスマホで読む方が多いのでこの対策はブログの読みやすさに直結します。
下の見本コードを見ながら、自分の手でpタグを3つ書いてみましょう。pタグを分けると自動で改行されることをプレビューで確認してみてください！
リンクタグ：a
aタグはanchor（アンカー＝錨）の略で、クリックすると別のページや別のURLへ飛べるリンクを作ります。
読み手が
「この言葉なんだっけ」
とか
「この本後で検索しよう」
と思った時のひと手間を先に解決してあげられる手段を用意しておく方法です。
URLの指定には`href`という属性を使います。
属性とは、タグに追加情報を加えるための仕組みです。
<a href="https://www.google.com">Googleへ移動する</a>また、リンクを別タブで開きたい場合は`target=”_blank”`を追加します。
<a href="https://www.google.com" target="_blank">Googleを別タブで開く</a>属性は`タグ名 属性名=”値”`という形で書きます。
複数の属性をつけることもできます。ここは慣れるまで「ふ～ん。そういうものか〜」くらいの理解でOKです！
画像タグ：img
画像を表示するのが`<img>`タグです。
このタグは少し特殊で、終了タグがありません。
（統一してよ！と思ったそこのあなた！ぜひプログラミング言語自体を自分で作ってみましょう！開発者になれる素質あり！！）
`src`属性に画像のファイル名（またはURL）を指定します。
<img src="photo.jpg" alt="私のプロフィール写真">`alt`属性は画像が読み込めなかったときに代わりに表示されるテキストです。
画像の内容を簡潔に書きましょう。
スクリーンリーダー（視覚障害者向けの読み上げソフト）にも使われるので、省略しないようにするのがマナーです。
全部まとめて書いてみよう
ここまで学んだタグを全部使って、一つのページを作ってみましょう！
前回書いたHTMLの基本構造の中に、今回のタグを組み込んでいきます。
<!DOCTYPE html>
<html>
<head>
<title>HTMLタグ練習ページ</title>
</head>
<body>
<h1>私の自己紹介ページ</h1>
<h2>プロフィール</h2>
<img src="profile.jpg" alt="プロフィール写真">
<p>はじめまして！プログラミングを勉強中のSueです。</p>
<h2>好きなこと</h2>
<p>コーヒーを飲みながらコードを書くのが好きです。</p>
<h2>参考にしているサイト</h2>
<p>
<a href="https://developer.mozilla.org/ja/" target="_blank">MDN Web Docs（プログラミングの辞書的な存在！）</a>
</p>
</body>
</html>このファイルを`index.html`という名前で保存して、ブラウザで開いてみてください。
自分のページが出来上がっているはずです！
うまく表示されたら大成功です🎉
これまで学んだh1・h2・p・a・imgを全部使って、自己紹介ページを作ってみましょう。DOCTYPE・html・head・body などの基本構造も含めて書いてみてください。見本を見ながらでOKです！自分の手で入力することが大事です😊
まとめ
今回はHTMLの基本タグ4種類を学びました。
h1〜h6で見出し、pで文章、aでリンク、imgで画像——これだけでもかなりのページが作れます。
最初は「なんでこんな書き方するの？」と思うかもしれませんが、手を動かすうちに自然と体に染み込んできます。
焦らず、毎日少しずつ続けることが大事！
次回はいよいよCSSに入ります。
HTMLで作った骨格に、色やフォントや余白をつけて「見た目」を整えていきます。
「あのサイトみたいなデザインにしたい！」という夢に一歩近づきますよ。
お楽しみに！
コメント