HTMLの隠された機能

最も広く使用されている言語（少なくともマークアップ言語として）であるHTMLは、正当な評価を得ていません。
何年も前から存在していることを考えると、FORM / INPUTコントロールのようなものは、新しいコントロールが追加されておらず、同じままです。

だから、少なくとも既存の機能から、あまり知られていないが非常に便利な機能を知っていますか？

もちろん、この質問は次のとおりです。

JavaScriptの
非表示機能CSSの
非表示機能C＃の
非表示機能VB.NETの
非表示機能Javaの
非表示機能ASPの
非表示機能ASP.NETの
非表示機能Pythonの
非表示機能TextPadの
非表示機能Eclipseの非表示機能

HTML 5.0はワーキングドラフトであるため、機能については言及しないでください。

回答ごとに1つの機能を指定してください。

プロトコルに依存しない絶対パスを使用する：

<img src="//domain.com/img/logo.png"/>

ブラウザがHTTPS経由のSSLでページを表示している場合は、httpsプロトコルでそのアセットをリクエストします。それ以外の場合は、HTTPでリクエストします。

これにより、IEの「このページには安全なアイテムと安全でないアイテムの両方が含まれています」というエラーメッセージが表示されなくなり、すべてのアセットリクエストが同じプロトコル内に保持されます。

警告：<link>または@importでスタイルシートを使用すると、IE7およびIE8 はファイルを2回ダウンロードします。ただし、他のすべての用途は問題ありません。

labelタグは、「for」属性を使用してフォーム要素とラベルを論理的にリンクします。ほとんどのブラウザは、これを関連フォーム要素をアクティブにするリンクに変えます。

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

（IE、Firefox、Safari）のcontentEditableプロパティ

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

これでセルが編集可能になります！信じられない場合は試してみてください。

私はoptgroupタグだと思いますはあまり使われない機能の1つ。私が話すほとんどの人は、それが存在することに気づかない傾向があります。

例：

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

私のお気に入りのビットはベースタグです。これは、ルーティングやURL書き換えを使用したい場合のライフセーバーです...

次の場所にいるとします。

www.anypage.com/folder/subfolder/

以下は、このページからのリンクのコードと結果です。

通常のアンカー：

<a href="test.html">Click here</a>

につながる

www.anypage.com/folder/subfolder/test.html

ベースタグを追加すると

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

アンカーは次につながる：

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror 小さな赤い十字（IE）の画像が表示される直前に発生するJavaScriptイベントです。

これを使用して、壊れた画像を有効な代替コンテンツで置き換えるスクリプトを作成できます。これにより、ユーザーは赤十字の問題に対処する必要がなくなります。

一見すると、これは完全に役に立たないと見なすことができます。なぜなら、画像がそもそも利用可能であったかどうか、以前にあなたは知らないのですか？しかし、あなたが考えるならば、このことについて完璧な有効なアプリケーションがあります。たとえば、自分が管理していないサードパーティのリソースから画像を提供しているとします。SOの私たちのgravatarのように... http://www.gravatar.com/から提供されます。これは、stackoverflowチームがまったく制御しないリソースです-信頼性はありますが。http://www.gravatar.com/がダウンした場合、stackoverflowはを使用してこれを回避できonerrorます。

<kbd>キーボード入力をマークアップするための要素

Ctrl+ Alt+Del

<blink>

サイトで重要なものに使用する必要があります。最も重要なサイトは、すべてのコンテンツを瞬時にラップします。

<marquee>

電子書籍などに最適な、リアルなスクロール効果を作成します。

編集：簡単なやつ、これは単なるユーモアの試みでした

あまりよく知られていませんが、画像の読み込み中にlowsrc表示される画像を指定できます。lowsrcsrc

<img lowsrc="monkey_preview.png" src="monkey.png" />

これは、インターレース画像を好まない人に適したオプションです。

ちょっとした豆知識：ある時点では、このプロパティはあいまいで、2000年頃のHotmailの悪用に使用されていました。

DELそして、INSマークに削除された内容を挿入します：

HTML <del>sucks</del> <ins>rocks</ins>!

ボタンタグは新しくinput submitタグと多くの人々はまだそれに慣れていません。ボタンのテキストは、たとえば、buttonタグを使用してスタイルを設定できます。

<button>
    <b>Click</b><br />
    Me!
</button>

2行のボタンをレンダリングします。最初の行は「クリック」を太字で示し、2番目の行は「私！」を示します。こちらでお試しください。

印刷用のCSSを指定します

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

<dl> <dt>と<dd>アイテムはしばしば忘れられ、彼らは、定義リスト、定義用語と定義のために立っています。

順不同リスト（<ul>）と同様に機能しますが、単一のエントリではなく、キー/値リストに似ています。

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

完全に隠されているわけではありませんが（これはIEのせいです）、私の好みに合わせてthead、tbody、tfootについて知る人が足りません。そして、マークアップでtfootがtbodyの上に表示されることになっていることを知っている人はどれくらいいますか？

wbrまたは単語ブレークタグ。Quirksmodeから：

（ワードブレーク）は、「必要に応じて、ブラウザはここに改行を挿入する場合があります。」ブラウザーは、改行が必要であるとは考えないため、何も起こりません。

<div class="name">getElements<wbr>ByTagName()</div>

ブラウザに改行を追加するオプションを提供します。これは、テーブルに十分なスペースがある場合、非常に大きな解像度では必要ありません。ただし、解像度が小さい場合、このように戦略的に配置された改行により、テーブルがウィンドウより大きくなり、水平スクロールバーが発生しなくなります。

