study-note

HTML

記述方法

DOCTYPE宣言

HTML文書を送る際に必須の前置き（プリアンブル）
HTMLのバージョンを示す
現在のDOCTYPE宣言：`<!DOCTYPE html>

HTML要素

head要素：文書の情報の集まり
body要素：コンテンツの集まり
コメント：

テンプレート

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <body></body>
<html>

情報の要素

title要素：検索結果のタイトル、ブラウザのタブの表示
```
<title>〜</title>
```
style要素：CSSを文章に埋め込む
```
<style>〜</style>
```
script要素：動的なスクリプトを含む
```
<script>〜</script>
```
文書の説明：検索結果の説明文としてアピールできる
```
<meta name="description" content="内容">
```
スマホ対応：表示領域（viewport）の調整
```
<meta name="viewport" content="device-width">
```
参照：viewport
オープングラフ：WebページをSNSでシェアした際の表示方法を設定できる
```
<meta property="og: " content=" ">
```
- og: url, type, title, description, image

ブロック型の要素

見出し・段落・表など、文書を構成する基本となる要素
現在のHTMLのルールでは消えている定義

ブロック型の要素

div要素：意味を持たないブロック型の要素（デザイン目的）
header要素：前置きのグループ
nav要素：主要な他のページへのリンク（メインリンク）
main要素：文書の主要なコンテンツ
footer要素：後おきのグループ
h1要素：見出し（h1〜h6）
section要素：文章の一般的セクション
p要素：段落

article要素：文書等の中で完全もしくは自己完結した構造
aside要素：
- 他の要素と若干関連するが、独立したセクション
- サイドバーによく使われる
blockquote要素：別のソースから引用されているセクション（段落での引用）
details要素：表示・非表示を示す（コンテンツを折りたたむ）
- summary要素：まとめ・キャプション・凡例
```
<details>
  <summary>
  </summary>
</details>
```

箇条書きの要素

順番のない箇条書き

  <ul>
    <li></li>
    <li></li>
  </ul>

ul要素：順番のない箇条書き
li要素：箇条書きの一つの項目
項目の先頭に・が表示される

順番のある箇条書き

  <ol>
    <li></li>
    <li></li>
  </ol>

ol要素：順番のある箇条書き
項目の先頭に数字が表示される

reversed属性：逆順
type属性：種類を変える
start属性：開始番号を変える

説明の箇条書き

  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>

dl要素：説明のグループ
dt要素：説明する対象
dd要素：説明

インライン型の要素

文書の一部として含むことのできる要素
HTMLの文書内で、テキストの一部や他の要素の中に配置される
横に伸びない
現在のHTMLルールでは消えている定義

インライン型の要素

small要素：
- 免責事項、警告、法的制約、または著作権
- 通常はfooter内に書く
em要素：要素のコンテンツの強調
strong要素：強力な重要性、深刻性、または緊急性
q要素：インライン型尿素の引用（行内での引用）
span要素：何の意味もない要素（スタイルに利用）
br要素：改行（閉じタグなし）
wbr要素：
- 改行の機会
- HTML内の英単語は途中で切れず、長すぎるとあぶれる
- ブラウザの幅に応じて切ってもよい場所を指定する
code要素：コンピュータコードであることを示す
- pre要素：整形済みテキストのブロック型の要素（改行やタブが有効になる）
sup要素：上付き文字
sub要素：下付き文字
ruby要素：ルビ注釈（ふりがな）
- rt要素：ルビのテキスト
mark要素：読者の注意を喚起するため、テキストの一部に追加されたハイライト

画像の要素

img要素：画像の要素

src属性：ファイルの所在・出典
alt属性
- 画像が表示されなかった場合の代替表示
- 検索エンジンに画像の内容を伝えることができる
- 音声読み上げソフトでの読み上げテキストになる

リンクの要素

a要素：リンクの要素

<p><a href="https://example.com">サイト</a>へアクセス</p>

target属性：リンク先のWebページの開き方
- _blank：新規ウィンドウ（タブ）で開く
- _self：自分自身のウィンドウ（ラブ）で開く
ページ内リンク：hrefにリンク先のid名を指定する
- リンク元
```
<p><a href="#goTo">goTo</a>に飛ぶ<p>
```
- リンク先
```
<h2 id="goTo">goTo</h2>
```

nav要素

入力の要素

input要素：1行入力の要素

  <p>お名前：<input type="text"></p>

type属性：種類
- text：テキストの入力
- range：スライダの入力
- date：カレンダーの入力
- color：色の入力
- radio：ラジオボタン
```
<input type="radio" name="answer">
```
label：input要素と文字列を紐づけする要素

select要素：選択入力の要素

  <p>サイズ
    <select>
      <option>S</option>
      <option>M</option>
      <option>L</option>
    </select>
  </p>

textarea要素：複数行の入力の要素

  <p>感想：<textarea></textarea></p>

4. `button`要素：ボタンの要素（入力の要素ではないが、密接に関係する）

### マルチメディアの要素

1. `audio`要素：音の要素

  ```html
  <p><audio src=" " controls loop></audio></p>

controls属性：コントローラを表示
loop属性：繰り返し
autoplay属性：自動実行（標準では無効）

video要素：動画（映像＋音）の要素

  <p><video src=" " controls loop></video></p>

controls属性：コントローラを表示
loop：繰り返し
autoplay：自動実行
muted：音を消す

study-note

HTML

目次

記述方法

DOCTYPE宣言

HTML要素

テンプレート

情報の要素

ブロック型の要素

ブロック型の要素

箇条書きの要素

インライン型の要素

インライン型の要素

画像の要素

リンクの要素

入力の要素