htmlの必要性

対象者

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

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

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

• htmlの重要性

• htmlのイメージ

• 人間が読みやすいHTML

目次

1. htmlはなぜ重要か.

2. htmlのイメージ

3. 人間が読みやすいHTML

1. htmlはなぜ重要か.

⇨ユーザーに自分のサイトを認知してもらいやすくするため.
要はユーザーがgoogleでワード検索した際に自分のサイトが上の方にかやすくするため

htmlのイメージ

検索をした際にどういうページが画面の上の方に来るかの仕組み

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

上記の事から検索結果の上の方に来るためには「クローラーに自分のサイトを正しく理解してもうことが大事」.
正しく理解＝クローラーが読みやすい形でコーディングされている必要があります。
つまり正しくHTMLタグが使われているサイト＝クローラーが読みやすいサイトになります。

↑のどちらで書いてもブラウザーに表示されます。ただ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]