­同じページで言及されているHTMLエンティティもあります。これは同じですwbrが、区切りが挿入されると、区切り-を示すハイフン（）が追加されます。印刷でどのように行われるのかというようなものです。

例：

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

あまり使用されていない機能は、ページに表示されるコンテンツを提供するほぼすべての要素が 'title'属性を持つことができるという事実です。

このような属性を追加すると、要素の上にマウスを置いたときに「ツールチップ」が表示され、ページが混雑しないように、必須ではないが便利な情報を提供できます。 。（または、既に混雑しているページに情報を追加する方法になる場合があります）

1つのタグに複数のhtml / cssクラスを適用する。同じ投稿はこちら

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

私たちは皆、DTDまたはドキュメントタイプ宣言（ページをW3Cバリデーターで失敗させるもの）について知っています。ただし、DTDを拡張することは可能です。カスタム要素の属性リストを宣言することによりです。

たとえば、タグに追加されているため、W3Cバリデーターはこのページで失敗します。ただし、次のようにすることで成功させることができます。behavior="mouseover"<p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

QuirksModeのカスタムDTDの詳細については、を参照してください。

base 64でエンコードされた文字列を、画像、JavaScript、iframe、リンクのsource / href属性として割り当てることができます

例えば

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

参考文献

HTMLマークアップを使用して画像を作成するにはどうすればよいですか？

バイナリファイルからBase64エンコーダー/トランスレーター

最近、フィールドセットとラベルタグについて知りました。上記のように、非表示ではありませんが、フォームに役立ちます。

<fieldset>説明

例：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

のobject代わりにタグを使用iframeして、ページに別のドキュメントを含めることができます。

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>セグメント化された<select>リストを作成するときに、見落としがちな素晴らしいものです。

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

の代わりに使用する必要があります

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

また、ほとんどの場合、名前と値のペアを指定するだけで押されたフォームボタンを区別できるという事実を認識していません。例えば

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

サーバー側では、ボタン名に関連付けられた要求パラメーターの存在を確認するだけで、押された実際のボタンを取得できます。そうでない場合null、ボタンが押されました。

私が見てきた多くの不必要を JSハック/回避策を見ました。たとえば、フォームのアクションを変更したり、押されたボタンに応じて非表示の入力値を事前に変更したりします。それは単に驚くべきことです。

また、テーブルの行のように、複数のチェックボックスのうちのチェックされたものを収集するために、ほぼ同じくらい多くのJSハック/回避策を見てきました。JSは、テーブルの行を選択/チェックするたびに、非表示の入力要素のカンマ区切りの値に行インデックスを追加し、サーバー側でさらに分割/解析されます。これは、複数の入力要素を指定できることに気づいていないためです。同じ名前で異なる値を指定できること、およびサーバー側で配列としてそれらに引き続きアクセスできることを知らないためです。例えば

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

気づかないと、各チェックボックスに異なる名前が付けられ、値属性全体が省略されます。一部のJSハック/回避策のない状況では、不必要に圧倒的な魔法もいくつか見ました、チェックされた項目を区別するために、サーバー側のコードにます。

コルグループタグ。

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

のfor属性<label>タグ指定されていない暗黙的に最初の子として設定されます<input>、すなわち

<label>Alias: <input name="alias" id="alias"></label>

に相当

<label for="alias">Alias:</label> <input name="alias" id="alias">

リンクとしてのボタン、JavaScriptなし：

フォームアクションにはあらゆる種類のファイルを配置でき、リンクとして機能するボタンがあります。onclickイベントなどを使用する必要はありません。フォームに「ターゲット」を貼り付けることで、新しいウィンドウでファイルを開くこともできます。私はその技術をアプリケーションにあまり見かけませんでした。

これを交換

<a href="myfile.pdf" target="_blank">Download file</a>

これとともに：

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

X秒でページを更新する最も簡単な方法- メタ更新

<meta http-equiv="refresh" content="600">

contentの値は、ページを更新するまでの秒数を示します。
[編集]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

単純なリダイレクトを行うには！
（@rlbに感謝）

<html>、<head>および<body>タグはオプションです。それらを省略すると、パーサーによって適切な場所に黙って挿入されます。それをです完全に有効な暗黙のと同じように（HTMLでそうします<tbody>）。

理論的には、HTMLはSGMLアプリケーションです。これはおそらく最も短い有効な HTML 4ドキュメントです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

上記はW3C Validator以外では機能しません。ただし、有効な最短のHTML5 text/htmlドキュメントはどこでも機能します。

<!DOCTYPE html><title></title>

の lang属性はあまり知られていませんが、非常に便利です。この属性は、ドキュメント全体または単一の要素でコンテンツの言語を識別するために使用されます。言語コードは、ISO 2文字の言語コード（つまり、英語の場合は「en」、フランス語の場合は「fr」）で指定されます。

引用符などの表示を調整できるブラウザに便利です。スクリーンリーダーも、lang 属性と検索エンジンの恩恵を受けます。

Sitepointには、lang属性についての素晴らしい説明があります。

例

langDOMの下位レベルの別の属性でオーバーライドされない限り、ドキュメント全体で英語になる言語を指定します。

<html lang="en">

次の段落の言語をスウェーデン語に指定します。

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

"！DOCTYPE"宣言。隠された機能だとは思わないでください。しかし、あまり知られていませんが、非常に便利です。

例えば

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">