Blog

【Mozilla - ウェブ開発の学習】 HTML によるコンテンツの構造化

Mozilla - ウェブ開発の学習の「HTML によるコンテンツの構造化」を読んでいきます。

※冒頭にある Glich というサービスは 2025/07 にサービスが終了になっているので注意してください。

  • 基本的な HTML の構文
  • ヘッド部には何が入る? ウェブページのメタデータ
  • HTML の見出しと段落
  • 強調と重要性
  • リスト
  • 文書とウェブサイトの構造
  • 高度なテキスト装飾
  • リンクの作成 ← イマココ
  • 課題: 手紙のマークアップ
  • 課題: コンテンツのページの構造化
  • HTML の画像
  • 動画と音声のコンテンツ
  • Mozilla のスプラッシュページ
  • HTML の表の基本
  • HTML 表のアクセシビリティ
  • 課題: 惑星データの構造化
  • HTML におけるフォームとボタン
  • HTML のデバッグ

基本的な HTML の構文

  • 要素、タグ、要素の入れ子、属性の基本
  • 「論理属性」は記述したら true の意味 (たとえ “false” と書いたとしても)
  • 「論理属性」の値は仕様では空文字列 (値が指定されていない場合も含む) か属性名と同じ
  • 属性値は二重引用符で囲んでも単一引用符で囲んでも等価
  • ホワイトスペース、文字参照、コメントの話
  • JavaScprit の innerHTML ではホワイトスペースが残る

このページをざっと読むだけで 30 分かかっちゃった。

ヘッド部には何が入る? ウェブページのメタデータ

  • ヘッド部に書く title, meta, author, description 要素の基本
  • keyword はもう使われていない (無視される)
  • OGP (https://ogp.me/)
  • ファビコンの基本
  • ファビコンが読み込まれない場合は Content Security Policy (CSP) が原因の可能性あり
  • CSS と JavaScript の追加
  • 現代は JavaScript を最後に読み込ませるためには defer を記載する
  • lang 属性 (https://www.w3.org/International/articles/language-tags/) は設定すべき
  • 一部にも言語を設定することができる

このページをざっと読むだけでも 30 分かかった。

意外に高度なこともサラッと書かれているので、初心者には無視すべきかの判断が難しいかも。
逆にある程度 HTML を知っている場合は有用。

HTML の見出しと段落

このページは一瞬。

強調と重要性

  • em は強調。意味を微妙に変えたり。英文では通常イタリック体
  • strong は強い重要性。通常太字
  • i, b, u は伝統的にイタリック体、太字、下線で表していたものに使う

このページも一瞬。em, strong と i, b, u の違いは覚えておく。

リスト

  • 説明リストには複数の dd を持たせることも可能

このページも一瞬。

文書とウェブサイトの構造

  • ここら辺がメニューとの対応がおかしい (「リスト」から次へでここに移動する)
    • メニューでは「HTML テキストの基礎」「高度なテキスト装飾」「高度な HTML テキスト」「課題: 手紙のマークアップ」が「文書とウェブサイトの構造」の上にある
  • main は一つ。body の中に直接入れる
  • article はページの残り部分なしでも意味をなすコンテンツを囲む
  • section 一つの機能をグループ化。見出しで始めるのが好ましい
  • artcile の中に section が入ることも、section の中に article が入ることもある
  • aside はメインコンテンツには直接関係しないコンテンツ
  • header は article, section の中のヘッダーにも使える

高度なテキスト装飾

  • ブロック引用は blockquote で cite 属性に引用元の URL を記載
  • インライン引用は q
  • cite 要素は引用されたリソースのタイトルや書籍の名前を表す
  • abbr は略語
  • address は連絡先
  • sup, sub は上付き、下付き
  • pre は空白を保持
  • code はコンピュータのコード
  • var は変数名
  • kbd はキーボード入力
  • samp は出力

リンクの作成

  • title 属性には補足情報を含められるが、重要なことは通常テキストに入れる
  • 絶対 URL と相対 URL という概念が出てきたが “/xxx” の絶対パスの概念は出てこない
  • リンクテキストの注意事項
    • URL をリンクテキストの一部に入れない
    • リンクテキストに「リンク」または「リンク先」と書かない
    • リンクのテキストは可能な限り短くする
  • download 属性を使うと既定の保存ファイル名を指定できる
  • mailto: リンクには subject, body なども指定できる

Search

Recent Posts

Tags