HTML

提供：GNU social JP Wiki

About

HTML (Hyper Text Markup Language) はウェブ用の文書を記述するためのマークアップ言語だ。文章を構成する要素 (見出しや段落など) にマークアップを施す (明示的に印をつける) ことで文書を表現する。HTMLは手作業で記述されることもあるが、プログラムから生成されることもある。

HTMLは単なるテキストだけではなく、画像や動画などのメディア、テキスト入力欄・ボタンなどのフォーム、JavaScriptによるプログラムなどを埋め込むことができるため、プログラムのGUIとしても使用される。ウェブブラウザーから表示した時のSNSやWikiの画面はHTMLで表現されている。

HTMLの見え方はスタイルシートという仕組みで決まる。これにより例えば見出しは大きな文字で、段落の前後は1行あけて、リンクは青い文字で表示される。スタイルシートを記述するための代表的な言語はCSSだ。一般的に、HTMLの制作者が自分でCSSを用意してHTMLと紐づけてウェブサイトの外観をデザインする。

Standard

HTMLの現行の標準仕様は「WHATWGのHTML Standard」および「ISO/IEC 15445:2000」だ。一般的なウェブ開発では前者が使用される。

HTMLの構文は仕様通りに記述されるべきだが、ウェブブラウザーはエラー修正機能を持ち、誤ったHTMLをなるべく正しく表示しようとする。そのためHTMLの誤りには気づきにくいが、有耶無耶にするとトラブル解決や互換性の面で問題の元になりかねない。

XHTML

通常のHTMLはXMLに似ているが厳密にはXMLではない。XHTMLを使用すれば完全なXMLの構文でHTML文書を記述できる。GNU socialの画面はXHTMLで表現されている。

PHPなどのプログラムでHTMLを生成する場合、XHTML構文を使用するか、通常のHTML構文を使用するかを区別する必要がある。また、JavaScriptでDOMを操作する場合も現在の文書がHTMLかXHTMLかで挙動に差が発生するため注意が必要だ。

HTMLとXHTMLとの主な差異は次の通りだ。

  • XML宣言がある
  • 要素名は小文字でなければならない
  • 開始タグ/終了タグの省略ができない
  • 通常のHTMLで終了タグの無い <img> 要素などは <img /> の様に閉じる必要がある

Form

About

Ref: <form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN

form関係の要素はWebアプリで非常に重要。

form要素外のinputとの連携。

基本的にform要素内に配置されたinputなどのフォーム関係要素の情報が同じform要素ないのtype=submitのボタンで送信される。

form要素外部に配置したform関係要素を送信に含めたい場合、form要素にidを指定しておき、外部のform関係要素のform属性で指定する。

<body>
    <form id="form1" method="POST" action="test.php">
        <input type="text" name="text1" id="text1" />
        <input type="submit" value="submit" />
    </form>
    <input type="text" name="text2" id="text2" form="form1" />
</body>

submitのボタンがform要素外部にある際も、form属性で指定すれば連携できる。

  • form: フォーム連携要素の処理、サーバーへのデータ送信用 (HTML Standard)。
  • fieldset: フォーム要素のグループ化用の要素 (The legend element)。
  • legend: fieldsetのラベル。

fieldsetが一番外側で、その中にformやinputがあるイメージ。

Attribute

重要な属性が何個かある。

  • action: 送信先のURL。
  • enctype: method="post"の場合のMIME。application/x-www-form-urlencoded=デフォルト。基本はこれで問題ない。multipart/form-data=画像やファイル類の場合。text/plain=デバッグに便利。
  • method: 送信時のHTTPメソッド。get=デフォルト。URLクエリー (?と&区切り)。post=フォームデータをリクエスト本体に設定。dialog=dialog要素内で有効。
  • novalidate: 論理値。フォーム送信時の検証を無視。

Autocomplete

Ref: HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN

input系要素の場合、autocomplete属性でWebブラウザーで自動入力できる。入力の手間を省くのに重要。

autocomplete属性の値で、Webブラウザーに自動入力の種類などを示唆できる。「HTML Standard」に指定可能な値がある。

いくつかよく使いそうなものを記載しておく。

  • email
  • url
  • username
  • off
  • on

Webブラウザーがオートコンプリートで認識してくれる項目がけっこう限定されている (Chrome でフォームに自動入力する - パソコン - Google Chrome ヘルプ)。

WebブラウザーがやってくれていないやつはJavaScriptでやっていることがある。

[Settings]-[Autofill and passwords] で管理されている。基本的に以下のデータが対象 (オートコンプリート属性入門 〜Chromeで設定できる項目を試してみた〜 - asoview! Tech Blog)。

  • username
  • password
  • 住所
  • 決済方法
  • email

その他の情報。

自動補完の条件がある。他のドメインにsubmitする場合はそのままだと対象外。また、autocomplete=usernameすると、ログイン時の入力補完の支援を受けられる。ややトリッキー。自動補完してほしいところはこれを指定しておくとひとまず楽ではある。

datalist

Ref: datalistタグ＆inputのlist属性の使い方と注意点 [無料ホームページ作成クラウドサービス　まめわざ]

autocompleteに近いものとしてdatalistがある。こちらはinput+selectのようなことができる。いわゆるコンボボックス的なことが簡単にできる。

    <input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
      autocomplete="on" autocorrect="off" autocapitalize="off"
      formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
      style="background-color:rgb(158,194,63)" />
    <datalist id="MaMiList">
      <option value="fedibird.com"></option>
      <option value="gp.tsukimi.club"></option>
      <option value="mastodon.social"></option>
    </datalist>

CSS

text-indent

Ref: CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる - かもメモ.

text-indentが設定されているとinline-blockが崩れることがある。

inline-blockの要素に対して「text-indent: 0 又は、display: inline;」で解決するらしい。display:inlineで自分の場合解決した。

Selector

CSSの適用範囲を指定する。document.querySelectorなどでも使用する。非常に重要。

スペースに意味があるので注意する。

属性セレクター

Ref: CSSで複数の属性セレクタを指定する #CSS - Qiita. 

div[data-color="red"][data-size="small"]

[属性名="属性値"]の書式。.クラス名は[class="クラス名"]の省略記法？

スペースを開けずに複数列挙することで複数指定できる。その場合、AND指定になる。

「https://wiki.gnusocial.jp/index.php?title=HTML&oldid=325」から取得