HTMLの要素

##HTMLで文章をかいてみよう
前回の記事でHTMLの主な構造は学びました。それでは実際に文章を書いてみましょう。

HTMLでは文字や数字などを<b><>(タグ）</b>というもので囲み、それによりどのような要素かを指定することができます。<br>指定した要素によって表示方法や様々な特徴を持つことができます。

-----
###・【h1~h6要素（見出し要素）】
```html
<h1>h1の見出しです</h1>
<h2>h2の見出しです</h2>
<h3>h3の見出しです</h3>
<h4>h4の見出しです</h4>
<h5>h5の見出しです</h5>
<h6>h6の見出しです</h6>
```

h1~h6要素は見出しに使う要素です。<br>数字が小さくなるにつれて大きい見出しになってます。<br>ブラウザ上でみるとこんな感じです。

-----

![見出し.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/29cd3ad5-4537-45f7-d335-fa5669886cc7.png)


-----

###・【p要素】
```html
<p>p要素です</p>
```
文章の段落を意味するparagraphからとったものです。<br>見出しを除くテキストのほとんどにこのp要素が使われています。<br>ブラウザ上でみるとこんな感じです。

-----
<img width="300px" alt="p要素.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/c014c6e7-2d83-09b9-caeb-a66110c054df.png">
----
###・【br要素】
\<br>の後からが改行されて表示されます。
###・【b要素】
\<b> \</b>で囲まれている文字だけ太字になります。

```html
<p>brの後から<br>改行します。bで囲むと<b>太くなります。</b>b></p>
```
ブラウザ上でみるとこんな感じです。

-----
<img width="400px" alt="br,b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/89864487-eb3e-439e-2a4b-7ddb48a949eb.png">
-----
###・【a要素】
```html
<a href="#">ここのテキストがリンクになります</a>
````
タグで囲ったテキストがリンクになります。URLを<b>href=""<b>で指定してあげることで、そのページへ移動することができます。<br>ブラウザ上でみるとこんな感じです。

----
<img width="300px" alt="a要素.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/cab25fd7-ab7b-7a4c-af09-f69266497edf.png">
----
###・【span要素】
```html
<p>今はまだ何も<span>変化</span>はありません</p>
```
タグで囲った部分だけを装飾するときに使う要素です。装飾にはCSSを使いますが今回はCSSを使っていないためなにも変化はみられません。<br>ブラウザ上でみるとこんな感じです。

-----
<img width="300px" alt="span.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/44e0b4a9-50c6-4306-f8ec-367c8dcdb1a8.png">
-----
###・【img要素】
```html
<img src="test.jpg" alt="">
<p>このように画像が表示されます</p>
```
画像ファイルを表示する要素です。<b>src</b>に<b>ファイル名</b>、またはディレクトリを指定することでその画像を呼び出すことができます。<br>ブラウザ上でみるとこんな感じです。

----
<img width="300px" alt="test.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/568a51d2-a547-5145-6e42-b48f205397c6.jpeg">
このように画像が表示されます

----
###・【input要素】
フォームの入力欄やボタンなど情報を送信したりすることができる要素です。<br>input要素には<b>type属性</b>を指定でき、そのtype属性によって入力欄になったりボタンになったりします。


|<b>type属性</b>|input要素の変化|
|:---:|:---:|
|text|1行の入力欄になる|
|checkbox|チェックボックスができる|
|radio|ラジオボタンができる|
|submit|送信ボタンができる|

###・【textarea要素】
input要素が1行なのに対してtextarea要素は複数行のテキストを入力できます。また、input要素には閉じタグがないのに対し、textarea要素にはあります。

```html
<input type="text"><br>
<br><textarea></textarea><br>
<br><input type="submit">
<!-- 出力結果がわかりやすいように<br>要素が入ってます。 -->
```
このように出力されます。

-----
<img width="300px" alt="form.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/37f83f8c-12ae-9cc8-f38b-e38196b7328c.png">
-----
###・【ul,ol要素】
リストを示す要素です。<b>li要素</b>の親要素になります。ul要素は文頭に「・」を、ol要素は数字をつけることができます。
###・【li要素】
リストの項目を示す要素です。ul要素、ol要素の子要素です。

```html
<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
</ul>

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
</ol>
```
ブラウザの表示はこのようになります。
----
<img width="300px" alt="list.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/40be44c9-0428-56ab-3304-770b56599e09.png">
----
###・【div要素】

```html
<div class = "group-1">
  <h1>group-1のh1要素です</h1>
  <p>group-1のp要素です</p>
</div>

<div class = "group-2">
  <h1>group-2のh1要素です</h1>
  <p>group-2のp要素です</p>
</div>
```
要素をグループわけする要素です。主に<b>class</b>という名札のようなものをつけて使います。<br>ブラウザの表示はこのようになります。

-----
<img width="表示幅" alt="div.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/a3149e47-19d3-40ee-d150-89fd81d67a25.png">
-----

###次はCSSのプロパティについてまとめようとおもいます！