HTMLについて学んだことまとめ #HTML

HTML - MDN - Mozillaで学んだことをまとめます。

今回の学習のゴール

HTMLとは何か、何ができるかを知る
実際の使い方について知る

1. HTMLとは

HyperText Markup Languageの略称
webページのレイアウトに従ってwebページのコンテンツを記述し定義するもの
マークアップを使用してwebページのコンテンツを記述する
- マークアップ : 文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピュータが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくこと

ex. <head>, <title>, <body>, <header>, <footer>

2. HTMLの基本

ブロック要素とインライン要素

ブロック要素
- 段落・リスト・ナビゲーションメニュー・フッターなどのウェブページ上で視認できるブロックを形成する要素
- インライン要素の中にネスト（入れ子）されることはできないが、他のブロックレベル要素にネストされることはある

<p>first</p><p>second</p><p>third</p>

ブラウザ

first
second
third

インライン要素
- ブロックレベル要素の中に包含され、段落全体やコンテンツのグループではなく、ドキュメントの内容の小さな部分だけを囲む要素
- ドキュメント内に新たな行を表示させず、テキスト段落の中で表示される

<em>first</em><em>second</em><em>third</em>    <!-- 強調要素 -->

ブラウザ

firstsecondthird

HTML文書の構造

<!DOCTYPE html>    <!-- DOCTYPE宣言 -->
<html>    <!-- ページ全体を囲むタグ -->
  <head>    <!-- HTMLページに必要だが表示しない要素 -->
    <meta charset="utf-8">    <!-- 文字コード -->
    <title>first page</title>    <!-- ページのタイトル ブラウザのタブに表示される -->
    <link rel="stylesheet" href="my-css-file.css">    <!-- HTMLにCSSを追加 -->
  </head>
  <body>
    <!-- webページで表示したいコンテンツを記載する -->
  </body>
  <script src="my-js-file.js"></script>    <!-- HTMLにJavaScriptを追加 -->
</html>

補足
- DOCTYPE宣言とは
  - この文書がHTMLであること宣言し、HTMLのバージョンを明記するもの
  - <!DOCTYPE html>は、HTML5を宣言するもの
- <link>要素は<head>タグの中に置く

主なレイアウト要素

タグ	説明
`<main>`	Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分
`<article>`	文書内の独立した記事セクション
`<section>`	見出しを伴う文書内の章や節
`<aside>`	補足や脚注、用語の説明など、本筋とは別に触れておきたい内容
`<header>`	文書やセクションのヘッダー
`<nav>`	文書内の主要なナビゲーション
`<footer>`	文書やセクションのフッター著者情報や関連記事へのリンクを記述することが多い

主要な要素

<h1>見出し</h1>

<p>パラグラフはpタグを使う</p>

<p>
    <img src="test.jpg">    <!-- 画像の埋め込み -->
    <a href="https://www.example.com">リンクの名前</a>    <!-- リンクの埋め込み -->
</p>

<!-- 順序なしリスト -->
<ul> 
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
</ul>

<!--順序つきリスト -->
<ol>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
</ol>

<!-- テーブル -->
<table> 
    <tr>    <!-- table row -->
        <th>デーブルヘッダー1</th>    <!-- table header 表の見出し -->
        <th>デーブルヘッダー2</th>
        <th>デーブルヘッダー3</th>
        <th>デーブルヘッダー4</th>
    </tr>
    <tr>
        <td>デーブルデータ1</td>    <!-- table data -->
        <td>デーブルデータ2</td>
        <td>デーブルデータ3</td>
        <td>デーブルデータ4</td>
    </tr>
</table>

HTMLフォーム

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">送信</button>
  </div>
</form>

補足
- <form>タグはフォームを表す
  - action属性にはフォームで収集したデータを送信すべき場所(URL)を定義する
  - method属性にはデータを送信するために使用するHTTPメソッドを定義する
- <label>タグはフォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのもの
- <input>タグはフォームにおける入力欄を表す
  - type属性では入力欄の種別を指定できる
    - submit : 送信ボタン
    - text : 1行テキストの入力欄
    - email : メールアドレスの入力欄
    - checkbox : チェックボックス（複数選択可能）
    - radio : ラジオボタン（1つだけ選択可能）
- <textarea>タグは複数行の入力が可能な入力欄を作成するためのもの
- <button>タグは<form>タグで作成したフォームの中で汎用的にボタンを作成することができる
  - type属性でボタンの形式を指定する
    - submit : フォーム入力内容を送信する
    - reset : フォーム入力内容をリセットする
    - button : 何もしない汎用的な押しボタン

参照

HTML - MDN - Mozilla

HTMLについて学んだことまとめ

目次

今回の学習のゴール

1. HTMLとは

2. HTMLの基本

ブロック要素とインライン要素

HTML文書の構造

主なレイアウト要素

主要な要素

HTMLフォーム

参照