HTML・CSS独学応援 2-5 「HTMLでよく使うタグ」

HTMLで、よく使うタグを紹介します。

<body>の中に書く、具体的なものになるので
今回紹介するものは、覚えておくことをおすすめします。

  • 「見出し」h1~h6
  • 「段落」p
  • 「画像」img
  • 「リンク」a
  • 「リスト」ul,ol,li

ここでは、簡単に紹介するにとどめますが
各リンク先に、詳しく解説した記事を用意しています。

はじめての方は、1度は見ておいてください。

見出し

本や新聞では、詳しく読まなくても、
だいたいの内容が分かるような「見出し」が作られています。

webページを作るときにも、同じように「見出し」を作ります。
その時に使用するのが、<h1>~<h6>という要素(タグ)になります。

書き方

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

段落

文章を構成する時の「段落」を意味します。
一般的に文章を書く時には、「段落」を付けますよね。

同じように、webページを書く時も、「段落」を付けることで
読みやすい文章を書くことができます。

書き方

<p>この間が1つの段落として認識されます。</p>
<p>適度に段落を付けると、読みやすい文章として表示されます。</p>

画像

画像を挿入したい時に使用します。
企業のロゴや、イメージ写真などをwebページに表示することができます。

適度に画像を使用すると、
文字だけでは表現できないような、視覚的な効果が期待できます。

書き方

<img src="○○○" alt="○○○">

リンク

文字や画像に、リンクを付けることができます。
本や新聞にはない、webページならではの魅力ですね。

書き方

<a href="○○○">ここに書いたものがリンクになる</a>

リスト

箇条書きのような表現や、
ランキングのような表現をしたい時に使用します。

項目は<li>というもので表現します。

箇条書きリストの書き方

<ul>
    <li>○○○</li>
    <li>○○○</li>
    <li>○○○</li>
</ul>

ランキングリストの書き方

<ol>
    <li>○○○</li>
    <li>○○○</li>
    <li>○○○</li>
</ol>

まとめ

今回は使用頻度の多いタグを紹介紹介しました。

今回紹介したタグは
とってもよく使うので、学習を進めるうちに身につきます。

「あれ?なんのタグ使うんだっけ?」
そうなった時に、すぐ見返せるように
どこかにメモしておくなどして活用してみてください。

  • <h1> ~<h6> 見出し  例、<h1>〇〇〇</h1>
  • <p> 段落  例、<p>〇〇〇</p>
  • <img> 画像  例、<img src="〇〇〇" alt="△△△">
  • <a> リンク  例、<a href="〇〇〇">
  • <ul> 箇条書きリスト  例、<ul><li>〇〇〇</li></ul>
  • <ol> ランキングリスト  例、<ol><li>〇〇〇</li><ol>

© 2021 ーれおの部屋ー