htmlの必要性

# 対象者

* HTMLを１度学んだがどう言った基準でタグ付けするのか忘れた方.  

* HTMLの必要性を知りたい方

# この記事を読んでわかること

* htmlの重要性

* htmlのイメージ

* 人間が読みやすいHTML

# 目次

1. htmlはなぜ重要か. 

1. htmlのイメージ

1. 人間が読みやすいHTML

# 1. htmlはなぜ重要か.
⇨ユーザーに自分のサイトを認知してもらいやすくするため.  
要はユーザーがgoogleでワード検索した際に自分のサイトが上の方にかやすくするため
# ![スクリーンショット 2023-04-14 15.30.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602256/747632ff-3376-bf31-27e1-e779cb099276.png)
htmlのイメージ


検索をした際にどういうページが画面の上の方に来るかの仕組み
![スクリーンショット 2023-04-14 14.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602256/fec7afe8-1ef2-a968-f9ef-c02a769ebb06.png)


まずクローラーと呼ばれる「情報収集屋さん」はインターネットにあるウェブサイトの情報（どんな情報が掲載されているか、いつ作られたか、どんな言語で書かれているのか）などを収集しデータベースに渡し収集した情報を蓄積していきます。
その後ユーザーからキーワード検索されるとデータベースは今までクローラーからもらった情報の中から一番ユーザーのキーワードに該当するウェブサイトを表示していきます。

上記の事から検索結果の上の方に来るためには<span style="color: #d32f2f">「<u>**クローラーに自分のサイトを正しく理解してもうことが大事**</u>」</span>.  
<u>**<span style="color: #d32f2f">正しく理解＝クローラーが読みやすい形でコーディングされている必要があります。</span>**</u>
つまり<span style="color: #d32f2f"><u>**正しくHTMLタグが使われているサイト**</u></span>＝クローラーが読みやすいサイトになります。
![スクリーンショット 2023-04-14 15.01.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602256/e28bca41-920f-9a74-e9ad-8f9161e23201.png)

↑のどちらで書いてもブラウザーに表示されます。ただhtmlのタグなしだと人間は理解しやすいがクローラーには理解しにくい.  
htmlのタグありだと人間にもクローラーにも理解されやすいので結果検索結果の上の方に上がってきやすくなる。


head＝画面に表示されない部分.  
body＝画面に表示される部分.  

headの役割.  
⇨Webサイトのタイトルや説明文など、各種設定用のタグを記述する場所

# 人間が読みやすいHTML
⇨インデントをつけ入れ子構造にする.  

ダメな例
```
<div>                                                               
<h1> 今日の天気  </h1>                                                  
<p>晴れます</p>                                                
</div>                                                               
<div>                                                                
<h1>明日の天気</h1>                                                  
<p>雨です</p>                                                
</div>                                                              
```

良い例
```
<div>                                                               
  <h1>                                                                
    今日の天気                                                           
  </h1>                                                                
  <p>                                                                 
    晴れます                                                         
  </p>                                                                
</div>                                                              
<div>                                                                
  <h1>                                                                
    明日の天気                                                           
  </h1>                                                                 
  <p>                                                                 
    雨です                                                         
  </p>                                                                
</div>                                                               


```

#参考書籍

[https://gihyo.jp/book/2022/978-4-297-12510-3:title]