こんにちは、ましゅりです。
前回の内容をおさらいしながら、今回も初心者向けにわかりやすくHTMLについて解説していきます！
よく使うHTMLタグ
次に、よく使う基本的なHTMLタグについておさらいします。
見出しタグ
ウェブページには見出しが必要です。見出しを作るためには、<h1> から <h6> までのタグを使います。
<h1> が最も大きな見出しで、数字が大きくなるにつれて小さくなります。
<h1>メインの見出し</h1>
<h2>サブの見出し</h2>
段落タグ
文章を段落ごとに区切るためには、<p> タグを使います。
これでテキストを段落として表示できます。
<p>これは段落のテキストです。</p>
リストタグ
リストを作成するために、<ul> や <ol> を使い、項目を <li> で囲みます。
<ul> は順不同リスト（箇条書き）、<ol> は順序付き（番号）リストです。
順不同リストの例：
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
順序付きリストの例：
<ol>
<li>第一位</li>
<li>第二位</li>
<li>第三位</li>
</ol>
リンクタグ
ウェブページ間をリンクするためには、<a> タグを使います。
リンクタグ（<a>タグ）は、HTMLで他のページやサイトに移動できるリンクを作るためのタグです。
href 属性でリンク先のURLを指定します。
<a href=”https://www.yahoo.co.jp/”>yahoo!JAPAN</a>
この場合、「yahoo!JAPAN」を押すと、https://www.yahoo.co.jp/ に移動します。
ポイント
href属性にリンク先のURLを入れる<a>タグで囲んだ文字がクリックできる
簡単に言うと、リンクタグは「この場所をクリックすると、指定したページに飛べるようにするもの」です！
画像タグ
画像を表示するためには、<img> タグを使います。
画像ファイルの場所を src 属性で指定します。
<img src=”画像のURL” alt=”画像の説明“>
この画像をウェブに載せてみます。
「画像のURL」の所に画像のファイルパスを書きます。
画像をクリックすると、この画面になるので、上の真ん中に文字が書いてあるのがファイルパスです。
少し見づらいので拡大してみます。
<img src=”makaron(6).png” alt=”マカロンの写真”>
alt 属性は、画像が表示されない場合に代わりに表示されるテキストです。
これを設定しておくことで、検索エンジンにも優しく、アクセシビリティが向上します。
まとめ
今回は、HTMLの基礎をおさらいしてみました。
これからCSSを学びつつ、さらにウェブページ作成に活かしていきたいと思います。
まだまだ覚えることがたくさんありますが、少しずつ実践していくことで、より理解が深まっていくと信じています！
HTMLをしっかり学んで、次に進むための土台を作ることが大切ですね。
これからも勉強を続けて、実際にウェブページを作ってみたいと思っています！
