それぞれのタグの意味を覚える

タグにはそれぞれ役割があります。 HTMLを作成するうえで、役割をしっかり理解して使用しましょう。

よく使うものを紹介します。
タグには入れ子にしていいもの、ダメなものがあります。
これについては次のステップで紹介します。
まずはタグには役割があるってことを覚えましょう。

よっしゃ！やりまっせぇぇぇぇぇ！

いつになくやる気ですねぇ！やりましょー！

h1、h2、h3、h4、h5、h6

これらのタグは「見出し」になります。 h1が一番強い見出しで、あとは数字の順になります。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

a

リンクを作るタグです。
お友達のホームページにリンクしたいときはこれを使いましょう！
href属性にリンク先のURLを記載します。

<a href="リンク先URL">リンク名</a>
<a href="https://machdesign.net/">マッハデザイン</a>

p

段落を作るタグです。

<p>今日は、ぱーとんカッコいいですよ！</p>

ちょっとーぉ、そんなんいつもでんがなーぷぷぷー

過剰に反応してますねー

ul,ol

リストを作るタグです。
ulは順序を変えても意味が変わらないリスト、
olは順序を変えたら意味が変わってしまうリストですー。
リストの項目は、liタグになります。

<ul>
  <li>すいか</li>
  <li>かめ</li>
  <li>めだか </li>
  <li>かっぱ</li>
  <li>ぱーとん</li>
</ul>
<ol>
  <li>すいか</li>
  <li>かめ</li>
  <li>めだか </li>
  <li>かっぱ</li>
  <li>ぱーとん</li>
</ol>

ん、ん、ん、んー。。。ん？

うん、ないですよ

dl dt dd

定義リストです。
dtの言葉や用語を、ddで説明する感じです。

<dl>
  <dt>ぱーとんの好きなもの</dt>
  <dd>お金が好きなロボット</dd>
</dl>

私ね。。。一番大事なものって「愛」だと思います。。。

自分に酔ってますよねー？

strong

われらがストロング。魔法のお酒9％。
強調文字を作ります。

<p>今日は、ぱーとん<strong>カッコいいですよ！</strong></p>

もぉーーーーーー

。。。

table

表組を作るタグ。 大昔はこれでホームページを作った時代もありました。。
今思えばめちゃくちゃですけどね！

<table class="sample">
  <tr>
    <th>苗字</th>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>ぱー</td>
    <td>とん</td>
    <td>40</td>
  </tr>
  <tr>
    <td>ろぼ</td>
    <td>にー</td>
    <td>36</td>
  </tr>
</table>

言うても私ぱいせんっすからーわかりますよねー？

だいぶ気を遣ってるかと。。もやもやしますー。。

img

画像を掲載したい場合はこれです。

<img src="https://machdesign.net/img/robot2.jpg" alt="ぱーとん">

表示例

form

お問い合わせフォームや、ショッピングでは必須になります。
これについては後半で。