HTML

#HTML基礎

```html:sample.html
<!DOCTYPE html> <!-- 1. html5の文書であるという宣言のタグ -->
<html> <!-- 2. htmlの開始タグ -->
 <head> <!-- 3. ヘッダの開始タグ ヘッダはページの情報を設定する。画面に表示されない。 -->
   <title>タイトル</title> <!-- 4. ブラウザのタブに表示される。検索結果のタイトルになる。ポイントは30文字程度でキーワードを含める。 -->
   <meta charset="UTF-8"> <!-- 5. 文字コードを設定する。一般的にUTF-8が使われている。 -->
   <meta name="description" content="HTMLの学習"> <!-- 6. Google検索結果の説明欄に表示される。90文字程度でWEBページの内容と整合をとる。 -->
   <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 7. スマホ向けに表示を最適化する。width=device-widthは端末の横幅に自動調整する。initial-scaleはズーム倍率が1という意味。 -->
 </head>
 <body> <!-- 8. body開始タグ。本文を記述。 -->
    <header> <!-- 9. ヘッダー部分に設定。-->
      <h2>見出し</h2> <!-- 10. 見出しに設定。 -->
      <nav> <!-- 11. ナビゲーション部分に設定。 -->
        <ol> <!-- 12. 順番があるリストに設定。 -->
            <li>メニュー1</li><!-- 13. List Itemの略でリストの項目を記述する。 olやulの間に書く。-->
            <li>メニュー2</li>
        </ol>
      </nav>
    </header>

    <main> <!-- 14. メインの文章を書く。ポイントは1ページ1つ設定。 -->

        <div>ブロック</div> <!-- 15. 文章のブロックに設定。 -->

                <a href="https://validator.w3.org/unicorn/?ucn_lang=ja">リンク</a> <!-- 16. ページ遷移させる。 -->
                <br/>

                <img src="test.png" alt="画像がない場合この文字が表示される"> <!-- 17. 画像を表示させる。alt属性は音声読み上げ機能に使われる。また画像がない場合ここに設定したものが表示させる。 -->

        <form action="index.html" method="post"> <!-- 18. 開始～終了タグ中にあるinputの内容をサーバに送るためのタグ。 -->
                        <!-- inputタグ typeの設定で振る舞いが変わる。バリデーション(必須入力、最小値、最大値、最大文字数)、プレースホルダ(入力フォームの薄い文字の初期値でヒントなどを設定) -->

　　　<!-- 19. 数字のみ許可 -->
            <input type="number" name="id" required min=-1 max=2 placeholder="-1～2"> <br/>　<!-- 19.  -->

      <!-- 20. 通常の入力フォーム -->
            <input type="text" name="text1" required maxlength=2  placeholder="ID: 2文字以内"> <br/>

      <!-- 21. パスワードのフォーム。入力値がマスクされる。 -->
            <input type="password" name="password" required maxlength=3 placeholder="パスワード: 3文字以内"> <br/>

      <!-- 22. テキストフォームより縦横の幅が広い。 -->
            <textarea name="textarea1" placeholder="テキストエリア"></textarea> <br/>

      <!-- 23. ファイル選択のフォーム。 -->
            <input type="file" name="file1"> <br/>

      <!-- 24. ラジオボタン。ポイントはnameの値を同じにする。そうするとグルーピングされ、どれか一つ選択できるようになる。デフォルトでチェックしたい場合checkedをつける。 -->
            <input type="radio" name="group1" value="1">radio1
            <input type="radio" name="group1" value="2" checked>radio2

            <br/>

      <!-- 25. チェックボックス。デフォルトでチェックしたい場合checkedをつける。 -->
            <input type="checkbox" name="group2" value="1">check1
            <input type="checkbox" name="group2" value="2" checked>check2

            <br/>

             <!-- 26. プルダウンを表示する。optionタグで項目を設定する。デフォルトで選択したい場合、selectedをつける。 -->
            <select name="select1">
                <option value=1>1</option>
                <option value=2 selected>2</option>
            </select>

            <br/>

      <!-- 27. formブロックにあるinputの値を一括送信する。 -->
            <input type="submit" value="送信"> 

      <!-- 28. formブロックにあるinputの値を一括リセットする。 -->
      <input type="reset" value="リセット">
        </form>

     <!-- 29. excelのセルに似ている。trが行で、tdがセルまた列になる。border属性で枠線を設定できる。 -->
　　　<table border="1">
　　　　<tr><td colspan="2">東京</td></tr>
　　　　<tr><td>新宿</td><td>池袋</td></tr>
　　　</table>

      <br>

      <!-- 30. onclick -->
      <input type=button onclick="alert(1)" value="onclick">

    </main>

    <footer><!-- 31. フッター部分に設定。 -->
            <hr/>
            フッター
    </footer>
 </body>
</html>
```

- https://validator.w3.org
- https://search.google.com/test/mobile-friendly?hl=ja

- 要素、属性、属性値
要素：タグの横にある値
属性：タグ内にあるキーバリューのキー
属性値：属性のキーバリューのバリュー 
【例】`<div class="val"></div>` divが要素で、classが属性、valが属性値

- ブロックレベル要素
見出し、段落、表などの文書を構成する要素で一つのブロックとして認識され前後に改行が入る。【例】div、p、tableなど

- インライン要素
ブロックレベル要素の内容として用いられる要素で、文章の一部として扱われ前後に改行が入らない。【例】img、inputなど

- セマンティックHTML
訳は「意味的な」になる。検索エンジンが文章を解釈できるようh1、main、nav、headerなどのタグで意味付けすること。

- SEO
「Search Engine Optimization」の略。「検索エンジン最適化」のことで、Googleなどの検索で検索上位にヒットさせる施策のこと。例えばtitleタグ、セマンティック、モバイルフレンドリーの対策をする