文字参照-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
文字参照の概要[06]
文章にHTMLのタグを書くと、タグとして認識してしまいます。
<p>説明文<h1>タイトル</h1>終わり</p>
文章に<h1>と表示するには文字参照（character reference）という仕組みを利用することで、文字をマークとして認識されないように出来ます。
<p>説明文<h1>タイトル</h1>終わり</p>
<という文字の代わりに＆ltと書きました。これが文字参照です。＆ltは<に置き換わります。このように特別な意味を持つ文字について、特殊な書き方をすことで意味を失わせることをエスケープ（escape）といいます。文章参照の方法は大きく分けて2種類あります。
いずれの文字参照も＆で始まり；で終わります。
名前付き文字参照
名前付き文字参照は、文字を名前で参照する方法です。HTMLでは、名前付き文字参照が述べ2230種類定義されています。
【大文字小文字の区別】
名前付き文字参照では、名前の大文字と小文字を区別できます。例えばáは「á」を表し、Áは「Á」を表します。
【末尾にセミコロンがない場合のエラー処理】
名前付き参照の末尾にはセミコロンが存在しなければならず、これを忘れるとエラーになります。ただし一部の文字はセミコロンのない文字も登録されており、エラーでも認識する場合もあります。&は&でも認識してくれます。
※&は＆のエスケープである。
ただし、属性値中だと&は＆と認識されず「&」と認識されます。
<a href="/nekonikobean?type=a&degree=20">
上記の例えですと&を＆と認識されずそのまま&と認識されていまし、パラメータが正確に渡せなくなります。ですので、セミコロンを省略は可能ですが、なるべく省略しないようにしましょう。
数値文字参照
数値文字参照は、名前ではなく数値によって文字を指定する方法です。名前付き文字参照との違いは、＆の直後に＃が入ることです。＆＃の後に数値を書き、末尾にセミコロンを書きます。数値の表記は2種類あります。
【10進数値文字参照】
＆＃の後にそのまま10進数のコードポイントを記入。<を10進数値文字参照で書くと下記のようになります。
<
【16進数値文字参照】
&#の直後にxもしくはXを書き、その後に16進数でコードポイントを記入します。
<を16進数値文字参照で書くと下記のようになります。
<
10進数値文字参照、16真数値文字参照とも大文字小文字は区別しません。
よく使われる文字参照
文字参照は、主にエスケープの目的で利用されます。特に利用されるのは以下の4種類の名前付き文字参照です。
- <→<
- >→>
- "→"
- &→＆
次コメント
HTMLで扱える文字-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
文字のデジタル表現[05]
【ASCII（American Standard Code for Information Interchange）】
制御文字、アルファベット、数字、記号などが定義されており今ではASCII文字と呼ばれている。
【文字コード（character code）】
ASCIIは128種類の文字に対して、7びっとのビット列を割り当てています。下記のようにイメージです
- （スペース）→0100000（32, 0*20）
- 0→0110000（48, 0*30）
- A→1000001（65, 0*41）
- a→1100001（97, 0*67）
カッコ内はビット列を10進数、16進数で書いたものです。
これらのように文字に振り分けられた番号を文字コード（character code）と呼びます。
【符号化文字集合体】
ASCIIは128種類の文字にしか対応していなく英語圏以外での使用は問題があります。そこでASCIIを拡張する形で、さまざまな文字コードの規格が作られました。
例えばISON/IEC8859-1という規格です。ISON/IEC8859-1では通貨記号（€、$）、フランス語などに使われるアクセント付き文字（à，è，ù ）、ドイツ語などで使われるウムラウト文字（ä,ü,ö）など追加されています。
このように番号を付けた文字の集まりのことを符号化文字集合（coded character set）と呼び、特定の符号化文字集合における文字の番号をコードポイント（csde point）もしくは符号位置と呼びます。
広く一般的に使用されているのがUnicodeと呼ばれる規格です。各国の言葉にも対応し絵文字もカバーしています。
【文字エンコーディング】
文字を実際のビット列に変換することを符号化（encode, encoding）といい、この符号化を行う際の変換ルールを文字エンコーディング（character encoding）といいます。
次未定
要素の入れ子と内容モデル-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
要素の入れ子のルール[04]
<p>この<mark>キーワード<mark>はテストに出ます
上記の例のようにp要素の子要素としてmark要素が入れ子になっています。この記述はルール上問題ありません。ただしmark要素の子要素としてp要素を入れ子とはできません。このような使用を内容モデル（content model）と呼びます。
内容モデルの定義
＜＜画像＞＞
HTML仕様の各要素の説明にはcontent modelの項目があり、そこで内容モデルが定義されています。先ほどのp要素とmark要素は、いずれも以下のようになっています。
content model:
Phrasing content.
子としてPhrasing contentを持つことができることが定義されてます。Phrasing contentは要素のカテゴリー（categories）の１つでmark要素を含み数多くの要素が該当します。ただしp要素はPhrasing contentに属していないので、mark要素の子要素としてp要素を入れ子に出来ないわけです。
【カテゴリーによる内容モデルの定義】
カテゴリーの仕様は以下のようなものがあります。
- Metadata content
- Flow content
- Secctioning content
- Heading content
- Phrasing content
- Interactive content
上記に属さない要素や複数のカテゴリーに属する要素もあります。内容モデルの定義によく出てくるのは、Metadata、Flow、Phrasingの３つです。
・Metadata
HTML文章のメタデータを扱う要素が属します。原則、head要素内で使用され、画面上に表示されることはありません。link、meta、title要素などが属します。
・Flow
HTML文章のコンテンツ内で使える要素のほとんどがFlowに属します。要素の内容モデルがFlowと定義されている場合、ほぼ任意の要素を子要素にできると考えて良いでしょう。ただし、Metadataやli要素、tr要素など、特定の要素を親に持つ必要があるものを除きます。
・Phrasing
Flowに属する要素のうち、特に段落内のテキストに使用される要素がPhrasingに属します。Phrasingにはa、em、img、span、mark要素などが属します。
【要素間のASCII空白文字の扱い】
スペースや改行などのASCII空白文字は、内容モデルの妥当性の判断においては特殊な扱いになります。下記の例のように改行とインデント入れたASCII空白文字をinter-element whitespace（インターエレメントホワイトスペース？）と呼びます。
<ul>
<li>テキスト</li>
</ul>
内容モデルの考慮においてはinter-element whitespaceは無視されます。ただし、JavaScriptには何らかの影響を与えるようなので、そこは注意が必要です。
URLの応用-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
URLの応用-絶対URLと相対URL[03]
スキームから始まる形式のURLを絶対URL（absolute URL）といい、スキーマから始まらない形式のURLを相対URL（relative URL）といいます。
・絶対URL
<a href="https://program-html.hatenablog.com/entry/2023/09/21/235208">
・相対URL
<a href="../2023/09/21/235208">
相対URLには以下のような種類があります
- スキーム相対URL（scheme relative URL）
- パス絶対URL（path absolute URL）
- パス相対URL（path relative URL）
【スキーム相対URL】
スキーム相対URLは、絶対URLからスキームと：を取り除いたものです。先頭が//で始まり、ホスト名が続く記述になります。
・スキーム相対URL
//program-html.hatenablog.com/entry/2023/09/21/235208
【パス絶対URL】
パス絶対URLは、スキーム相対URLから//とホスト名を取り除いたものです。先頭が/で始まり、パスの記述が続きます。
・パス絶対URL
/entry/2023/09/21/235208
【パス相対URL】
パス相対URLは、先頭が/で始まらないパスです。
・パス絶対URL
entry/2023/09/21/235208
URLに使える文字とパーセントエンコード
URLに使える文字は、URLコードポイント（URL code points）として定められており、次の文字になります。
- ACII英文字（ASCII alphanumeric）
- 記号類: ！、$、＆、’、（、）、＊、 *、＋、,、-、.、/、：、；、＝、？、＠、_、〜
- U+00A0~U+10FFFDのUnicode文字。ただしサロゲート（surrogates）と非文字（noncharacters）を除く。
【パーセントエンコード】
URLに使えない文字や、特別な意味に解釈される文字はパーセントエンコードバイト（percent-encoded bytes）として記述できます。文字をパーセントエンコードバイトに変換することをパーセントエンコード（percent-encode）といいます。
・こんな感じの例
日本語：ねこ
パーセントエンコードバイト：%E3%81%AD%E3%81%93
【パーセントデコード】
パーセントエンコードされた文字を元に戻すことをパーセントデコード（percent-decode）といいます。
【＆を含むURLを属性値に記述する場合】
＆を含むURLを属性値に記述する場合、＆amp；と書く必要があります。以前、指摘された記憶がある。。
<a href="../2023/09/21/235208?name=b&age=21">
サブリソースとURLスキーム
サブリソース（subresource）とは起点となるHTMLファイル以外のrソースで、HTMLに埋め込まれる画像などのメディアファイル、CSSファイル、JavaScriptファイルが該当します。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nekonikobankun.jpg" alt='neko'>
上記の例えのURLのスキームはhttpsであり、サブリソースとして利用可能なFetchスキーム（fetch scheme）に分類されます。以下のスキームはFetchスキームとして定義されます。
- http、https：一般的に利用されるウェブ経由した取得
- file：ローカルファイルを使用して取得
- about：about:blankとしてのからのリソースを取得
- blob：JavaScriptなどで生成したデータURL
- data：インラインに埋め込まれるデータURL
属性-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
属性[02]
<p>こちら<a href="https://html.text/">移動</a></p>
<a>タグの中にあるhref="https://html.text/"のように要素に情報を付け加える表現を属性（attribute value）といいます。
属性には名前と値があり、それぞれ属性名（attribute name）属性値（attribute value）といいます。それぞれhref（属性名）https://html.text/（属性値）となります。
属性の書き方
属性を書く場合、属性名の後ろに＝（等号）を記述し、続けて属性値を書きます。下記だとabbr要素にtitleという属性名をして、属性値をcontent-titleとした例です。
<abbr title="content-title">title</abbr>
複数の属性も書くことができます。
<p>こちら<a rel="link" href="https://html.text/">移動</a></p>
また改行で区切ることも可能です。
属性値
属性値の形式は、属性ごとに決められています。ほとんどが任意のテキストを値に指定にできますが、特定の値しか取れない属性もあります。
【ブール型属性】
真偽の意味合いがある、on/offだけで表すもの。hidden属性などがあげられます。
<!-- 記述例 -->
<p hidden="hidden">この内容は非表示</p>
<!-- 省略された記述例 -->
<p hidden="">この内容は非表示</p>
<p hidden>この内容は非表示</p>
<!-- 属性自体を無効 -->
<p>この内容は表示</p>
【列挙型属性】
決められた値しか受けつかない属性。dir属性などが挙げられます。列挙型属性の属性値は大文字小文字を区別しません。
【日付と時間】
日付や時間を指定するタイプの属性。datetime属性などがあげられます。
<!-- 日付の指定 -->
<ins datetime="2023-09-21">
<!-- 日本のローカルタイムの時刻指定 日付と時間の間に T かスペースを入れる-->
<del datetime="2023-09-21T00:00+0900">
<del datetime="2023-09-21 00:00+0900">
<!-- UTCによる時刻指定-- Z 1文字での表現も可能>
<del datetime="2023-09-21T00:00+0000">
<del datetime="2023-09-21 09:00Z">
HTMLの要素とタグ-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
HTMLの要素とタグ[01]
<h1>見出しの要素です</h1>
<p>本分の要素</p>
<h1>（開始タグ）や</h1>（終了タグ）などのタグで内容（content）を囲むこことによって、要素の種類（タグ名）や要素の範囲を明示しています。これらのまとまりを要素といいます。
【終了タグの省略】
HTML構文の場合、終了タグを省略できる場合があります。全てではありませんが、以下省略可能なタグ名です。
p, li, dt, dd, tr, th, td, caption, thead, tbody, tfoot, option, rp, rt
【開始タグの省略】
開始タグの省略できる場合があります。
html, head, body, tbody
開始タグや終了タグは、個人では使用しないかな
【要素の入れ子】
ある要素の内部に別の要素が入っている事を入れ子（nest）といいます。入れ子は多重にできます。
下記の例ですとbody要素の中に要素が入れ子になり、その中にさらにmark要素が入れ子になっていると言えます。
<body>
<p>この<mark>テキスト</mark>は重要なテキストです</p>
</body>
ある要素の中に入っている要素を、その要素の子孫（descendant）といいます。また、ある要素の直下にある要素を子（child, children）といいます。
逆にある要素のすぐ外側の要素を親（parent）、親の親などを含む外側の要素全般を祖先（ancestor）といいます。
例で言えば、mark要素はp要素の子要素であり、子孫要素でもあります。またbody要素の子孫要素でもあります。ただしbody要素の直下ではありませんので、body要素の子要素ではありません。
【誤った入れ子のエラー処理】
要素は、複数の要素にまたがることが出来ません。
<p>ある<mark>テキスト</p>
<p>テキストの</mark>続きです</p>
mark要素がまたがっており、エラーになります。
HTML文書とDOCTYPE
１つの文章をマークアップしたものをHTML文書（HTML document）と呼びます。HTML文書を完成させるには先頭にDOCTYEPと呼ばれるマークを記載します。
<!DOCTYPE html>
ブラウザーはDOCTYPEがないHTML文書を古いものとみなし、特殊な扱いをします。その処理を防ぐためだけに記載します。
次属性
HTTP仕様を読む-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
HTTP仕様を読む[07]
本来なら英語の仕様書を触った方が良いですが、時短も兼ねて日本語を触っていきます。
HTML仕様の目次を利用する
【HTMLの要素について詳しく知りたい】
仕様4章：HTMLの要素
【HTMLの構文について詳しく知りたい】
仕様書13章：HTML構文
【Javascriptと連携する機能の情報を知りたい】
仕様書6章：ユーザーとの対話処理
仕様書7.2〜12章にかけて
【古いHTMLとの互換性について知りたい】
仕様書16章：旧式の機能
