このページについて
MDN(Mozilla Developer Network)の技術情報ページを和訳し、要点をまとめたものです。
- 英文のページを読んで理解すること
- 基礎をおさらいすること
を目的にした自己学習のページです。
厳密な和訳ではなく、全文を網羅したものでもありませんが、
掲載内容について間違いがありましたら、ご指摘いただけると幸いです。
気づいたことや感想は、「memo:」としてコメントしています。
対象ページ
MDN > Learn web development > HTML > Introduction to HTML > Getting started with HTML
以下、概要。
HTML事始め
要素（element）
- 要素（element）は、開始タグ（opening tag）と終了タグ（closing tag）で囲まれた中身（content）からなる
element
<tag>conent</tag>
- img要素のように、開始タグのみで、中身を持たない要素（empty element）も存在する
empty_element
<tag attr="value">
- 要素は、ネスト（入れ子に）できる
- 要素は、ブロック要素（block element）とインライン要素（inline element）に2分される
| ブロック要素 | インライン要素 | |
|---|---|---|
| 主な役割 | ページの構造を担う | 文書内のパーツ |
| 主な要素 | 段落、リスト、ナビゲーションメニュー、フッター | リンク、強調要素 |
| 要素間の配置 | 前後で改行される | 前後で改行されない（同じ行になる） |
| ブロック要素の中に | 入る | 入る |
| インライン要素の中に | 入らない | 入る |
属性（attribute）
要素は、属性（attribute）を持つことができる
element_with_attribute
<tag attr="attr_value">content</tag>
- 属性は、開始タグの要素名の後ろに配置する
- 要素名と属性、属性間は、半角スペースで区切る
- 属性は、属性名と属性値を=（イコール）でつなげる
- 属性値は、ダブルクォーテーションで囲う
- シングルクォーテーションでも良い
- ただし、クォーテーションが混在してはならない
- input要素のdisabled属性のように、属性値を省略できる論理属性（boolean attribute）も存在する
memo:
省略できるのは、属性名ではなく属性値。
disabled="disabled"がdisabledになるのは、=以降が省略されている。
文書構造
doctype
- 文書の種類を定義する
- 以前はHTMLとしての妥当性のため、複雑なルールを定義する必要があった
<!DOCTYPE html>
html要素
- HTMLページのルートになる要素
<html></html>
head要素
- 検索結果に表示させたいkeywordやdescription、CSSファイルへのリンク、文字コードなどを設定する
- ページ上には表示されない
<head></head>
文字コード
- 特に理由がなければ、最も多くの言語に対応したutf-8を指定する
<meta charset="utf-8">
title要素
- ページのタイトル
- ブラウザのタブや、ブックマーク時に表示される
<title></title>
body要素
- コンテンツ
- ページ上に表示される
<body></body>
その他
スペースの扱い
HTML上の連続したスペースは、1つのスペースとして扱われる
特殊文字（special character）
特殊文字（special character）は、文字実体参照（character reference equivalent）に置き換える
| 意味 | 特殊文字 | 文字実体参照 |
|---|---|---|
| 大なり記号 | > | > |
| 小なり記号 | < | < |
| ダブルクォーテーション | " | " |
| シングルクォーテーション | ' | ' |
| アンパサンド | & | & |
コメント（commnet）
コメントは、<!--と-->とで囲う
comment
<!-- content -->